How to Debug Web Pages on Chrome for Android on Computer

How to Debug Web Pages on Chrome for Android on Computer

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.

How to Debug Web Pages on Chrome for Android on Computer

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.

How to Debug Web Pages on Chrome for Android on Computer

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.

How to Debug Web Pages on Chrome for Android on Computer

Step 5: Run the command “adb forward tcp:9222 localabstract:chrome_devtools_remote” on the command prompt and open Chrome browser on Windows.

See also  Enable Face Recognition Login in Windows With KeyLemon

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.

How to Debug Web Pages on Chrome for Android on Computer

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.

Leave a Comment