Programming

Opera Dragonfly v1.0 — the Best Browser Development Tool?

    Craig Buckler
    Share

    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.

    Opera Dragonflyview full Opera Dragonfly screenshot

    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.

    Opera has always offered great JavaScript debugging facilities. Dragonfly continues this tradition in the Script tab where you can monitor and set watches or breakpoints in any source file. Interestingly, the JavaScript console appears as an overlay so you can still view and navigate information within the main interface. It’s a smart idea and works well.

    Opera Dragonflyview full Opera Dragonfly screenshot

    Similarly, the Errors tab reports a range of problems in HTML, JavaScript, CSS, XML, XSLT, SVG, Opera widgets and more. One of the best features is the filter which removes CSS errors caused by vendor-prefixed properties.

    Opera Dragonflyview full Opera Dragonfly screenshot

    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.

    Opera Dragonflyview full Opera Dragonfly screenshot

    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:

    1. Right-click the tool or status bar and select Customize, followed by Appearance.
    2. Select the Buttons tab, then choose “Browser View”.
    3. 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…