Being involved in the Vodafone Widget Team over the last couple of weeks, I realized that testing and debugging widgets on a mobile phone can be very time consuming. After you developped a widget and ran several tests (probably using the Opera Widget Emulator), you deploy your widget onto your mobile phone, just to find out that several things are not working like you thought they would (and even how they did within the Opera Widget Emulator).

So in order to find out what is going on, you need to modify your code, deploy the widget onto your phone again and check if everything is working now. If that is not the case, you have to start over again.

But thanks to Opera Dragonfly and a special build of the Vodafone Apps Manager, debugging got a lot easier.

Opera Dragonfly

Opera Dragonfly “is a cross device, cross platform debugging environment for the Opera browser”¹. It is currently available as alpha 3 and is shipped with the Opera browser. Just select Tools from the menu bar, then select Advanced and then Developer Tools to start Dragonfly. Using Opera Dragonfly will help you to “debug JavaScript, inspect and edit CSS and the DOM, and view any errors on your mobile or computer”².

Vodafone Apps Manager

With the current release of the Vodafone Widget SDK comes a special build of the Vodafone Apps Manager, which is the runtime environment for mobile widgets. This build is targeted at developers and features remote debugging. You can download the Vodafone Widget SDK athttp://www.betavine.net/bvportal/web/guest/widgetzone/research.

Setting up Remote Debugging

Setting up remote debugging is rather easy and can be done following these four steps:

1. If you have not already installed the Opera browser, download a copy from http://www.opera.com/browser/ and install it onto your system.
2. If you have not already installed the developer build of the Vodafone Apps Manager on your mobile phone, download the Widget SDK, extract it to any directory on your system and transfer VodafoneAppsManager_Dev_1.0.sis (which you will find in the Application/VodafoneAppsManager directory within the Widget SDK) via Bluetooth or a data cable to your phone. Opening the received file on your phone should start the installation process.
3. Open the Opera browser, go to Tools -> Advanced -> Developer Tools in the menu bar. This will open Opera Dragonfly. At the bottom right corner, click on the Settings symbol. Activate remote debugging by checking the box in the Remote Debug section and selecting a port on which the remote debugger will listen for incoming connections (see screenshot 1). Click Apply and close the Settings dialog.
   

   Screenshot 1: Opera Dragonfly - Settings

4. Open the Vodafone Apps Manager on your mobile device. Press the left softkey to open the options dialog. Choose Start Dragonfly from the menu. Now enter the IP address of the machine on which the Opera browser is running into the first input field. Then enter the port number which you choose in step 3 into the second input field. Click the Connect button. If everything is set up correctly, you will be asked to confirm the connection. Press the left softkey to confirm the connection.

Screenshot 2: Connection Successful

Screenshot 3: Opera Dragonfly - Select Widget

Further Resources

• Vodafone/Betavine Widget Zone: http://www.betavine.net/bvportal/web/guest/widgetzone
• Opera Widget Developer Zone: http://dev.opera.com/articles/widgets/
• Opera Widget Developer Zone: Remote Debugging with Opera Dragonfly:http://dev.opera.com/articles/view/remote-debugging-with-opera-dragonfly/
• Opera Dragonfly: http://www.opera.com/dragonfly/

1. http://www.opera.com/dragonfly/ [↩]
2. http://www.opera.com/dragonfly/ [↩]

Author: Stefan

Hi, I'm Stefan. I'm a software developer at Deutsche Telekom, where I spent most of my time working on all kind of (mobile) web projects. Occasionally, I go to conferences/barcamps/etc. and talk about nerd stuff.