What’s New in Opera Dragonfly 1.1

Share this article

Opera 11.51 was released on September 1, 2011. It’s a minor update which fixes a known security issue, improves stability and offers full-screen support in Mac Lion.

Of more interest to web developers is Dragonfly 1.1 — Opera’s Firebug-like console. I gave version 1.0 a glowing review in May, but there were a few minor niggles which caused concern. More than 200 bug fixes and interface updates have been implemented in the latest edition, so let’s look at the highlights…

DOM Inspector

Perhaps the biggest problem with Dragonfly 1.0 was the lack of links and line numbers to styles in CSS files. That problem has been addressed and I suspect many developers will be thankful.

The Inspector now supports pseudo classes and pseudo elements. This includes ::before and ::after which now appear as nodes within the DOM tree. It’s a fantastic facility which is yet to appear in competing tools.

A new button is also provided which allows you to toggle states including :link, :visited, :hover, :active, :focus and ::selection. While a similar function exists in Firebug, few developers know about it and Dragonfly’s implementation is superior.

Finally, there’s an new “Search” tab which allows you to locate elements by text, regular expression, CSS selector and XPath (e.g. (e.g. enter //div to find all div elements in the page). Very useful.

JavaScript Debugger

An improved search facility has also been implemented within the Scripts tab. It’s possible to search using text or regular expressions across a single file or all JavaScript files. You can also include or omit dynamically-injected scripts.

Network and Resource Inspectors

It’s now possible to inspect POST data sent via standard or multi-part forms. A new search field is also provided in the Resource Inspector.

One of the primary criticisms of v1.0 was Ajax monitoring. Dragonfly 1.1 is better and, given my limited test, it correctly reported all background XMLHttpRequest calls. Unfortunately, the returned message body is still shown as an encoded base64 string so it’s impossible to directly inspect JSON data. Opera — please, please address it in the next version!

Storage Inspector

The widget preferences, local and session storage now use the same great interface as cookies. It’s cleaner and easier to use.

Other Updates

Dragonfly 1.1 also offers:

  • an improved Error Log interface
  • a great ruler tool in the utilities — although it’s a shame you can’t use it in the main browser window
  • a new full-screen console — even though I liked the floating overlay version.

Dragonfly 1.1 fixes the majority of issues developers encountered in the first release. A few problems remain, but it’s great Opera are continuing to invest in one of the best developer consoles available today.

If you’re Dragonfly user, the new version should be available in your browser. If you’d like to try it, download and install Opera, then press Ctrl+Shift+I or right-click the page and select “Inspect Element”.

If you’re still not convinced, the Dragonfly team are requesting feedback. Perhaps your most-desired features will appear in v1.2?

Do you use Dragonfly? Is 1.1 an improvement? Have you adopted it as your main development tool? Comments welcome.

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