Remote Debugging Mobile Web Apps

Remote debugging is the process of viewing & editing the code behind a website on your own computer, but from a separate device. As mobile devices and mobile browsing continues to see exponential growth, it's becoming increasingly important to test and debug your web apps via remote debugging, since there's no way to inspect a webpage's resources on a physical mobile device. Here are a few techniques I use for testing & debugging web apps on mobile devices today.

Remote Debugging for iOS

If you need to test & debug on a physical iOS device like an iPhone or an iPad, the setup process is pretty simple. All you need is an iOS device, a USB cable, and Safari 6 for Desktop (which is Mac OSX only, sorry PC users). On your iOS device, enable the Web Inspector from Settings > Safari > Advanced and then connect your device to your computer.

Once your device is connected, navigate to your mobile web app in mobile Safari. In Safari 6 for Desktop, go to Develop -> "Device Name" -> "Website URL". If the Develop menu is not present, you may need to enable it in Preferences > Advanced. After clicking the website url on your device under the Develop menu, the web inspector will pop-up, which sort of resembles the Xcode IDE interface. From here, you can debug your mobile website just as you would on desktop.

Debugging on the iOS simulator is the same process, just launch the iOS simulator and then open Safari 6 and follow the same procedure above. I like to do all of my early development for mobile using the iOS simulator technique, and then final QA on a physical device to make up for any discrepancies.

Remote Debugging for Android

Android can be a bit trickier when it comes to remote debugging. I've found the best technique is to use Chrome for Android, which allows remote debugging via USB using Chrome's Developer Tools. For starters, you'll need to have the Android SDK on your computer; this allows communication with your Android device via the Android Debug Bridge, a command line tool that comes with the Android SDK. You'll also need to enable USB debugging on your Android device. For Android 3.2 or older, you can find the option under Settings > Application > Development. On Android 4.0 & above, the option is available under Settings > Developer options. If you have the latest version of Android (4.2) running on your device, the Developer options may be hidden by default so you'll need perform some Konami code-like actions to unlock it (go to Settings > About Phone and tap "Build Number" seven times).

The next couple of steps require running a few ADB commands in command line, so for convenience it's recommended that you add Platform Tools (<sdk>/platform-tools/) to your PATH environment variable. If you're not sure how to do this, just google "edit path environment variable"; tutorials for this kind of stuff are plentiful online. After you've added Platform Tools to your environment, run the following in command-line:

adb forward tcp:9222 localabstract:chrome_devtools_remote

...and then just open Chrome on your desktop and type http://localhost:9222 in the search bar. Chrome will display a screen very similar to the Most Visited section in the default new tab layout, except the links & images will be pointing to all of the tabs currently open on your mobile device.

From here, just click the page you need to debug and start exterminating :)

From personal experience, I find that remote debugging web apps using the Android emulator to be a royal PITA, so I'd recommend using a physical device for your Android debugging needs. If you absolutely feel the need to go the emulator route, or you don't have access to a physical device (and have plenty of time on your hands) here's a good place to start. Ganbatte!