How to Remotely Debug Web Apps on Android

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.

How to Remotely Debug Web Apps on Android

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 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

Developers Tools Android

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.

Inspect with Chrome Development Tool

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

Developer Tools Dashboard

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

Highlighted Element in Chrome Mobile

Highlighted Element in Chrome Mobile Screenshot

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.

Network

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.


Join Our Email Newsletter

Like what you read here in this blog post? Get free blog updates in your Email!

About Virendra Rajput

Virendra Rajput is an avid programmer and hacker. He is a Co-Founder at Markitty. He is a hardcore Python programmer who is passionate about hacking with various APIs. In his spare time, he loves working on side-projects.

Virendra has written 6 awesome articles for us at TechLila.

Comments

  1. says

    I think this is really useful post for all android users. especially in those days, a lot of apps for browsers and make users confuse usually.
    All Fotos is very detail and easy to follow up all the steps.
    Thanks for your sharing.

    Stephan Wu

  2. says

    Very well presented, informative post. I’ve always wondered how to remotely debug web apps but the other blogs which I had read in the past weren’t very straightforward. Thanks for putting it in clear terms for those of us who struggle to follow technological language.

    As said by Stephan, the images are very detailed making the instructions easier to follow.
    James Stevens recently posted – Outdated Java versions blocked by Apple to eliminate vulnerabilityMy Profile

  3. says

    I have been looking for a way to debug my Samsung Galaxy S3. I think I came to the right place because your tutorial has really helped and I have successfully managed to debug my device. Thanks a lot for the help.

 Comment Policy

Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please. You can wrap code in [lang-name][/lang-name] tags.


Tell us what you're thinking...

If you want a picture to show with your comment, then get Gravatar!

CommentLuv badge