Distributed Life

Some time ago Opera Software announced that they would open-source their web development tool, called Dragonly. On the 14th of March Opera Software announced the first beta version of Dragonly after it became open-source. This release came few days before the Opera 11.10 Beta Browser release. Dragonfly is a Firebug-like tool that aims to aid the web developer and designer on the development and debugging process.

Technologies

Dragonly provides support for the latest web technologies, such as HTML5 APIs and SVG files. I will present you the Dragonfly capabilities later on the screenshot tour.

Installation

Opera comes with Dragonly pre-installed. In order to use the beta version do the following:

1. In the Opera’s address bar type opera:config#DeveloperTools|DeveloperToolsURL, or else type opera:config and search for the keyword “develop“.
2. Replace the “Developer Tools URL” with https://dragonfly.opera.com/app/cutting-edge/ (it was https://dragonfly.opera.com/app/).
3. Use Ctrl+Shift+I to start Dragonfly. You can alternatively started by right click -> Inspect Element on a page.

Screenshot Tour

Documents Tab

On an item, press right click -> Inspect Element and the Dragonly will open, focused on this element.


You can see and change the HTML (DOM) Tree and the CSS properties on the left. On the bottom, there is a tab that show the whole “parent structure” of the selected element. Unfortunately, Dragonfly does not provide auto-completion for the CSS properties, as Firebug does.

Scripts Tab

You can see the Javascript code, place breakpoints, and generally debug your code. The console provides you the ability to write and test Javascript code. It supports auto-completion and completion-suggestion. A usefull shortcut: with Dragonfly open, you can show/hide the Javascript console by pressing the Esc key.

Network Tab

The network tab gives you the ability to see how the load time of a page is “broken” into different elements. This can be very useful to discover some elements that take a lot of time when loading. The “Make request” tab of Network, allow you to send a “custom” HTTP request to a URL and can be very useful for debugging services (for example, that will be fetched through AJAX).

Resources Tab

The Resources tab shows you the different elements that the site consists of.

Storage Tab

The Storage tab provide you the information for any kind of storage that a site can keep at your browser (cookies, sessions, HTML5 Web Storage, etc).

Errors Tab

The Errors tab present you any possible CSS and Javascript errors detected.

Utilities Tab

The Color picker in the Utilities tab is a very usefull tool, since it allows you to “reverse-engineer” and get the color code from a design.

Settings Button

Finally, several settings options were added to this Dragonfly release, making it highly customizable.

Impressions

Overall, I could not find any major functionality additions to the Dragonfly on this beta release. Though, the user interface redesign is very nice (to my taste at least) and some minor annoying details existing in the past were fixed. For example, the mouse’s right click was not handled in the past. Now, a right click provides you with a Dragonfly menu (and not the browser’s one).