Thankfully, every mainstream browser provides a set of development tools. You may use Firebug in Firefox, IE’s Developer Tools, the webkit inspector or Opera’s Dragonfly. However, you may be unaware that Dragonfly is a beta product. Like many developers, I used it now and again but found few compelling features to drag me away from Firebug. Until today.
May 5, 2011 marks the release of version 1.0 … and I’ve been converted! Dragonfly is amazing. You’ll be familiar with most of the features, but Dragonfly offers more tools, feels slicker and looks better than its competitors.
The most fundamental change is the interface. The beta versions were a little ugly and disorientating but, with v1.0, Opera has produced a beautiful development tool. It looks as good as the webkit inspector but is much clearer and not as cluttered.
Dragonfly’s DOM Inspector is excellent. HTML element nodes, text and CSS properties can be examined or changed with ease. You can even debug and edit SVG graphics on the fly. Properties can also be filtered by text string — a useful facility which is yet to appear in other tools.
Network and Resources provide a view of all file downloads with the request and response times. Files can be opened in their own tab for further inspection.
The Storage tab allows you to view, modify and delete data in cookies, HTML5 local storage, HTML5 session storage and widgets. Firebug does not yet offer this facility and, although the webkit inspector is a little prettier, Dragonfly’s implementation is easier to use and provides better editing options.
The last tab is “Utilities” which features a screenshot-grabber, zoom, color-picker and palette tool. It’s great for designers and unique to Dragonfly.
Finally, if that’s not enough for you, Dragonfly provides remote debugging for mobile phones, tablets, televisions and any other device with Opera Mobile.
So you’re probably asking how you can install this amazing tool? Dragonfly is a cached HTML5 application which is downloaded or updated when you use it. You’ll require the Opera browser from opera.com and, once it’s installed, select Tools > Advanced > Dragonfly from the menu or press Ctrl+Shift+I. Alternatively, create a shortcut icon:
- Right-click the tool or status bar and select Customize, followed by Appearance.
- Select the Buttons tab, then choose “Browser View”.
- Drag the “Opera Dragonfly” icon to a toolbar.
Opera has created a stunning browser development tool which is as good — if not better — than all its competitors. Speed and stability is excellent and, although I encountered a small number of minor issues in the final beta, you can expect problems to be rectified quickly.
If you tried Dragonfly before but didn’t rate it, I urge you to take another look. I spent several happy hours grinning from ear to ear playing with the new development toys.
For more information and tutorials, refer to opera.com/dragonfly
Please let us have your opinions of Dragonfly v1.0…
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.
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers
Your First Year in Code