As 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.
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.
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.
Step 4: Having done that, open Chrome on your Android phone, open Settings—>Developer tools and check on the option Enable USB Web debugging.
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.
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.
Categories: How to
Source: thpttranhungdao.edu.vn/en/
