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” (http://www.opera.com/dragonfly/). 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 at http://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:
- If you have not already installed the Opera browser, download a copy from the Opera website and install it onto your system.
- 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 theApplication/VodafoneAppsManagerdirectory 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. - 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 and close the Settings dialog.
Screenshot 1: Opera Dragonfly - Settings - 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 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 The Vodafone Apps Manager and Opera Dragonfly are now connected. You may have noticed that the icon in the bottom left corner of Dragonfly changed from red to green, indicating that a connection has been established (see screenshot 2). The Vodafone Apps Manager also indicates that it is connected by displaying a green circle at the top of the phone’s display.
To actually start debugging your widget, click the right softkey to get back to the main screen of the Vodafone Apps Manager (if you are still on the connection setup dialog). Then open the widget you want to debug. In Opera Dragonfly select the widget from the dropdown menu at the top (see screenshot 3). After that you may debug your widget just like you would debug any other website.
Screenshot 3: Opera Dragonfly - Select Widget