Update 2011.05.06: Dragonfly has finally gone 1.0! It has matured a great deal since this post and is an extremely well-featured tool. You can now access it using Right Click → Inspect Element.


It has become more or less expected that browsers will release developer tools. Firefox really pushed this concept with its developer toolbar and, of course, Firebug.

Opera has been hinting at the release of developer tools for a while; and when dragonfly.opera.com went live, speculation was that we knew what they were going to be called. Well the release date is finally here and yes, Opera has released an alpha of their developer tools - Opera Dragonfly.

Opera Dragonfly

The name was chosen because "dragonflies are highly evolved predators". That is, dragonflies are fast as hell and eat bugs for breakfast :) The name also makes a nice nod to Firebug, which is an undeniable source of inspiration.

features

So what's in the first release? From Opera's official email:

The alpha release includes the initial implementation for the JavaScript Debugger, CSS Inspector, DOM Inspector, Command Line and the Error Console, as well as the Scope module, which allows Opera Dragonfly to communicate with the Opera browser. This will be followed with a second alpha in the coming weeks, which will add inline editing support, improved remote debugging, improved threading in the JavaScript Debugger and infrastructure for localisation. You can read about the current features at <http://www.opera.com/dragonfly/>

One of the key reasons for the alpha release is to collect feedback from developers, to gauge how Opera Dragonfly covers their needs. We will use this feedback to improve Opera Dragonfly as it moves into beta and then full release. Feedback can be given at <http://www.opera.com/products/dragonfly/feedback/>

The Opera Dragonfly team will be maintaining a blog at <http://my.opera.com/dragonfly/blog/> where you can follow the progress of the application.

A really significant feature will be the ability to debug content for devices on your computer - yes, debug mobiles with a real keyboard. That's a pretty cool feature.

reactions

So far common reactions are that people are really looking forward to the inline CSS editing/CSS inspector; and some users report that it's running quite slowly for them. It is an alpha release though, so it's not time to panic about the speed issue.

The first release runs as a separate window from the main browser; which is absolutely brilliant on a dual-monitor machine (like my work machine). However it's not quite so awesome on a single monitor or widescreen; but the single-window mode will take care of that.

Basically, every feature request I've seen so far has been for stuff already listed in the "coming soon" paragraph on the Dragonfly homepage. That's great news, really - the features are clearly well matched to the target audience.

Frankly I'm mostly excited that other developers will now be able to debug in Opera the way they do in Firefox. The lack of a Javascript console and CSS debugger has been a consistent complaint... :) Opera really isn't hard to build for, but the lack of a debugger did make it uncessarily difficult to bugfix existing sites.

notes on trying dragonfly

As it's not been 100% clear - Dragonfly is included in Opera 9.5 Beta 2 release. It's not like Firefox, where you go and find an extension; it's just included in the package. The required code is downloaded when you first run it; and updated automatically after that.

I do recommend you install the beta separately from the currently release; and later when Opera 9.5's official release arrives, you should uninstall the beta and upgrade the stable release. To put it another way, don't install stable releases over the top of beta releases, or vice versa.

Also, when you fire up Dragonfly, note that you need to click on the script you want to inspect; or click into the DOM tab for the CSS inspector. Check out Chris Mills' Introduction to Dragonfly for a full run-through.

No matter how you slice it, Dragonfly is a sweet new tool for web developers; and as more features get rolled in, it's just going to get better.