How to Debug Web Pages on Chrome for Android on Computer

Ashish Mundhra

chromeAs an administrator of a blog, I debug my personal website using Chrome to see how the changes in the theme and CSS would look like before implementing them permanently on the server. I wasn’t long ago when I never paid attention to mobile pages as only few visitors visited my site using a smartphone. But today, a significant percentage of visitors comprise of smartphones and tablets, and hence it has become necessary to take care of looks and presentation there as well.

If it was a page on computer, a one could have easily debugged using the option from Chrome’s right-click context menu but that’s not the option with the pages on mobile. So, today I will show you how you can debug mobile web pages on your computer using Chrome for Android and Android SDK.

Debugging the Web Page

Step 1: Download and install Android SDK on your computer and run it. Installer will ask you to download Java if you don’t have it installed.

For the first time you run Android SDK on your computer, it will ask you to download several APIs and tools. If your sole purpose of installing Android SDK is to debug the pages, uncheck everything except Android SDK Platform-tools and click the Install Package button.

android sdk

Step 2: After installing Android platform tools, open the Run Box (Windows+R) and run %userprofile%\AppData\Local\Android\android-sdk\platform-tools to open the Android platform tools directory.

run command

Step 3: Now hold Ctrl+Shift key and right-click in the folder to open command prompt there. You can also open Command prompt using Run box and navigate to the folder manually.

cmd prompt

Step 4: Having done that, open Chrome on your Android phone, open Settings—>Developer tools and check on the option Enable USB Web debugging.

USB debugging chrome

Step 5: Now on the command prompt run the command adb forward tcp:9222 localabstract:chrome_devtools_remote  and open Chrome browser on Windows on successful execution.

Step 6: Open the page you want to debug on your Android Chrome browser and open the URL localhost:9222 on your computer’s Chrome browser.

selection

That’s all, you will see all the pages that are open on your Android browser as thumbnails on your computer. To open the debug page, simply click on the respective website thumbnail. You will be able to track the debugging changes you make on your computer directly on Android in real-time.

Conclusion

I am sure this trick will help many web developers to optimize their web pages for smartphones. I have used the trick to configure my web pages and it worked out like charm. However, if you know of a better way to debug smartphone web pages on computer, do share it with us.

Also See
#chrome#coding

Join the newsletter

Ashish Mundhra

Written By

Ashish Mundhra

Ashish is a staff writer and video editor at Guiding Tech. He loves all things tech and has a soft corner for Android. Apart from contributing articles here, he also takes care of our YouTube Channel.