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.
