Opera’s Dragonfly Developer Console Takes Off

Share this article

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:

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form