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:
- An Android mobile or tablet with Chrome for Android 28 installed (you can install it from here).
- 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.
- Check the OEM USB drivers list and find out the suitable drivers for you.
- Chrome 28+ installed on your local development machine.
- 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.
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.
What people are saying
Nice to know about Chrome Dev. The offer of platform to developers both for browsers and mobile (iOS and Android) is increasing day by day. Thanks for all the detailed photos about the debugging process.
This is really amazing and useful post. From here, we can understand the clear procedures about Remotely Debug Web Apps on Android. Also the pictures explain the procedure about Chrome Dev in a clear and easy way.
Woww! Android rocks!
Didn’t knew if that was even possible
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.
Really this post is very helpful to debug web apps on Android. Haven’t thought of it.
This is a very informative post. Now we can remotely debug web apps on Android.
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.
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.
Woww! I didnt know you can do this with my Android phone.
Really amazing, I never thought that debugging can be done remotely, specifically for android apps …
Thanks, finally I have done debugging remotely, really helpful.