Remote Debugging Web Apps on Android

By Nethru Limited (www.nethru.com)

Starting from Android 4.4, Android introduced a new debugging tool for developers to remotely debug their web apps with Chrome Developer Tools.

In this article, I will give an introduction on how to start using Chrome Developer Tools for debugging. If you are an advanced user already, please visit the official pages for more information. (https://developers.google.com/chrome-developer-tools/)

If you don’t have a device running Android 4.4 or higher, you can debug your JavaScript using the console JavaScript APIs and view the output messages to logcat, but this is not our main focus in this article.

To begin remote debugging, please check if you have fulfill their requirements first:

• An Android phone or tablet with Chrome for Android 32 or later installed from Google Play.
• A USB cable to plug in your device.
• Chrome 32 or later installed on your development machine.

If you can fulfill their requirements, just follow these steps to start.

1. Enable USB debugging in your phone
Go to Settings > Developer options and check the USB debugging option like the image below.

2. Connect directly over USB
Visit DevTools in the Chome installed on your development machine by going to about:inspect. Check Discover USB devices in DevTools like the image below.

Since DevTools supports native USB debugging of the connected devices, so it works on all OS’s including Windows, Mac and Linux etc.

For developers using Windows, you have to install device drivers properly.

3. Connect your device
If the previous setup is correct, a confirm message will be shown on your device whenever you connect your device to your development machine.

Click OK and go back to the DevTools, you can see your device appeared.

4. Debug your Android WebViews
Inside the WebViews of your application for debugging, add the following codes.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if ( 0 != ( getApplcationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE ) ) {
        WebView.setWebContentsDebuggingEnabled(true);
    }
}

And enable the debuggable flag in the application’s manifest.
After that, you can choose the WebView to start debugging in DevTools by clicking the inspect. You can see a Developer Tools window appears.

When you inspect an element inside the Developer Tools window, the respective element will be highlighted on your device.

Conclusion
With the help of Chome DevTools, you can debug your WebViews of your application just like how you debug your web pages during website development.

This article is a summary and quick guide from Chrome DevTools official site. For the full documentation, please visit back the official site.
https://developers.google.com/chrome-developer-tools/