Over a million developers have joined DZone.

Debug Webpages on Chrome for Android Using Computer

· Java Zone

Navigate the Maze of the End-User Experience and pick up this APM Essential guide, brought to you in partnership with CA Technologies

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 -

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

Thrive in the application economy with an APM model that is strategic. Be E.P.I.C. with CA APM.  Brought to you in partnership with CA Technologies.

Topics:

Published at DZone with permission of Sachin Khosla, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}