How to debug JavaScript (or CSS) on Android

Last week, we looked at a contrived JavaScript issue on iOS to demonstrate how to debug it. Today, we’re going to take a similar look at Android.

Please note, this technique will only work with Android 4.2 or above. Please see Additional Resources at the bottom for other versions of Android.

1. Install the ADB Extension in Chrome

The ADB Extensions is what lets us connect to an Android device and use Chrome’s DeveloperTools to inspect the DOM, JavaScript and CSS like we did with iOS.

Simply open the ADB Extension at the Chrome Web Store in Chrome and click the “Add to Chrome” button.

Install the ADB extension from the Chrome Web Store.

2. Enable USB Debugging in Android

In Android 4.2, the Developer tools are not enabled by default and in fact USB Debugging will not work without the Developer tools. This can be confusing because the Developer Tools menu in Chrome on the device can make it seem like USB Web Debugging should be ready to go.

Enabling USB Web debugging without the Developer tools enabled won't work. — Enabling USB Web debugging without the Developer tools enabled won’t work.

Before you can use the USB Web debugging, you must enable the Developer tools. This can be achieved by navigating to Settings -> About Tablet and then tapping on “Build number” 7 times. (Yes, 7 times)

Go to About Tablet in the Settings App — Navigate to “About tablet” in the Settings App

Tap "Build Number" 7 times. — Tap “Build Number” 7 times.

After you tap a few times, Android gives you feedback on how close you are.

Now that you’ve enabled the Developer options, you must enable USB debugging in Settings -> Developer Options

Tap Developer options to enable USB debugging

Before USB debugging is enabled — Tap to enable USB debugging

Accept the warning about enabling USB debugging

Now that you’ve enabled USB debugging for the device, you need to Enable USB Web debugging for Chrome via Settings -> Developer tools -> Enable USB Web debugging.

3. Connect, Authorize, and Debug

Now, connect your device to your computer via USB and Start ADB

You will need to allow the USB debugging on your Android device.

chrome-allow-usb-debugging — Allow USB debugging on the device. Check the “Always allow” checkbox to avoid this message in the future.

Now, Click on View Inspection Targets, select the tab on your device to inspect, and use Chrome’s dev tools as you would in your desktop browser.

Click View Inspection Targets to select a tab on your Android device to debug.

chrome-inspect-target — Click “inspect” on the tab to debug

Debug your web page on Android with Chrome's developer tools. — Debug your web page on Android with Chrome’s developer tools.

Additional Resources

Remote Debugging on Android – Google Developers page with a deeper look and details about debugging other versions of Android.