By Craig Buckler

Opera’s Dragonfly Developer Console Takes Off

By Craig Buckler

DragonflyDragonfly 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?

Related links:

  • 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.

  • aweb4u

    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.

  • 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.

  • 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.

  • Томица


    It’s because you installed O10.50 :)

  • 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).

  • JadedD

    Don’t forget about Firebug’s bookmarklet for IE.

  • mathieuf

    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.

  • 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.

Get the latest in Front-end, once a week, for free.