Remote Debugging Mobile Web Apps
Chrome Developer Tools
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 webpages 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 exact 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 more tricky 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).
Once you’ve got the SDK installed and your device setup for development, connect the device to your computer via USB. On your mobile device, launch Chrome and enable USB debugging under Settings > Advanced > Developer Tools.
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.
Remote Debugging in Chrome (courtesy of Google Developers site)
From here, just click the page you need to debug and start exterminating
There’s also a video from Boris Smus (Google) demonstrating the debugging process for Android using Chrome:
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!
Remote Debugging for Opera
There is one other serious player in the mobile web arena worth mentioning outside of the two above, namely Opera. Opera has ranked around 2nd or 3rd for the last 3 years in terms of mobile browser market share, mainly because of its huge support in developing countries. If you’re developing a mobile web app targeting a global audience, it’s worth investing some time debugging within that environment. There’s a great blog post over at codegeek.net which breaks down the process of setting up your device and computer for remote debugging: http://www.codegeek.net/blog/2012/mobile-debugging-with-opera-dragonfly/