Opera Dragonfly - Web developer tools

Article published on:11 May 2008, 18:06

Hello guys!

Opera Software has finally released some serious Web developer tools: Dragonfly. Unlike their first attempt, the bookmarklets, which disappointed, this time around Dragonfly tries to make up for the time lost. Even if the developer tools should've come earlier, it's better we get them latter than never.

Firebug is currently the king of Web developer tools. It certainly is the best and most complete one I've used: good DOM Inspector, good debugger, good console and a nice API, all with a good looking GUI. The position of "king" is now challenged by Dragonfly which has some very important ideas.

Packaging and architecture

You can install Firebug as a Firefox extension. Firebug is practically a Web application with additional privileges, accessing more of the internal API of Firefox.

Dragonfly is similar, but it's not an extension for Opera. It comes as an external Web application for Opera - it's not native. Yet, like Firebug, it has access to the internal Scope API. The Scope API is a specification written and implemented by Opera 9.5 beta 2. As such, Dragonfly is not limited in purpose and possibilities.

Perhaps the most important part of this alpha release of Dragonfly is the Scope API specification which will be publicly available soon. People will be able to build their own set of developer tools for Opera and other UAs implementing the Scope API. You will be able to build integrated developer tools into your favorite editors and IDEs. Going even further, you can implement this into Firefox or other browsers. The possibilities are quite great: you can end-up debugging multiple instances of Opera's, or you can debug Opera with Firefox and vice-versa, etc. Once you have a Scope server in Opera and Firefox, as well as a Scope client for each browser, you can pick and choose at any moment the one you like more.

The Scope API and Dragonfly also work over the network. There you go: you can debug Opera Mobile 9.5 from your Opera desktop. You can also debug Opera instances running on your friend's computer, via Internet. If someone implements the Scope API for Firefox, you can debug Firefox from Opera over the Internet.

That's the smart move made by Opera: now Firebug needs to play the catch-up game. Firebug will have to implement this kind of functionality: we will need ways to debug Firefox running on mobiles, remote Gecko applications. We will also want integration from the IDE into a running Firefox instance. Unfortunately, I'm not sure if they will simply do it: or they will come up with yet-another protocol. That would kinda suck. If I am not mistaken some of the advanced IDEs today already provide JS debugging, but, as far as I know, they don't directly inspect a live instance of your browser.

Features

In Opera 9.5 beta 2 you can start Dragonfly from Tools > Advanced > Developer Tools. Opera then quickly loads Dragonfly and caches it. Subsequent loads are from the cache - for now there's a bug which prevents proper caching, but oh well it's alpha.

The entire Dragonfly Web application is very small given it's power and it loads really fast - they've optimized the code as much as possible. Probably they have further performance improvements coming. On my Athlon XP 1800+, Dragonfly doesn't feel slower than Firebug - which is very good.

You have the following tools to play with:

• Script viewer. You can view all the scripts with syntax highlighting. Firebug doesn't have syntax highlighting.
• Script debugger. You can set breakpoints and set into/over/out of each line of code. You can inspect the global scope and the local execution scope. At the moment, you don't have breakpoint condition, like Firebug does.
• Command line. You can execute any code you want in the global scope, and, while debugging, in the selected scope from the call stack. This is really useful in many cases.
• DOM Inspector. Here you can view the entire structure of your document as-is, live. You can inspect the properties of each node, the computed styles, the matched style rules from your CSS files, You can also get a nice "layout" view - based on the computed style.
• Style sheets. Obviously, you can view each of the style files in your document, as they are available via DOM 2 Styles. Unfortunately, just like Firebug, Dragonfly doesn't show your exact CSS file. Still, in Firebug you can see your CSS file if you choose to edit it.
• Console. This is supposed to be an improved console messages viewer in Dragonfly. Currently, it's still too simplistic for my taste.

Usage tip: Even if officially you can only use Dragonfly as an external window, you can use it inside Opera as well. Just start Dragonfly, enable the Windows panel, and then drag the Dragonfly window inside the main Opera window. You'll make Dragonfly usable as any ordinary tab. Go to Tools > Preferences > Advanced > Tabs > Additional options > there disable "Show close button on each tab" - to enable the MDI mode. Once you do this, you can drag and resize the Dragonfly tab inside Opera.

The bad, for now

Dragonfly is only the first alpha release - I even got Opera to crash once. The problems, sorted by importance:

• You can't edit anything: node attributes, properties, debug variables, style sheet properties, nothing. You are stuck. I can't complain: this is coming very soon in subsequent releases of Dragonfly.
• Search is quite buggy in Script view and it's especially unusable in the DOM inspector.
• We don't have any HTTP headers inspection tool, no way to play with the header requests, no XmlHttpRequest logger, no DOM Events monitor. These are promised to come soon, as well.
• No JavaScript performance profiler tool.
• No console object for use inside our Web applications.
• The command line does not yet implement automatic complete.

Given Firebug is a much more mature Web application, when compared to Dragonfly, I can't blame Opera. Most of the issues will be soon fixed. By then, Dragonfly will be better than the current version of Firebug.

Go ahead and try Opera 9.5 beta 2 and Dragonfly. Make sure you report all the bugs you find.

Published in: dragonfly, firebug, opera, reviews.