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.

1. On the desktop machine, make sure you have the Google Chrome web browser and the Android SDK installed.

2. 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’.

3. Plug the phone into the computer using a USB cable.

4. 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

tiburon:~ jonahlyn$ adb devices
* daemon not running. starting it now on port 5037 *
* daemon started successfully *
List of devices attached 
01aa65b78ed71910    device
tiburon:~ jonahlyn$ adb forward tcp:9222 localabstract:chrome_devtools_remote
tiburon:~ jonahlyn$

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.

Discover Devtools

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.

This is just a list of links to archives of email newsletters that I’m subscribed to but probably don’t stop to read as often as I should.

• Incoming Transmission
• HTML5 Weekly
• CSS Weekly
• JavaScript Weekly
• Web Design Weekly
• Responsive Design Weekly

Also, I’m currently updating the site using the Cloud9 IDE. I’m really liking this product. I’ve used it in the past and I knew it supported git and deployment to heroku but I never knew it supported ruby which is useful for this blog which uses Octopress. So hopefully you’re going to be reading this post and I don’t screw everything up.