Introduction to Opera Dragonfly

In this article, Chris Mills gives you the lowdown on Opera's exciting new developer tools release - Opera Dragonfly - revealing how to use it, and what all the parts of the application do. This is an alpha version, so let us know what you think!

( Read the article )

well I tried almost 10 to 15 time to access Dragon Fly & finally got frustrated cursing opera. I could not open it through Tools > Advanced > Developer Tools, it always took me a webpage..where i kept on adding the consols...& finaly it never came up

Originally posted by surajnaikin:

well I tried almost 10 to 15 time to access Dragon Fly & finally got frustrated cursing opera. I could not open it through Tools > Advanced > Developer Tools, it always took me a webpage..where i kept on adding the consols...& finaly it never came up

Are you using Opera 9.5 beta 2?

Looks great so far. I haven't seen any crippling issues yet, in fact the only issue I've spotted so far is that the views menu dissapears when I mouseover 'all'.

Feature's I'm after for the future are:
The ability to right click to inspect the clicked element ala Firebug
Powerful performance profiling tools for page load times including breakdowns for time before a response is received and transmission time. Also it'd be great to be able to have it record statistics on load times for the same page and even shown a nice little graph of the performance each time.
Additionally (and somewhat related to performance profiling) are cache management tools to be able to set what gets cached and also analyse what is and isn't getting cached and why.

I'll be looking forward to the next alpha release, keep up the great work Opera Dev's.

Observation:
when resizing the Source frame for Scripts e.g. where I had scroll bars in the textfield before, that resizing didn't take the textfield with it, only after some scrolling action it eventually adapted to the new size of the frame...
... not clear what and when it's changing its size.

Should be looked into and checked...

I want an application like firebug to view my AJAX requests!!!! please!!!!!

Originally posted by leoalassia:

I want an application like firebug to view my AJAX requests!!!! please!!!!!

Ajax monitoring stuff is coming soon, promise! It's on the to do list.

Thanks for the feedback folks.

Also, we are curretly working on translations to other languages. Japanese is the first one we've started. We should probably do Russian as well. Let me know your thoughts on other languages.

Originally posted by chrismills:

Let me know your thoughts on other languages.

What about french?

leoalassia: You could always take a look at the product description:

The initial alpha release is just the beginning. Opera Dragonfly has a fully featured road map, including support for editing of CSS, JavaScript and the DOM, a single window mode, improved JavaScript thread handling, XHR and HTTP monitoring, improved keyboard navigation, and translation into a number of languages.

Bendc: Once the internationalisation infrastructure is in place there will be the capability to translate to most languages. We'd just need someone to help us provide those translations. At least for French, we do have some native French people in Opera, including two which are web developers.

Minor nitpicks... (red is spelling, green is grammar, additions marked by square brackets)

When you set a breakpoint and then run the script (ie by doing something that causes the parrt of the script you've set a breakpoint on [to... ?], such as click[ing] a button), the script will stop executing at the breakpoint,

I only caught this because part of the sentence is missing, though.

Originally posted by _Grey_:

Minor nitpicks... (red is spelling, green is grammar, additions marked by square brackets)

Fixed - cheers Grey.

Only had a quick look but liking what I'm seeing so far. Would be good if there was an option to 'dock' the inspector window inside the one you're inspecting too like Firebug and as mentioned the right-clicking of an element feature.

Very nice, I think this is what you can call a developers dream.

Unfortunately registered event handlers to dom nodes are not very clear in the dom view.

At least you expect somewhere, but maybe preferable in the dom tree (with colors?) to have a fast overview with all elements that have events registered.

I would be nice to see (a link to) the function that is registered at the dom node attributes (onclick, onmousover etc) and not only a rather obscure object description:


onclickobject
length0
prototypeobject
constructorobject
length0
prototypeobject
constructorobject
length0
prototypeobject
constructorobject

I wish there was a NET panel, as in firebug, which shows network connections to items.

Originally posted by chrismills:

Also, we are curretly working on translations to other languages. Japanese is the first one we've started. We should probably do Russian as well. Let me know your thoughts on other languages.

I'm also interested into a French translation.

Apart from pretty damn good DOM inspector (wheres context-menu "Inspect this" option?!), its pretty useless toy.
But I appreciate efforts and hope that when its finished we will be finally able to stop cursing Opera. For now it has to stay close with IE. Not mentioning Safari, since its a combination of Opera market share, IE developer tools (it has any?!) and.. good CSS support (with I won't use anyway, since 99.999% ppl won't notice anyway, or experience broken website), therefore I don't care about it at all.
Good luck with developing it, I honsetly can't wait to get a tool comparable to Firebug.

Opera Dragonfly is open source! Congratulations!
(I have horrible suspicion this is only because it was written in Javascript, but still)
Can I see the source code now please?

Originally posted by Jadd:

Can I see the source code now please?

See this post: http://my.opera.com/dragonfly/blog/first-weekly-build-now-live - contains a link to the source code.

Did everything, but I can not open the table of Scenario, Where, button which opens the table of Scenario (script tab), - I pressed all of the buttons already

Opera Dragonfly. I thought that knew everything in it. Reading instruction knew a lot of useful things. It began me easily to work in Opera dragonfly Script tab - how heavily it was me in him to work. Now I know nothing better what Opera dragonfly

Very much the well written article 5+
Congrast

Such a disappointment. Nothing near the Firefox Web Developer toolbar or Firebug, or even IE's Developer Toolbar. I was excited enough to come check it out, now I'm disappointed enough to take the time to to sign up and say how disappointed I am. Shame on Opera for dangling pretty links in front of people who have other stuff to do.

Originally posted by JBSmith:

Such a disappointment. Nothing near the Firefox Web Developer toolbar or Firebug, or even IE's Developer Toolbar. I was excited enough to come check it out, now I'm disappointed enough to take the time to to sign up and say how disappointed I am. Shame on Opera for dangling pretty links in front of people who have other stuff to do.

It really depends on what your expectations are. This is only Dragonfly Alpha 1.

Their planned features, coupled with the already available ones, make Dragonfly a worthy competitor to Firebug.

Have patience: Dragonfly will be much better. I presume your main disappointment is caused by the lack of editing capabilities and/or the lack of HTTP headers monitor - both planned (and more).

If this would be a "final release": yes, Dragonfly would be disappointing. However, keep in mind they could have not released any alpha - giving us only, say, the final. If this would have been the case, we would have had to wait longer, before having anything. Even in the current alpha, Dragonfly is really useful for inspecting your Web application.

I quite like Dragonfly. But I'd like to dock the window to the right instead of to the bottom. On my widescreen laptop, I don't have much height, and splitting the window vertically makes both the website and dragonfly have too little space. But splitting horizontally would be ok.

I agree with freedo
may be a better idea would be can set any tab as "always on top"... don't you think?

Post edited Wednesday, 30. July 2008, 20:41:00