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

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…

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.

  • Chaals

    Easier way to start Dragonfly. Right click something, and select “inspect element”. Ta-da…

    • Tomica

      There’s an even faster way: Ctrl+Shift+i or Mac equivalents :)

  • Sphamandla

    I am yet to try the tool out but from what I have read it seems much better then Firebug (well I hope so).

    • http://www.optimalworks.net/ Craig Buckler

      It depends on your definition of “much”, but Dragonfly is certainly as good as Firebug in most respects and better in others. Use the best tool for the job in hand.

  • stewardtz

    Even not near to Firebug!!!!! Dragonfly sucks!

    • http://www.optimalworks.net/ Craig Buckler

      I don’t agree.

      Firebug currently has superior Ajax/JSON handling and some elements are presented better, but Dragonfly has drastically improved and excels in other areas. I’ll still use Firebug, but I’ll be using Dragonfly far more than I did before.

    • hehe

      stewardtz, wrong sentence at the wrong place… sit down.

  • Goldy

    Yes, but still Opera is not the best developer browser. It has a buggy js compiler, and the css is also not always as it should be. Dragonfly is a good tool, but not better than firebug or even chrome debug bar

    • muppetalert

      Care to define the “buggy js compiler”? I’ve never seen, nor heard of a single issue with Opera’s JS implementation, same with CSS. Only ever praise, since it’s generally wayyyy ahead in terms of support.

      Dragonfly replaced Firebug for me a few months ago, and I’ve never even looked back for a second.

    • Nikola

      Goldy , if you can’t write proper JS/CSS no browser can help you ,
      and FYI , http://en.wikipedia.org/wiki/H%C3%A5kon_Wium_Lie Works at Opera , ergo , no css issues

    • Jordan

      Sounds like either misinformation or old information. Opera does a fantastic job of handling JS and CSS, and even does quite well with buggy and mangled developer code.

      The hardest part about Dragonfly is learning the interface. It’s not difficult to do, but it’s different than what I’m used to: Firebug.

      • http://www.optimalworks.net/ Craig Buckler

        I agree that the interface could be a little confusing in the beta versions, but v1.0 is far better. If you know Firebug, you won’t have too much trouble with Dragonfly.

    • hehe

      Goldy: did you try it? did you see the errors in your code? look again.

  • Armen

    although, i’m not everyday opera user, i like it very much. opera always was very innovative browser and more people, especially developers should give it a try. it’s a pity that browser which exists from early days of web and has excellent standards support is so unpopular.
    hope the new dragonfly will help opera to gain more attention from developers.

  • Ashaihullin

    Would like to see there console tool like in firebug. If it will have it i will use only opera i guess…

    • Robbo

      The opera console is awesome… maybe you missed it? It’s one of the top right buttons… I love it!

      • Ashaihullin

        Sorry, i wasn’t too clear. I mean console with request’s info like in firebug…

    • Farow

      You mean the network tab?

      • Ashaihullin

        In opera NetworkTab i can see too many unnecessary (for me) data, but in firebug ConsoleTab i can see: requests/response(with all data), errors, console.log() data include expandable objects.

        Sorry if it is not clear…

      • anyday

        The network tab in firebug is awesome when it comes to tracking ajax requests. It does not really work that well in Opera, especially the need to reload the page. Dragonfly is good, but I really need firebug like resource tracking features. Another thing you can do in Firebug and not in dragonfly is clear current resource information.

  • Gilberto Ramos

    I’m in love with Chrome Web Developer Tools..! With the Speed Tracer extension is the best option.. even better than Firebug! in my opinion.

    Dragonfly seems promising

  • Robbo

    A lot of people here haven’t even tried out the latest dragonfly by the looks of it. I never noticed how good it has gotten (until I read this article, thanks) because my disk cache had stored an alpha of it. I have been sick of firefox and even firebug had things that annoyed me. Dragonfly is by far the best web dev tool I have ever used. Now I only have to use firefox for testing, yay!

  • Sessl

    Or add a shortcut líke:

    F10 Attach Developer Tools Window

  • TestDragon

    After reading this article, decided to retest Dragonfly. My main reason using Firefox is Firebug, that’s why I tried to compare Dragonfly with Firebug. Personally, I think it still needs some more development, but really improved. And I’d like to send my regards both to Firebug and Dragonfly development teams. Especially with Opera, which sometimes renders pages quite differently, I prefer to wait a bit more time to cook for both the Opera and Dragonfly.

  • Inkoherence

    Only a minor complaint… It doesn’t offer css line numbers when you inspect an element. That is a very useful feature present in Firebug and Chrome.

  • hehe

    Amazing how people are just saying things without even giving a minute to try…

    Great work Opera! Dragonfly was already my choice since its first appearance, and now it just got a lot better.

  • 101

    Opera is one of the best browsers in the world, but underrated.
    Its Dragonfly is amazing, Opera rules!

  • Alex

    Wow congrats to Opera on their new Developer Tool. I like the remote debugging and the utilities tab. I’m really hoping Opera takes off and becomes a bigger browser than what it is.

  • goldfidget

    It looks quite good. I’m still waiting for one feature to make it out of WDT though, the ability to view and edit stylesheets on the fly. The consoles are nice, but you have to wade through so many dropdowns to get what you want, you could have solved the problem three times over before you find what is being declared where.

    All I want is my nice, neat, well ordered CSS, in a tabbed pane in the sidebar, and when I make changes (by writing CSS using my keyboard) I want them to be reflected on the page immediately. Folding would be welcome but I can live without it.

    Sorry to keep banging on about WDT. What do you say Opera? can I have it?

    • Toyotabedzrock

      You can add CSS rules and see the changes in real time.

      There are other nice tools in Opera, the ability to log errors to disk can be enabled in the opera:config settings.

      Also you can edit the code on a page via the source viewer and then directly apply those changes to see the result.

      Also you can talk to the main Dragonfly Dev on the following blog
      http://my.opera.com/dragonfly/blog/

      The source is here:
      https://bitbucket.org/scope/dragonfly-stp-1/

  • betty

    It is a good method opera, I like your ability

    I am amazing your present features it is very good………….

    • Chuck

      awww

      /hug!

  • Mark

    At last Opera Dragonfly implements shading of margins and padding on elements (I’m staggered how long this has taken). Do the same for CSS line numbers, and it is 100% adios Firebug. Dragonfly’s that good.

  • lolraccoon

    Doesn’t it seem very similar to the Chrome Developer Tools?

    • Adrian

      possibly (don’t really use Chrome’s development tools) but Dragonfly has been doing it since before Chrome even existed. Dragonfly is not new. It’s just not very well exposed

  • Mark

    I’m also a recent Opera convert, not just for development, but for browsing too.

    As a long-term Firefox fan, I have to finally admit, Opera totally eclipses what Firefox offers, not just in developer tools, but as a browser too.

  • Ralph

    Agree with Inkoherence and goldfidget. If you do a lot with CSS, the ability to find line numbers and edit stylesheets is crucial. For me, no dev tools will match Firebug until they add the ability to edit styles, markup etc.

    • http://www.optimalworks.net/ Craig Buckler

      You can edit the styles and markup but, as several people have pointed out, it doesn’t currently indicate or link to the correct location in the CSS file. I hope that’s corrected as a matter of priority.

      The only other problems I’ve encountered are with Ajax processing. Firebug remains superior in that respect, but I think DF will catch up soon.

  • Tellosibeko

    Hey how about a little help for the new comers like me?Bcos is too early for us to know the lot.Ive read ure article u make me fall in love with DRAGONFLY.So Graig do something bcos we hungry for it.

  • Adrian

    I switched to Opera as my browser of choice some years ago, and have been using Dragonfly from very early on.

    I have to say that I find it far more intuitive than Firebug, but maybe that’s just me, or because nobody has actually shown me how to use Firebug. In Firebug for instance, I couldn’t never find a way to just keep clicking on different elements in the page to inspect them without having to click the “select element” tool every time. Dragonfly has always allowed me to do this.

    For the type of work and things that I do, I find Dragonfly terrific and I am glad it has been given a bit of a make-over. I find overall layout so much easier to read, even with the simplest things like figuring out what class/ID is associated with the element I’m inspecting, and any parental classes/IDs.

    To be taken to the actual line in the css file that is referencing the class or ID would certainly be handy though (ie. after inspecting element, and then clicking the stylesheet name in the styles tab), but mostly I don’t want to be editing my css files directly using the development tools anyway. I’m happy to simply “try my change” in the styles tab and edit properly using other development tools. Sometimes it’s nice to see how the css has really been written though, rather than what it is being translated to.

  • Stefan

    I can’t find a way to have multiple instances of Dragonfly open, e.g. one for each window to compare two sites or different stages of the same site. This is a pity – since otherwise the tool in fact is really nice and useful.

    E.g. the ability to just click any element in the page without the need of “select element” or “inspect element” as mentioned by Adrian is really convenient.

  • sebastien

    I know this is old but Dragonfly is awesome! I ve been using Chrome Dev tools a lot lately for CSS and JSdebugging and I just started using Dragonfly and I saw that you can edit CSS, not autocomplete though but still. You can add cookies,local storage, there s a color picker and you can take screenshots! I know that there s 15 color pickers in Chrome extensions but this is great. It’s different. I like the way it shows the margin and the padding in the layout view, with markers.Last thing, the network timeline with the headers buttons. great!

  • Peter Freemantle

    I use Opera as my main browser, and I like Dragonfly very much. However, I can’t see how I can use it to edit my JS files, because there doesn’t seem to be any way to save the file to my local disk. Have I missed something?