Pimp your Phonegap Android dev stack [2/3]

CordovaAndroid debuggingDebugging Phonegap apps has its own catch; you start out working in webtechnology but the need to check if things look great on your phone a.s.a.p. is always present. And then there is the difference per platform on what tools are available for debugging.
iOS, for one, has built-in remote debugging capabilities that will let you check your browser console and mutate the page DOM and set breakpoints on your JS code. These are important tools that will help you tackle nasty bugs and speed up your development proces

In a series of posts called “Pimp your Phonegap Android dev stack” I share some ins and outs on some tools that make a fast development stack setup for building Phonegap Android apps.


First of all: I am in no way affiliated with the product- and service providers mentioned herein. They didn’t approach me and the tooling mentioned is used by me because I investigated options and they came across as (my personal) winners.


Remote debugging

Once you’ve setup that fast emulator you’ll run into the next bottleneck: debugging your webbased layer. It just isn’t fun having to trial-and-error your way through the bugs that you’re experiencing on your (emulated) Android device. Being able to edit the dom, HTML and debug the JS live while the app runs on the device is worth so much since it will let you break out of the original build-test-error-fix-build-test-ok cycle.

There are two roads to walk here, being:

  • >= Android 4.4 Kitkat development & testing
  • < Android 4.4 KitKat development & testing

>= Android 4.4 Kitkat development & testing


This will be the easiest road to walk. If you’re making a Phonegap app targeted for Android 4.4 KitKat or newer you’ll be in a sweet spot. Google introduced remote debugging for Android views in Android 4.4 KitKat and with a little statement added to an Android app (as documented here) it will enable that feature.

Google DevelopersBut hey! don’t go wandering off and fetching that code just yet:

starting from Cordova 3.3, Chrome Remote Debugging is present and enabled by default.
As issue CB-5487 states: while you build your app without the release flag (and thus building a debug version) the setWebContentsDebuggingEnabled(true) function will be used enabling the app’s Chrome remote debugging feature.

You can use this following a few steps:

  1. Create (or update) a project with version 3.3 or newer
  2. Kick off that (Genymotion?) emulator instance and run your app
  3. Open Chrome and type in the URL bar chrome:inspect
  4. Select the link “inspect” for the appropriate instance

Why?
It will let you edit your dom, html and debug JS and speed up your development cycle by letting you fix bugs in a jiffy, that’s why.

Pros

  • Very easy remote debugging / editing that will make you smile

Cons

  • For apps targeted to Android >= 4.4 Kitkat only
  • Only works with Chrome

< Android 4.4 KitKat development & testing


This scenario will be for the most developers out there, since the Android OS fragmentation kinda forces those devs that want the most reach in the Android community to let their apps work like a charm on older versions (like 2.3.3 and up). Since standard remote debugging for Android apps is only available in Android 4.4 KitKat and above, this means we’ll need another way to make remote debugging happen.

I found a way to remote debug like crazy, and it’s called jsHybugger. This third-party tool runs from 2.3.3 and above and will let you debug via Chrome Remote Debugger OR Eclipse. It uses a plugin that you can add to your  Cordova/Phonegap app.

So to get you remote debugging with this puppy:

  • Install the latest jsHybugger plugin  in your Phonegap / Cordova project using
    [crayon-6605d368bb1db922922742/] or
    [crayon-6605d368bb1f1453400815/]
  • Run your app in your device
  • On wifi? Use your device’s IP with port 8888 in the browser URL bar to debug.
    On usb? Use Chrome with chrome:inspect and select the appropriate instance to debug.

Why?
You COULD use the hosted Weinre remote debugger or run a local Weinre instance but this tool has better features and actually lets you edit the dom and html. Weinre has some quircks and isn’t as complete and stable like this commercial product

Pros

  • Easy setup
  • Remote debugging over Wifi and USB
  • Full dom/html editing and javascript debugging

Cons

  • You’ll need to manually remove the plugin when releasing your app (for security / removing unnecessary features)
  • The plugin causes filetransfer.download issues in Cordova 3.4 so you’ll need to remove it when testing this on a device.
    This issue (CB-6094) seems to be fixed by jsHybugger as stated in the issue comments (Haven’t tested it yet myself)
  • Costs  $49 a year , but this will be earned back by the hours you’ll be faster at debugging your app!