How to Debug Web Pages on Chrome for Android on Computer
As an administrator of a blog, I debug my personal website using Chrome to preview theme and CSS changes before permanently implementing them on the server. Not long ago, my site didn’t attract many smartphone visitors. However, today, a significant percentage of visitors use smartphones and tablets, making it necessary to improve the site’s appearance and presentation on these devices.
Debugging a computer page is easy – simply right-click and select the option from Chrome’s menu. However, debugging mobile web pages is different. In this article, I will show you how to 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. The installer will prompt you to download Java if it is not already installed.
When you first run Android SDK on your computer, you will be asked to download various APIs and tools. If you only need to debug pages, deselect everything except Android SDK Platform-tools and click Install Package.
After installing Android platform tools, open the Run Box and run %userprofile%\AppData\Local\Android\android-sdk\platform-tools to open the Android platform tools directory.
Step 3: Hold Ctrl+Shift and right-click in the folder to open command prompt. You can also open Command prompt using Run box and navigate manually to the folder. Step 4: After that, open Chrome on your Android phone, go to Settings—>Developer tools, and enable USB Web debugging option.
Step 5: Run the command “adb forward tcp:9222 localabstract:chrome_devtools_remote” on the command prompt and open Chrome browser on Windows.
Step 6: Open the page you want to debug on your Android Chrome browser and enter the URL “localhost:9222” on your computer’s Chrome browser.
That’s it! You can see all open pages on your Android browser as thumbnails on your computer. To open the debug page, click on the corresponding website thumbnail. You can track debugging changes you make on your computer in real-time on Android.
Conclusion
I am confident this trick will assist web developers in optimizing their web pages for smartphones. I have used this trick to configure my web pages, and it worked wonderfully. If you have a better method to debug smartphone web pages on a computer, please share it with us.
As Fred Humiston, the author behind Twothirds.us, I focus on providing practical and easy-to-follow guides and solutions for a variety of technical issues that people commonly face.
My articles cover a wide range of topics, from troubleshooting out-of-sync audio on TikTok and managing Firestick devices, to understanding the impact of Capcut on video quality and resolving sound issues on Hisense Roku TVs.
I also delve into more general tech tips, like how to block numbers on landlines or use VPNs without Wi-Fi. My goal is to make technology more accessible and less intimidating for everyone, whether you’re a tech novice or a seasoned user. I strive to offer clear, concise, and helpful advice to make your digital experience smoother and more enjoyable.