Opera Dragonfly

Hello World - Introducing Opera Dragonfly

By Jan Standal. Tuesday, 6. May 2008, 07:57:31

Today we released the first alpha of our new web developer tool. The objective for this first alpha release is to get feedback and of course allow you to start using it. You should expect it to be buggy and even missing some key features, but that is what alpha means.

It is however not entirely correct that we are releasing the tool early in the development. The foundation for Opera Dragonfly has been worked on for more than two years. The phases we have completed so far are:

Interviews with web developers how they use developer tools and how they would like such a tool to be.
Early prototype for DOM inspector and DOM snapshot.
Implementation of the Scope protocol in Presto (Supported in Core 2.1 and later).
Support for Dragonfly in Opera 9.5 beta 2.
Feature development for JavaScript debugger and CSS/DOM inspector.

We do believe the foundation for the tool is very strong and that we are building a tool that will become a popular choice among developers. Most importantly we have designed Opera Dragonfly from scratch to be able to debug web applications on remote devices, something we believe will be key moving forward.

The road ahead

The next major release we have planned is alpha 2. This will be completed before the final version of Kestrel (Opera 9.5) is released. The focus for alpha 2 is:

improved handling of threads in the JavaScript debugger
inline CSS editing
infrastructure for localization
improved remote debugging

But for now — Happy testing!

- The Opera Dragonfly team

Opera Dragonfly, One (and a bit) week in

Comments

1 2 Next »

shadowk # 6. May 2008, 15:51

Thank you so much, can't wait to stress test it.

VarunM # 6. May 2008, 15:54

Behold.

FataL # 6. May 2008, 15:54

First impressions from Dragonfly:

A little bit slow, but understandable because it is all written on JavaScript
No Net graph yet (HTTP requests watch)
Questionable way to show DOM path to selected element:
```
HTML > HEAD + BODY > DIV + DIV > UL
```
instead
```
HTML > BODY > DIV#navigation > UL
```
...And elements of DOM path not clickable for fast navigation to parents.

alxtec # 6. May 2008, 15:55

Nice!

Engelium # 6. May 2008, 15:58

Well! I waited too long for this moment ;D

Sreeramu # 6. May 2008, 16:04

I will try...

morotatoi # 6. May 2008, 16:05

Bueno no entiendo un joraca de programación, pero todo es bienvenido, Congratulations!!

archetwist # 6. May 2008, 16:06

Hooah!

FataL # 6. May 2008, 16:07

Digg Dragonfly!

drumblius # 6. May 2008, 16:08

I still get "Coming very soon" message

FataL # 6. May 2008, 16:20

How do I debug the Wii’s Internet Channel?
You can't - the Internet Channel was released before Presto Core-2.1, thus it doesn’t contain the Scope module that Opera Dragonfly requires.

Hope there will be an update for Wii browser...

Sreeramu # 6. May 2008, 16:23

Debug your phone or TV
Debug pages whether they are on your computer or a supported device, such as a Windows Mobile phone running Opera Mobile 9.5. You can connect to any device running Presto Core-2.1 or above, and debug using your computer's screen and keyboard - No need to struggle inputting test data with your phone's keypad again.

Where is opera mobile 9.5...???

fearphage # 6. May 2008, 16:23

Checking it out. A button for the non-default menu users: Dragonfly

leo42 # 6. May 2008, 16:23

If you still get the "coming very soon" message, go here:

http://dragonfly.opera.com/app/zips/protocol-3/

1. Download & unzip the file to a directory
2. run a local webserver
3. goto opera:config -> developer tools, and point Developer Tools URL to http://my_webserver/client.xml

Enjoy

FataL # 6. May 2008, 16:28

1. Download & unzip the file to a directory
2. go to DeveloperToolsURL in opera:config and point to local folder:
file://localhost/с:/dragonfly/client.xml

sebt # 6. May 2008, 16:30

Looks great. As others have commented, a little slow, but certainly usable. I look forward to the upcoming feature additions!

Seb

dmaphy # 6. May 2008, 16:31

Very Nice!

Fyrd # 6. May 2008, 16:58

This is absolutely AWESOME! I'm delighted to see it lets me debug widgets and SVG files too! Woohoo!

DjiXas # 6. May 2008, 17:48

Congratulations on Alpha

Think # 6. May 2008, 17:48

never mind the troll

Diam0nd # 6. May 2008, 17:58

Fyrd:
Totally agree. However, by offering developing tools and not offering plugins Opera puts developers BEFORE actual users.

GwenDragon # 6. May 2008, 18:03

Well, nice, good try is the alpha version of Dragonfly.
Should not be called Dragonfly as real dragonflies are very fast.
May bee humblebee

The app is acting as a JavaScript and tooooo slow.
And the GUI elements are to big. May be the gui interface could be not so expensive in waste of space on monitors.

shadowk # 6. May 2008, 18:08

@FataL
I think the DOM path is displayed the way a CSS Selector would refer to those nodes.

@Diam0nd
Opera does not have users because ~~lazy~~ developers couldn't test their websites in Opera. So by giving tools to the developers, they actually making sure that they will get more users.

fearphage # 6. May 2008, 18:15

Originally posted by Diam0nd:

by offering developing tools and not offering plugins Opera puts developers BEFORE actual users

When a page doesn't look right in Opera, its because of the developers... not actual users. Its one aspect of Opera that is being worked on. Simmer down kid. Actual users get preferential treatment every day. Actual users or normal users rather (my parents for instance) won't be using extensions in Opera or firefox unless I or some toehr technical person set them up. Extensions are not for the average joe.

Originally posted by GwenDragon:

Should not be called Dragonfly as real dragonflies are very fast.
May bee humblebee

Nice one

... humorous at least. I think its rather fast thus far. I'll try again when I get home which is a much slower machine though.

FataL # 6. May 2008, 18:20

@FataL
I think the DOM path is displayed the way a CSS Selector would refer to those nodes.

That's fine but it will be ureadable (read: unusable) in many cases. It can be added as additional and optional widget to display path in CSS way.
Now Dragonfly shows:

HTML > HEAD + BODY > DIV + DIV + DIV > DIV + H3 + P + P + P + UL + P + P + P > A

when in most cases I really need something like this:

HTML > BODY > DIV#content > DIV#side > P > A.external

fearphage # 6. May 2008, 19:00

@FataL: nice. local access

BlackDex # 6. May 2008, 19:43

Hmmm... no XHR logger??
That was something i realy liked from the Developer Console.
Is this going to be implemented?
But overall, i realy like it

Schalandra # 6. May 2008, 19:57

@Fatal
I think you're right. Both ways would be indeed very useful. But since it's out now, we can talk about it to improve Dragonfly asap.

From what I've seen so far it looks handy, even more as I have two screens.

fearphage # 6. May 2008, 20:16

Dragonfly reminds me a lot more of drosera than firebug at the moment. This is neither a good nor bad thing.

hworld # 6. May 2008, 20:35

@BlackDex
Yeah, seems like it will be. The main page says:
"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."

LEW21 # 6. May 2008, 20:55

Maybe something for XSLT debugging? "XSLT parse error" message isn't very useful...

ameer1234567890 # 6. May 2008, 22:07

Cool!

Webshit # 6. May 2008, 22:13

It's still needs allot of work, but it already looking nice and this can help allot of designers/developers in the future.

Thank you Opera

cheshrkat # 6. May 2008, 23:24

Awesome to see this finally hit the market

It's always been a battle to get other developers to support Opera, they always gripe that it doesn't have Firebug

danielcs # 7. May 2008, 00:27

Thanks you!!!
I'm putting it in my Gentoo right now.

vremix # 7. May 2008, 02:19

I feel stupid every time when this tool on my screen. Please, do before release:

*) more usability
*) scripting must has a autocomplete, trace jumps, current evals
*) DOM must be live tool for monitoring a page, this one just another clone of DOM inspector or related stuff
*) speed serving
*) interaction with any active frame
*) ...

sunilgupta20801 # 7. May 2008, 03:05

It's cool, i was waiting, Thanks.

http://feedshub.blogspot.com/2008/05/opera-systems-released-opera-dragonfly.html

Pistos # 7. May 2008, 03:23

Great step in the right direction. Can't wait to see how Dragonfly develops.

kyleabaker # 7. May 2008, 03:30

I'm loving the Script Command Line.

For an alpha, this is pretty smooth. I noted a bug here that deals with the "Show Views menu" option. The Javascript interaction seems a bit slow at times, well, just not as snappy as everything else in Opera.

It's sad, but the Console tab is already as good..if not better..than the current Error Console. The only thing missing is a link to the script file to open it in a new tab like the console does..or open the "Script" tab and load the script file in there.

I would like to see the option to sign-in to my.opera or something so settings are saved/sync'ed for Dragonfly. Also, it would be very handy if the Console tab could be logged online like a chat history is stored in some messengers. This would help for referencing errors in pages and seeing what was going on, etc.

Kildor # 7. May 2008, 03:50

Please, make it usable from sidebar. ;-)

BlackDex # 7. May 2008, 05:43

@hworld: That i overlooked

.
Well in that case.. i hope DragonFly is going to keep me from using FireFox and FireBug. Would be nice to have everything in my main browser.

sabisan # 7. May 2008, 05:57

Great work @OperaTeam :-).

Is there an option (that i may have missed to find), that mouse-hovering over DOM-tree-elements would colorize/box "hovered" WebPage-element ?

IceArdor # 7. May 2008, 07:21

Make it usable from the sidebar, please.

Another option would be to pop up Dragonfly on the left and right of the webpage, similar to an IDE. Dragonfly would be hidden unless it is marked as Always-On-Top, or I hover over a Dragonfly icon (or use a keystroke to bring up Dragonfly). My main concern is how can I use this tool on a 1024*768 screen AND view the webpage at the same time. Even with a 1600x1050 screen, I still don't have a bunch of room to use Dragonfly and Opera simultaneously. Then again, most developers have dual-monitor setups, but it'd still be nice to design this for a single-monitor setup.

haavard # 7. May 2008, 07:26

IceArdor, please read the documentation and FAQ... You will notice that quite a few things are currently missing, but planned, so there's no need to request them.

Webshit # 7. May 2008, 07:28

Some people dont understand the word Alpha -_-

grazou # 7. May 2008, 09:25

would be nice to be able to give dragonfly a try, but I'm using debian linux and opera 9.50b2 is not available from the opera repository: http://deb.opera.com
So I'm stuck with the older beta1 and with the older developer tools: http://dev.opera.com/tools/

Schalandra # 7. May 2008, 09:51

Besides... how do you close the Settings dialogue?

And how do I clear the console?

(I might be stupid, but I haven't found anything about it in the documentation)

Schalandra # 7. May 2008, 10:00

I'm either blind or stupid... After closing and reopnening the tools there is a button to clear the console. There wasn't any before. You're making a fool out of me?

Same goes for closing button for settings...

I'm confused. Or did you just fix it?!

Maksymus007 # 7. May 2008, 11:02

what makes me angry is fact, that tool is made as "standard webpage". This makes it slow and unusable for me - I know its alpha but is final version going to use "standard OS API" for displaying?
Next is to dock it somehow - well can't stop myself from comparing to firebug, sorry guys

I hope tool will develop and make Opera the best webdeveloper tool!

GoJoeGo # 7. May 2008, 12:24

Maksymus007: that's odd because Firebug is just a "standard webpage" too. It's all built on the same web technologies that Firefox was made with. If Dragonfly is automatically "unusable" for being a "standard webpage", then so is Firebug.

1 2 Next »

Showing comments 1 - 50 of 87.