What’s New in Opera Dragonfly 1.1

Contributing Editor

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://pulse.yahoo.com/_6GG7CEFACSCBVP2LFIJ23KVSYQ Emma Pope

    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you.
    go here, bit.ly/qJFHsO

  • Anonymous

    I love Opera, and their developer tools just keep getting better and better. Why people prefer Chrome over Opera is beyond me.

  • Anonymous

    I am very pleased with Dragonfly 1.1′s improvements. It is very nifty having the full screen console in addition to the overlay. I actually use the full screen console more. A really cool feature that they added is when you are in the console, type “// jquery()” and it will load jQuery on that page.

    If you want to stay on the cutting-edge with dragonfly, paste https://dragonfly.opera.com/app/stp-1/experimental/ in the Opera developer tools URL field.

    One improvement Dragonfly could have is being more portable. It would be great if there was some easy way to download Dragonfly and install it on an offline system.

  • Anonymous

    i cant believe this!! me and my sister just got two i-pads for $42.77 each and a $50 amazon card for $9. the stores want to keep this a secret and they dont tell you.
    go here, www.tinyurl.com/3qa436v