canvas-lms

How to debug Canvas LMS mobile app customization

After customized the Canvas LMS desktop webpage with CSS and JS files we need to do the same on the mobile app.

Given the mobile app for both Android and iPhone is a Webview, how can i inspect html tags classes and ids to apply changes through the CSS or JS files?

Thanks!

Solution

  • Given no one knows about it, I proceeded as following:

    1. I've cloned Canvas mobile app from public github repo available at: https://github.com/instructure/instructure-android
    2. I've compiled the project and executed it on my own device, for which i needed a demo license of PSPDF to satisfy it dependence.
    3. I've debugged the app, specifically i've set a breakpoint at: instructure-android/pandautils/src/main/java/com/instructure/pandautils/views/CanvasWebView.java line 396 or somewhere containg a variable with HTML code to show in the app.
    4. Navigate between screens and wait for breakpoint triggers.

    I have to say I expected most of the app was a webview, but i were wrong. In fact, is the opposite: this is an Android native app, and just allows a few customizations on few screens through uploadable CSS and JS files.