I love love love how convenient Google has made it troubleshoot responsive web sites on Android. Google has posted very detailed instructions on remote debugging on their developers portal but I wanted a more brief summary to use for reference purposes which is what this post is all about. I use a mac but this should work on Windows too.
On the phone, you’ll need to:
- Enable developer settings: go to Settings > About phone and tap ‘Build number’ seven times.
- Enable USB debugging: go to Settings > Developer options > Debugging and check ‘USB debugging’.
- Enable Web debugging: open Chrome and go to Settings > Developer Tools > and check ‘Enable USB Web debugging’.
Plug the phone into the computer using a USB cable.
Open up the terminal and issue the following commands:
- adb devices
- adb forward tcp:9222 localabstract:chrome_devtools_remote
You should see the following output. The first command is not really necessary but I like seeing that the computer recognizes the device is attached.
1 2 3 4 5 6 7
Finally, open http://localhost:9222 on your desktop computer. You should see a list of ‘Inspectable pages’ which are tabs you have open in Chrome on your phone. Click on one of them to start troubleshooting.
Additional Tips and Tricks
Chrome to Mobile
Google has created an extension called Chome to Mobile that allows you to send the URL of a web page you have open on your desktop to your mobile device. It’s very handy to avoid having to manually enter the URLs. It allows you to choose which device you want to send to and also has an option for offline viewing.
Google has put out a free online class called Discover Devtools through Code School to teach you how to use devtools. I highly recommend it. I’m about half way through and I’ve learned a ton even though I use devtools pretty much on a daily basis.
Hope this was helpful for someone. And if you’re reading this and have a recommendation for doing similar troubleshooting on Windows 8 phones, I’d love to hear from you.
Thanks for reading.