Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 Mobile Debuggers' Manifesto

DZone's Guide to

HTML5 Mobile Debuggers' Manifesto

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

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

Application Platform Version Device Tool Logs
Mobile Web Android 4.0+ Physical Chrome Remote Debug ADB Logcat
Mobile Web Android < 4 Physical Weinre ADB Logcat
Mobile Web Android Any Emulator Do not use Do not use
Mobile Web IOS <= 5 Simulator iWebInspector Console.app
Mobile Web IOS <= 5 Physical Weinre Console.app
Mobile Web IOS >= 6 Physical Remote Web Inspector Console.app
Mobile Web IOS >= 6 Simulator Remote Web Inspector Console.app
Phonegap Android Any Emulator Do not use Do not use
Phonegap Android Any Physical Weinre ADB Logcat
Phonegap IOS <= 5 Simulator iWebInspector Launch within XCode
Phonegap IOS <= 5 Device Weinre Launch within XCode
Phonegap IOS >= 6 Simulator Remote Web Inspector Launch within XCode
Phonegap IOS >= 6 Device Remote Web Inspector Launch within XCode
 
 
 
 

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

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

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}