Over a million developers have joined DZone.

HTML5 Mobile Debuggers' Manifesto

· Mobile Zone

Debugging HTML5 web apps on the desktop is amazingly easy. Just fire up Webkit’s dev tools and you’re set. You can inspect the DOM, set breakpoints and step through running code, examine LocalStorage / WebDB. Life is good.

But when you make the leap to mobile devices, things get tricky. Mobile Chrome offers USB Remote Debugging, which makes the Webkit dev tools we know and love accessible on your desktop. But USB Remote Debugging is only available for Android 4 or greater. IOS offers very similar USB remote debugging tools, but again, only for the newest version of the OS.

The best debugging option differs depending on the mobile platform (iOS vs Android), platform version, browser, hardware (emulator/simulator vs physical device) and whether the application is a “raw” HTML5 webapp or is running in Phonegap as a native app.

In developing Ashley Madison’s upcoming New Mobile Experience, we regularly found ourselves fighting with the debugging tools, so we made a chart to document our recommended debugger option. We use it to remind us what tool to use. We’ll introduce the tools and walk you through some basic rules. When you need to debug your HTML5 Mobile App just consult the chart to find the best tool.


The Tools

Chrome USB Remote Debugging

Hook up a cable, run some ADB commands, hit a url from your desktop browser. Gold. Unfortunately, this doesn’t work for phonegap applications as the “legacy” Android browser is responsible for rendering phonegap apps.

Mobile Safari Web Inspector

Just like Chrome’s remote debugging, but for IOS. Unlike the Android solution, this works for Phonegap too!


“Web Inspector Remote”. Run an app on your desktop. Add some javascript to your app. Debug tools pop up on your desktop. Unfortunately, there is no javascript debugger.


Launch a website or phonegap app on the IOS Simulator, then use this app to attach to the simulator and bring up full debug tools. Works well, but as it cannot run on an actual iOS device it doesn’t work for every case.

ADB Logcat / Console.app

Console.log output generally shows up in Weinre/Chrome/iWebInspector, but often important messages go straight into the system logs. On Android this is accessible via the “adb logcat” command. With your android device connected via usb, on your desktop run “adb logcat browser:V ‘*:S’”. This pipes the logs from the mobile browser to your desktop machine and supresses all non browser log entries. For iOS, it seems the best way to get at these logs is to launch your phonegap app from within XCode.

Some Basic Rules

  1. As much as possible, always develop, test and debug on the desktop
    Get as far as you can without leaving the desktop, using tools to approximate the mobile experience. We use Chrome Canary with the (Beta) Ripple extension and the developer toolbar docked to the right. Ripple emulates a mobile device well enough to use phonegap, but there are limits. For instance, testing APN or C2MD native push notifications really needs to be on the native device. Nor can you test animations and app performance using the desktop. In contrast to the actual device, everything is fast on the desktop.
  2. Never leave Weinre running when using one of the other debugging options. If your application connects to Weinre, things will go awry.
  3. Whenever possible use the preferred platform (bolded in our handy chart), and only jump to a platform with more limited debugging options as a last resort. In most cases, that means using IOS 6 Web Inspector for Phonegap applications and/or USB Remote Debugging on Android “Device” Chrome for web applications.
  4. Don’t blindly trust the tools. Weinre sometimes introduces bugs of it’s own and will sometimes misreport HTTP headers. Always confirm the existence of a bug without the debug tools active.
  5. The Android emulator is awful. Even on the fastest hardware, it’s unusably slow. Just don’t use it. If you don’t have an Android device, you can’t develop for Android. Sorry.
  6. Always have both the log viewer (adb logcat or console.app) running as well as the debug tool.

The Chart

Mobile WebAndroid4.0+PhysicalChrome Remote DebugADB Logcat
Mobile WebAndroid< 4PhysicalWeinreADB Logcat
Mobile WebAndroidAnyEmulatorDo not useDo not use
Mobile WebIOS<= 5SimulatoriWebInspectorConsole.app
Mobile WebIOS<= 5PhysicalWeinreConsole.app
Mobile WebIOS>= 6PhysicalRemote Web InspectorConsole.app
Mobile WebIOS>= 6SimulatorRemote Web InspectorConsole.app
PhonegapAndroidAnyEmulatorDo not useDo not use
PhonegapAndroidAnyPhysicalWeinreADB Logcat
PhonegapIOS<= 5SimulatoriWebInspectorLaunch within XCode
PhonegapIOS<= 5DeviceWeinreLaunch within XCode
PhonegapIOS>= 6SimulatorRemote Web InspectorLaunch within XCode
PhonegapIOS>= 6DeviceRemote Web InspectorLaunch within XCode

Published at DZone with permission of Luke Galea, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}