Over a million developers have joined DZone.

Debug Webpages on Chrome for Android Using Computer

· Java Zone

Discover how AppDynamics steps in to upgrade your performance game and prevent your enterprise from these top 10 Java performance problems, brought to you in partnership with AppDynamics.

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

The Java Zone is brought to you in partnership with AppDynamics. AppDynamics helps you gain the fundamentals behind application performance, and implement best practices so you can proactively analyze and act on performance problems as they arise, and more specifically with your Java applications. Start a Free Trial.

Topics:

Published at DZone with permission of Sachin Khosla , DZone MVB .

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}