HTML5 Zone is brought to you in partnership with:

Luke and the other bloggers on the Avid Life Media blog develop at Avid Life Media Inc. - a leading social entertainment company that operates some of the most vibrant dating brands and communities on the Internet. Luke is a DZone MVB and is not an employee of DZone and has posted 7 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5 Mobile Debuggers' Manifesto

10.11.2012
| 4309 views |
  • submit to reddit

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!

Weinre

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

iWebInspector

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

ApplicationPlatformVersionDeviceToolLogs
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, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)