TechHui

Hawaiʻi's Technology and New Media Community

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.

iOS Debug mode

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

Screenshot_2013-01-17-22-26-51

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.

Screenshot_2013-01-17-22-27-26

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.

Highlighted-Desktop2

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!

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 s..., 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-drago...

Happy Coding!

Resources:

- Max Firtman: iPhone 5 and iOS 6 for HTML5 developers, a big step fo...

- Addy Osmani: The Current State of Remote Debugging for Mobile

- Google Developers: Google Chrome Mobile Remote Debugging

- Android Developer: Setting up a device for development

- Codegeek: Mobile debugging with Opera Dragonfly

Views: 177

Tags: android, iOS, mobile, mobile development, mobile web, remote debugging

Comment

You need to be a member of TechHui to add comments!

Join TechHui

Comment by Mike King on January 18, 2013 at 10:32am

Adobe Edge looks pretty sweet; I'll definitely have to try this out. Thanks Chris!

Comment by Chris Ota on January 18, 2013 at 9:02am

Nice write up! Another good tool to try is Adobe Edge (formally shadow). I believe it is only for Chrome desktop browsers http://html.adobe.com/edge/inspect/

Sponsors

web design, web development, localization

© 2014   Created by Daniel Leuck.

Badges  |  Report an Issue  |  Terms of Service