Dragonfly is Opera’s web development debugging tool and was first released with Opera 9.5. Kevin wrote about it briefly in Issue 194. It’s still in development, but it shows a lot of promise. I managed to catch Charles McCathieNevile and Andreas Bovens from Opera at a Melbourne Web Standards Group event and they demonstrated a cool Dragonfly feature: remote debugging.
You can test it out right now. If you install Opera 9.6 you’ll get Dragonfly 0.7 alpha 2. Yes, it’s still alpha software so it’s a little quirky. Since Kevin wrote about it, live CSS editing has been added, but it still lacks DOM editing and HTTP request logging.
Using remote debugging is very easy. For my test run I had Dragonfly running in Mac OS X and the Opera browser client running in a Windows Vista virtual machine. First, on the client you will use as the debugger, you need to enable remote debugging in the Dragonfly settings dialog (click on that tools icon bottom right), this enables the debugging proxy.
Once enabled, you’ll see the following confirmation:
Ahem. Well, I did say it’s still alpha software.
Despite what it says in the confirmation above, on the client you wish to debug (the debuggee if you will), you visit the url opera:debug, which will present the following form:
Enter the IP address of the computer running Dragonfly and click connect. Hopefully you’ll receive the following confirmation:
Once connected you can use Dragonfly just as if you were debugging the page in the same browser instance. If you edit a CSS property, the change is visible, instantly, on the remote client. If you enable the “find element by clicking” feature in the debugger, on the remote client you can move the mouse pointer and see the element highlighter box. Select the element in the client and its HTML is highlighted in the Dragonfly DOM tab.
The JavaScript debugger also works as you would expect it to; add a break point in Dragonfly and reload the page on the remote client; the loading will pause as you step through the code in the debugger. Here’s the Dragonfly JavaScript debugger as I step through some JavaScript running on the remote browser client:
In their presentation, Charles and Andreas offered two usage cases. The first involves mobile devices — debugging CSS and JavaScript on a mobile device is painful due to the the screen size and input restrictions. You can run dragonfly on your workstation and debug your mobile device remotely. Dragonfly is already available in Opera Mobile 9.51 beta 1 for Windows Mobile devices.
The second usage case involves testing different browser versions; either versions on different operating systems or different versions on the same operating system. You can use remote debugging to guard against browser crashes — if the client browser crashes you still have information about the browser’s last state available in the debugger.
Obviously the usage cases are limited at the moment, and only help with debugging in Opera. However Opera has bigger plans; it’s attempting to create an open platform for web development debugging tools.
The glue that binds the debugger to the browser client is Scope. The Scope module acts as the interface between the browser and the debugger; it exposes information about what the browser is currently displaying. Communication between the two is done via a proxy server and uses the Scope protocol; a message format using XML or JSON. Opera is planning to publish the Scope protocol sometime in the near future.
This means anyone will be able to create scope clients for other browsers and create scope-compatible debugging clients; either as browser plugins, stand-alone clients, or built into your favorite IDE. Imagine that; the ability to debug CSS, JavaScript, and the DOM in all browsers from your favorite web development tool.
While limited at the moment Dragonfly and Scope give us a glimpse into the future of web development tools.
Andrew TetlawiOS Developer, sometimes web developer and Technical Editor.
