How to Remotely Debug Web Apps on Android

The web today is being more browsed on mobile phones, than on desktops. Since the devices have got really portable and screen sizes smaller. So if you are developing a web application, you just cannot avoid support for mobile phones (Android or iOS). Broken or crappy looking sites on mobile screens can really cause damage to your reputation online. The user experience on phones is completely different from the desktop. So developers have to specially design the applications to adapt to the mobile screen.

Google Chrome Dev, provides tools that let you inspect, debug, analyze the on-device experience, and you can use the Chrome Dev tools on your local machine to debug your application on mobile device. In this tutorial we will be learning on how to setup your local development machine to debug remotely on Android. We will debugging over a USB connection between your mobile device and your local development machine.

You will require the following, to move forward with remote debugging:

1. An Android mobile or tablet with Chrome for Android 28 installed (you can install it from here).
2. A USB cable to connect your Android device to your local development machine, also make sure you have the required drives installed to connect your Android mobile to a computer.
3. Check the OEM USB drivers list and find out the suitable drivers for you.
4. Chrome 28+ installed on your local development machine.
5. Make sure you have the ADB Chrome extension installed on your local development machine. You can install it from here.

In this tutorial we will be using a Sony Xperia L (Android device), and Windows 7 on our local development machine. So lets start with remote debugging:

1. First make sure you have the Debug mode enabled on your Android device

If you do not have enabled please refer this:

• For users on Android 4.2 refer to: http://www.thesmarthacks.com/2013/04/enabling-usb-debugging-mode-on-android.html.
• Rest of them can refer to: http://www.groovypost.com/howto/mobile/how-to-enable-usb-debugging-android-phone/.

For more info on setting up Android device for development please refer: http://developer.android.com/tools/device.html#setting-up.

2. Connecting your Android device

Now connect your Android device, to your local development machine with a USB cable. Once you connected your Android device then you need to enable USB web debugging on your phone, by launching Chrome on your Android then, -> Settings -> Developer tools -> Select Enable USB Web Debugging

When selecting this option if it asks you to confirm your connection with the development machine, select OK.

3. Debugging

After installing the ADB extension, you will see a gray Android icon besides the Chrome menu. Now click on the Android icon and select -> Start ADB. Now it should turn green, and will show the number of connected devices currently. Then click on the icon and select -> View Inspection Targets. This should open a new tab and will show the number of connected Android devices and the currently open tabs on them.

Now select the tab from the list that you want to debug. This will open a new Window with the Developer Tools.

Now inspect some element from the page, and the element gets highlighted in the Chrome mobile, in real time.

This way you can fix the device specific bugs, by debugging from the Dev tools. You can execute commands from Dev tools which will be executed in the Chrome mobile. Also view different panels like Network, Resources, Timeline, Profiles, Audits.

Now you can fix mobile specific bugs, and debug mobile apps real time instead of deploying your app on server and then accessing it from your phone and debugging. Google Chrome Dev provides these tools which solves a real pain, for developers building device compatible apps.