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%\AppData\Local\Android\android-sdk\
When you are inside the SDK folder, simply browse to “platform-tools” folder. Now write the following command –
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.
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.
Hope this helps!
Stay Digified!!
Sachin Khosla
