Mobile Zone is brought to you in partnership with:

I am a web developer and founder of Digimantra. I write and speak about latest web technologies and web trends. Sachin is a DZone MVB and is not an employee of DZone and has posted 19 posts at DZone. You can read more from them at their website. View Full User Profile

Debug Webpages on Chrome for Android Using Computer

02.14.2014
| 4969 views |
  • submit to reddit

While developing websites, debugging them for CSS or JavaScript becomes the major part of development. And all the websites that we develop today are responsive in nature. I have seen developers debugging responsive CSS by resizing their browser window, as they like using the powerful debugging tool that bundles with Chrome. However, there are instances when the site rendered on actual device is different than how it loads in a browser.

So there should be a way to directly debug the website on your Android device. Let us see a way to debug webpages on Chrome for Android using computer and with the help of Android SDK.

You will need to Download & Install Android SDK to successfully remote debug the webpage. Check the official Android documentation on how to install Android SDK for different platforms.

Once you have the Android SDK install on your system, it’s time to prepare your android phone to allow debugging via chrome. Simply goto Settings > Developer Options and turn on the USB Debugging.  That’s all you need to do with the phone. Now connect the phone with your computer via USB cable and continue below to start debugging within the Android phone via your Desktop Computer. 

Forwarding the port via ADB

Open the command prompt (for windows) or Terminal (for Mac & Linux). Once you are at the command line, simply browse to the Android SDK install folder. Since I am using Mac and the installation is simply unzipping the folder. However, for Windows machine the standard install path should

%userprofile%AppDataLocalAndroidandroid-sdk

When you are inside the SDK folder, simply browse to “platform-tools” folder. Now write the following command -

?
1adb forward tcp:9222 localabstract:chrome_devtools_remote

Now open the website which you want to debug inside Chrome. On your desktop browser simply navigate to http://localhost:9222 , you should be able to see the list of open windows ready to be debugged.

digimantra 2014 02 12 at 1.54.24 am Debug webpages on Chrome for Android using computer

Click the window which you want to debug and you should be able to see all the HTML tags. Now you can debug the Mobile Website similar to how you debug a normal website.

digimantra 2014 02 12 at 2.00.13 am Debug webpages on Chrome for Android using computer

Hope this helps!

Stay Digified!!
Sachin Khosla

Published at DZone with permission of Sachin Khosla, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)