31 May, 2012

Debugging javascript application on mobile devices

I have been stuck with javascript application development in last few weeks. Even though Javascript isn't my the most favorite language, it's interesting experience that brings new challenges.

We are developing a web application that should work on personal computers and mobile devices (iPhone, iPad, Android phones and tablets, ...). The core of our application is the same for both platforms, but UI is little different. We'd like to give users the best possible experience and in the case of our application it means working with touch events a lot. 

Using touch events isn't difficult, but debugging application with these events can be really painful.

Opera Dragonfly is your friend

Without proper tooling it would be almost impossible do debug this kind of user input intensive application on mobile devices. Thanks to guys from Opera you can have such tools for free.

Every desktop Opera browser contains Opera Dragonfly - an extension that allows developers to inspect DOM of the page, monitor network traffic, monitor resources used by the page and debug Javascript. It isn't anything special - almost all browsers have some kind of developer console, but Opera has another ace in it's sleeves - remote debugging and Opera mobile emulator. Yes, Google Chrome and Firefox mobile offers some kind of remote debugging support, but Opera wins with it's ease of use. Configuration of the remote debugger is really easy and you got all the functions of the Opera Dragonfly - even breakpoints in javascript code.

 Step by step instructions


  • Run Opera mobile emulator, choose a device and launch it

  • Configure Dragonfly to accept remote connection by clicking icon in the toolbar

  • Configure Opera Mobile to connect to Dragonfly by visiting page "opera:debug", entering correct connection settings (if you are running Dragonfly and Emulator on the same computer, IP address is 127.0.0.1  or localhost) and clicking connect.
  • Navigate to the page you want to debug
That's it. Now you have Opera Mobile Emulator talking to the Dragonfly and vice-versa. You can set breakpoints in javascript files, inspect DOM elements by selecting them directly in the DOM emulator, monitor network traffic and lot of other things :-)



Of course you can use real physical device with Opera Mobile instead Opera Mobile emulator, but I found the emulator more convenient during development. From my experience emulator is better for application development and physical device is better for testing overall user experience.