Opera Dragonfly 1.0 emerges from its exuviae

By David Storeydstorey. Wednesday, May 4, 2011 11:22:35 PM

,

This fine spring morning, Opera Dragonfly’s metamorphosis was completed. Emerging from the beta phase, we’re proud to launch Opera Dragonfly 1.0 onto the world. Over the coming days, weeks, and months, we hope you’ll become increasingly familiar with each other. Opera Dragonfly 1.0 is the development tool we’ve always wanted to build. It is still young, and will grow as we nurture it and teach it new tricks in the coming versions, but it already packs a punch.

A modern app built on web technologies

From the very beginning, we decided to eat our own dog food and develop Opera Dragonfly in web technologies. This was before the HTML5 hype was on every man in suit’s lips. This choice looks to have been the right one. Opera Dragonfly is probably one of the most complex applications written in HTML, CSS and JavaScript (and not to forget SVG). This allows us to use these technologies in anger, and push them to their limits. We gain valuable experience to feedback to our developers and QA, and is a great way of discovering obscure bugs before it is too late. The Web platform has matured since we started, both with expanded capabilities, and improved performance by an order of magnitude. We can take advantage of all these improvements as they get rolled into Opera Presto.

Key Features

There are too many features packed into Opera Dragonfly to cover in this short blog post. All tools you would expect are here, such as a JavaScript debugger, and a DOM and CSS Inspector. It is possible to view the data stored by your application, and monitor network traffic. A Resource Inspector allows you to preview the assets used in your site or application. We designed Opera Dragonfly from the outset to support remote debugging, so you don’t have to leave any of your tools behind when you move to the small, or the large screen. We’ve also built in design aids, such as colour pickers and guidelines in the element highlight. You can even chose the monospace font face and font size to the one you’re most comfortable with. For a full lowdown on each of the features we’ve build into Opera Dragonfly, take a look at our features overview.

Video preview

Getting started

If you already have Opera installed, you’re ready go. If not you can download it from Opera.com. Now all you have to do is right click on the page and select Inspect element if you wish to start up with your chosen element highlighted, or use the shortcut Ctrl+Shift+I on Windows and Linux, or ⌘+⌥+I on Mac, if you want to start up where you left of the last time.

There is a lot packed into Opera Dragonfly, so I’ll leave it to the Opera Dragonfly field guide to teach you the ins and outs.

Feedback

Dragonflies are powerful predators. They eat deadly bugs like mosquitos for breakfast, dinner, and lunch. We hope Opera Dragonfly will become your dependable companion to call upon when you meet an annoying bug, or just need a helping hand working out what is going on in your app. If you like what you see, please spread the word on Twitter with the #dfl1 hashtag, or on your favourite communication mechanism. We also welcome any feedback you have. If you have any questions, I’m @dstorey on Twitter.

Thanks, and I hope you enjoy it as much as we enjoyed making it!

Opera Dragonfly 1.0 RC++First preview of Opera Dragonfly 1.1

Comments

artmil Thursday, May 5, 2011 7:24:39 AM

yes cheers

Richardtreurmars Thursday, May 5, 2011 7:41:16 AM

Wow awesome guys! Looks very good! Will be using this every day now. But that brings me to one feature request which i've allready done some time ago. css line numbers! (with uncompressed css, so when you are developing). That is a feature i really miss.

Tenno Seremeltenno-seremel Thursday, May 5, 2011 7:54:15 AM

The question is the same. Why gray? worried

Martin RauscherHades32 Thursday, May 5, 2011 8:40:00 AM

Where did the option go, to keep the network log even when being redirected or navigating to another page? I really need that sad

Dodo87 Thursday, May 5, 2011 8:55:36 AM

Congratulations! I have been using Dragonfly for some time now (mostly the experimental versions) and liked it from the very beginning. I don't miss a thing in the stable version Dragonfly 1.0. Thanks for your good work!

Ronit Kumarronitrex Thursday, May 5, 2011 9:21:24 AM

up drunk wizard

jonnyroten Thursday, May 5, 2011 9:26:50 AM

How to see a css file? Previously had a tab "stylesheet" in tab "Dom".

http://img842.imageshack.us/img842/5930/operadragonfly.jpg

David Håsätherhzr Thursday, May 5, 2011 10:11:48 AM

Originally posted by jonnyroten:

How to see a css file? Previously had a tab "stylesheet" in tab "Dom".

Click on the filename in the style inspector, and it will open in Resources.

jonnyroten Thursday, May 5, 2011 10:46:56 AM

Thanks! I have not noticed.

arcolog Thursday, May 5, 2011 11:39:49 AM

Hm, why there is a black background with nearly black text on Console? sad
Otherways the new version looks quite promising wink

JanGen Thursday, May 5, 2011 1:31:57 PM

Great!

I really like Dragonfly, and use it daily.
it has some really fine features.

Matheusnom4d3br Thursday, May 5, 2011 1:34:07 PM

It's awesome... but still hard to see XMLHttpRequest results and there are no filters on Network Log tab and Resources tab.

These are two things I need to move from webkit devtools to Opera DragonFly.

Thanks to provide us this great tool!

smile

Constantine Vesnac69 Thursday, May 5, 2011 2:46:46 PM

Congrats, guys!

d4rkn1ght Thursday, May 5, 2011 2:55:50 PM

up

ΩJr.OmegaJunior Thursday, May 5, 2011 3:29:07 PM

It looks awesome. Somehow I can't get Dragonfly to recognise the javascript I put into this page: http://www.omegajunior.net/code/Zjramble5/index.html

If Dragonfly can't recognise it, then I can't use Dragonfly for debugging. Chrome's debugger and MSIE's debugger do recognise the script and can set breakpoints and do everything else.

Am I doing something wrong?

thshdw Thursday, May 5, 2011 7:28:20 PM

The Network feature no longer shows the total time of a page request.

This image is from the old version of Dragonfly.
http://dl.dropbox.com/u/6369653/Dragonfly/old-dragonfly.png
This page took 870ms to load.

This image is from the new version of Dragonfly
http://dl.dropbox.com/u/6369653/Dragonfly/new-Dragonfly.png
How long did it take? Who knows?

The older interface did a better job of displaying this information.

Tiago Wakabayashiozoratsubasa Friday, May 6, 2011 7:32:41 AM

This dragonfly is suberb!! Sometimes I sue it only to get blackground imagens who is not possible when there is no the "save image" option (could do like in FF and put "save background image" option).

I have a silly question: is it possible use it offline?

Christian Krebsaleto Friday, May 6, 2011 8:14:00 AM

@Omega Junior you have a timeout on that page, as soon as Dragonfly gets a script, it displayes it. To get all scripts you need to reload the document, e.g. "Reload Debugging Context" in the window select drop down of the window controls in the top right corner.

Marek Nowickifaramir2 Friday, May 6, 2011 8:39:05 AM

Nice work. I think of some improvements to it. Debugging files with only one very long line (eg. jQuery.min) is difficult. It would be very helpful if dragonfly would format code adding new lines and indents.

Other problem is with request that returns eg. json type. It isn't possible to view answer to get "what is wrong".

ΩJr.OmegaJunior Friday, May 6, 2011 10:35:30 AM

@Christian Krebs: Thank you! Reloading the context did the trick.

It looks like Dragonfly is the only debugger that recognises the timeouts and lists them as their own context. They're set using a regular window.setTimeout() instruction.

Tyler Washburntylermwashburn Friday, May 6, 2011 10:07:27 PM

I love these.

I always loved the functionality of Dragonfly, but it was lacking in the aesthetics department. This is a major improvement in looks. Maybe even better then WebKit's. wink

nerform Saturday, May 7, 2011 6:07:19 AM

sweet smile

Tiago Wakabayashiozoratsubasa Saturday, May 7, 2011 10:38:29 PM

I wanna do a suggestion: if it were possible, organize the elements of the resourse tab this way or had a option for a side panel for this:

http://img269.imageshack.us/i/05072011013907.png/
http://img198.imageshack.us/i/05072011014614.png/
http://img651.imageshack.us/i/05072011014618.png/

It'd make easy to find images and what you are looking for.

Mascotmascot Sunday, May 8, 2011 11:27:10 AM

How to have a permanent version of Dragonfly in Opera, if one regularly empties the whole cache (and everything under Delete Private Data menu), and would still like to use Dragonfly offline?

Tenno Seremeltenno-seremel Sunday, May 8, 2011 2:10:36 PM

You can delete storage manually in options I think (i.e. don't remove it with Delete Private Data).

Ameneltopdawg Monday, May 9, 2011 8:53:39 AM

I would like to report shortcomings mainly:
- I can't see a list of pages/tabs that are currently open in the browser window like I used to in the previous versions of Dragonfly and competitor products. As a consequence, there is no way for me to inspect a different page without closing the Dragonfly window, changing page in the browser window and reopening Dragonfly. That's not practical at all. In addition, the reload button that used to appear on the right side of the window list is now absent, which means that the site being visited in a specific page may change and there is no possibility for me to have Dragonfly in sync...
- with pages that are framesets, when the inspect and highlight buttons are both active, selecting an element in the browser window doesn't change anything in either of the browser and Dragonfly windows... It's baffling.

I think window list features have been lost, which seriously impedes the tool as a whole.

I am puzzled by the "this window has no runtime" message... what is a "runtime" on a web page?

For my use cases, this 1.0 version is less usable than the very first version years ago. I feel uncomfortable and puzzled with the decisions and choices Opera has been making lately, for instance the black on dark color scheme in the console. Unfortunately, Dragonfly updates automatically in the background and there is no reverting back to something that was more useful.

Mimis Mum (MM)mimi_s_mum Monday, May 9, 2011 8:59:11 AM

Congratulations, team! Nice job. But ...
What's with the "Debugging content" business? Why can't you simply call it "page" or "tab"? rolleyes


Originally posted by topdawg:

I would like to report shortcomings mainly:
- I can't see a list of pages/tabs that are currently open in the browser window like I used to in the previous versions of Dragonfly and competitor products

I've posted to your forum topic showing where to find it. Take a look.

Tenno Seremeltenno-seremel Monday, May 9, 2011 10:56:46 AM

"this window has no runtime" message usually appears when you have JS off.

EDIT: also, page selector button is somewhere in top right part of Dragonfly.

Christian Krebsaleto Monday, May 9, 2011 6:02:04 PM

@MM the "Debugging content" can consist of more than one tab, it includes any window which is opened by the current debug context, so that e.g. a pop up can be debugged together with the opener. I think we will have to make that clearer, e.g. in a way that a user can compose a context himself, depending on the given use case.

Mimis Mum (MM)mimi_s_mum Monday, May 9, 2011 6:58:34 PM

Originally posted by aleto:

"Debugging content" can consist of more than one tab, it includes any window which is opened by the current debug context, so that e.g. a pop up can be debugged together with the opener.

Thanks for the head-up smile

Special-Opera-Lover Tuesday, May 10, 2011 2:23:37 AM

Originally posted by mascot:

How to have a permanent version of Dragonfly in Opera, if one regularly empties the whole cache (and everything under Delete Private Data menu), and would still like to use Dragonfly offline?


Yes Please!yes

David Håsätherhzr Tuesday, May 10, 2011 9:41:52 AM

Originally posted by mascot:

How to have a permanent version of Dragonfly in Opera, if one regularly empties the whole cache (and everything under Delete Private Data menu), and would still like to use Dragonfly offline?

I answered this in the forums recently: http://dev.opera.com/forums/topic/984572?t=1305020475&page=1#comment9329602

Wraith5 Wednesday, May 11, 2011 2:17:45 PM

Originally posted by hzr:

I answered this in the forums recently: http://dev.opera.com/forums/topic/984572?t=1305020475&page=1#comment9329602


That only works for the English version, though. Would you know how to get, say, a German version that would work in conjunction with a default German browser? Simply downloading https://dragonfly.opera.com/app/stp-1/client-de.xml and putting that in the Dragonfly folder doesn't seem to work (that file is also much smaller than its English equivalent).

David Håsätherhzr Wednesday, May 11, 2011 8:48:31 PM

Originally posted by Wraith5:

That only works for the English version, though. Would you know how to get, say, a German version that would work in conjunction with a default German browser? Simply downloading https://dragonfly.opera.com/app/stp-1/client-de.xml and putting that in the Dragonfly folder doesn't seem to work (that file is also much smaller than its English equivalent).

The proper way would be to build the application. There is a build script included. A quick way is to download the file you mentioned, plus <https://dragonfly.opera.com/app/stp-1/script/dragonfly-de.js>.

Moe GreeneMoeGreene Saturday, May 14, 2011 8:19:52 AM

Calling Console methods, like console.log(), results in two log lines with the value written to the HUD and the Error Log, one line with the line number and one without. Why is it printed twice? For example:


>>> console.log('foo')
foo
(16)foo
undefined


MyOpera team, please fix this!fearphage Saturday, May 14, 2011 7:09:02 PM

Request:

Network log - show the basename of the file (http://my.opera.com/images/fearphage.png becomes fearphage.png)

Currently I see something like
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....
http://my.opera.com/catpants/fo....


Which is not very useful.

Also pull the domain out into a separate SORTABLE column. Also make the http status sortable/filterable if possible.

Thanks team.

David Håsätherhzr Wednesday, May 18, 2011 8:50:16 AM

Originally posted by MoeGreene:

Calling Console methods, like console.log(), results in two log lines with the value written to the HUD and the Error Log, one line with the line number and one without. Why is it printed twice?

Because of a bug. It will be fixed.

FluidGuitar Friday, June 3, 2011 9:49:29 AM

Am I the only one that find the new network activity panel almost unusable?
You can't read the whole url without mousing over it and the lines just adds up without any means to distinguish between user actions on the page.
Without the trash-can icon to delete the unnecessary lines is a continuous scrolling down the list in search of the call that really matters.
I've always used dragonfly but now I have to switch to firebug because I'm wasting a lot of time.
I hope you to fix that ASAP.

Thanks & Regards
Fluid

Constantine Vesnac69 Monday, June 6, 2011 1:54:35 PM

Originally posted by FluidGuitar:

Am I the only one that find the new network activity panel almost unusable?
You can't read the whole url without mousing over it and the lines just adds up without any means to distinguish between user actions on the page.



Yes, its annoying. But, hopefully - will be fixed soon.

Write a comment

New comments have been disabled for this post.

Next builds

New features are added to the experimental branch as soon as they're ready. Once tested, they move to the cutting-edge branch as a release candidate. Unless any problems arise, they are then promoted to the stable branch.

To switch to these builds, enter the relevant URL in opera:config#DeveloperTools, save the configuration change and (re-)open Opera Dragonfly.

Useful resources

Source code

Bug reports / feature requests