Tag Archives: weinre

Developing & debugging an HTML5 (phonegap) app – part 2 DEBUGGING

Over the past week, I spent my mornings developing an HTML5 mobile app. The main idea behind the project was that I wanted to learn a couple of new tools and technologies out there, as well as figure out how far you could push HTML5 apps in general (“are they close to native at all, or can you possibly get them there?” kind of thing). I set out to use the following new tools to develop the app:

Following is a summary of the things that surprised me most, hopefully providing some people with a shortcut to the right tools and techniques that I had to look pretty hard for 🙂

This post is made up of 2 parts, make sure to check them both out if you think they could be helpful! 🙂

  1. DEVELOPING
  2. DEBUGGING – this one

Debugging…

My main pain whilst starting the development of my HTML5 app was debugging and more importantly figuring out: how to debug the app once it was packaged as a PhoneGap app?…

I searched google for many tools and came up with results such as

but none of them could show me my JS console events such as errors, warnings, etc. (WEINRE came closest, but it could only EXECUTE statements in the console, not read events). UNTIL!

Chrome developer tools

This seems pretty obvious now, but no blog or other site I was reading mentioned it: Chrome inspector can debug your HTML5 Android apps like it can debug any normal website! The rule is: as long as it contains a webview, you can debug it using chrome! You can launch this through your usual Chrome Developer Tools menu: Tools > Inspect devices

chrome inspect devices screenshot

screenshot & more info from this site: http://www.letzwrite.com/how-to/remote-debug-mobile-website-android-chrome-firefox/

And if you have your phone connected to your PC (with USB debugging enabled) + a phonegap app running on it, you should see something like this:

inspect devices chrome

Those tools have definitely been a lifesaver and as soon as I got to see the console, it took me about 2 minutes to identify the problem my phonegap app was having (which was related to a different way of resolving urls than what the chrome browser does).

SauceLabs emulators

As I used the Cloud9 IDE, sauce labs emulators came fully integrated and enabled me to test my code straight on live ios / android devices. This was also pretty neat and definitely helped me out a LOT 🙂