Opera’s Dragonfly Developer Console Takes Off

By Craig Buckler | February 28, 2010 | Web Tech

Dragonfly is Opera’s answer to Firebug. I’m sure browser vendors are sick of the comparisons, but Firebug was the first high-usage developer console and, in my opinion, it’s still the best.

That said, Dragonfly is very good. It offers a familiar set of features such as:

step-by-step JavaScript debugging
DOM inspection, editing and change monitoring
CSS and layout inspectors
file download analysis showing all HTTP requests and responses

In addition, it works on some versions of Opera Mobile which could be useful for phone developers. Finally, the widget is instantly updated whenever a new version is released; you won’t need to agree to a download, update or restart the browser.

If you’re viewing this page using Opera, you can try Dragonfly by choosing Tools > Advanced > Developer Tools. You can also install a debug menu for a little more convenience.

Opera Dragonfly screenshot

Opera has now released Dragonfly as their first open source project. The code is based on JavaScript, CSS and a little XML; most knowledgeable web developers should be able to dive straight in.

The source is hosted as a Mercurial repository on BitBucket, but you can also browse the code online or read the Wiki documentation.

Dragonfly is a great tool and is likely to improve now more people are eying the code.

Do you use Dragonfly? What are your favorite features? Do you prefer it to Firebug, webkit’s inspector, or IE’s developer tools?

Written By:

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

Website
>> More Posts By Craig Buckler

Tagged as: dragonfly, firebug, opera

{ 9 comments }

Web-Development March 3, 2010 at 8:32 am: the problem with coming late to the market (as all the other browser developer tools are in comparison to firebug), is that you need to be MUCH better than the competition to gain proper market share. Unfortunately firebug is too good for anything to be ‘much’ better.
mathieuf March 3, 2010 at 7:12 am: Dragonfly was the first developer console I used, and I still like it. However, in my job, Opera is not a supported browser so I use both IE Developer and Firebug. I find I switch back and forth, as each gives slightly different information. Firebug is organized more logically, such as putting the current styles at the top of the display. IE has a nice ruler to use when checking out sizes. For supporting both IE and Firefox, I find both developer consoles are necessary to help reveal the browser differences.
JadedD March 3, 2010 at 2:36 am: Don’t forget about Firebug’s bookmarklet for IE.
Robbo89 March 2, 2010 at 9:52 pm: Just updated to 10.5 and dragonfly has won me over so far. Inspect element option was the main thing I had a problem with but now that it has that and the debug menu from this post it seems very powerful and does some nice things. Most things firebug or other extensions can do but this just seems to do them much better or nicer.
Also 10.5 interface is looking very polished… a nice update.
I still don’t know why so many people don’t bother with opera (well other then having a ridiculous name).
Томица March 1, 2010 at 7:05 pm: @aweb4u:
It’s because you installed O10.50 :)
AutisticCuckoo March 1, 2010 at 4:35 pm: I find Firebug too clunky. If I’m reading a page in Firefox I’ll still copy the URL and paste it into Opera if I want to inspect it. Firebug is extremely slow and very unintuitive.
Tyssen March 1, 2010 at 1:48 pm: Well actually it seems like the context menu is there now. Not sure whether it’s because I added the debug menu or because I upgraded to 10.50RC today.
aweb4u March 1, 2010 at 8:44 am: I use Dragonfly all the time, it’s incredibly handy and saves me so much time. I very rarely fire up Firefox any more as Opera has everything I need built-in, no more problems with Firefox add-ins not working with newer versions of the browser.
Tyssen March 1, 2010 at 7:26 am: I find Dragonfly too clunky. If I’m reading a page in Opera I’ll still copy the URL and paste it into Firefox if I want to inspect it. There’s no context menu option to inspect an element and when you’re inspecting an element, you can’t easily turn properties on and off.