It seems that Dragonfly is not yet dead. 4 months after releasing the initial stable build of Opera Dragonfly, it has now been updated to the version 1.1.

In the official post, David Storey wrote, “around 3 and a half months ago we launched version 1.0″, which is not actually true as Opera Dragonfly 1.0 was releases on May 4th and that was 4 months ago. While that’s nitpicking, it looks like even its developers are ashamed of the release cycle train wreck that Opera Dragonfly had.

Furthermore, David Storey, a guy who is responsible for the Opera Dragonfly development, has announced that he will be leaving the company, right after 1.1 release.

For all the new features and changes, see the original post.

[Thanks, MarkG, Mikah]

Good news, the very first stable build of Opera Dragonfly has been just released and can be tested on your Opera web browser (desktop, mobile or even TV).

Just hit CTRL+Shift+I if you running Windows or Linux machine and ⌘ + ⌥ + if you are on Mac.

Opera Dragonfly offers a variety of features, including:

DOM Inspector

JavaScript Debugger

Remote Debugging
Network Inspector

Resource Inspector

Storage Inspector
Error Log
Console
Utilities
… and more.

Have you tried it already?

Home page.

1. Type opera:config#DeveloperTools|DeveloperToolsURL in the address bar.

2. Change “Developer Tools URL” path to https://dragonfly.opera.com/app/stp-1/experimental/

3. Click Save (restart not required).

Thanks to “narzędzia warsztatowe” for the tip.

Via my.opera.com

David Storey from Opera Software has just announced the upcoming and much needed visual refresh for Opera’s Dragonfly.

While estimated time of release remains unknown, it’s good to see that company has not forgotten its debugging tools.

Could this bring Opera back into the game? Potentially yes, if it’s much more than just a new UI.

For more details and screenshots, visit the the following page.

About

Those are default installed web browsers/extensions with no settings changed. This is a mini comparison which focuses on elements inspection, source modification and overall usage rather than advanced tools. If you find yourself using features such as script debugging, elements loading speed, etc. this review might not be very helpful.

Speaking of inspecting certain things, same site element was used in all the tools.

Internet Explorer Developer Tools

As you can see from the picture, inspecting and seeking for certain elements is quite easy and fast, thanks to checkboxes near each of them. Instead of disabling elements one by one, you just click on the whole tree and that’s it.

When it comes to inspecting, there are few annoying things: if elements are near each other, it can be hassle to pick the one you want due to high sensitivity.

Another issue: blue border. You assume that once you click on the certain site part, it will disappear but that’s not the case. Actually, you have to click on the arrow to remove the border. Of course, it doesn’t sound too bad, however when you are trying to modify lots of borders (and blue one is on top of them), it can be annoying and time consuming.

Firefox Firebug

Even if you not a web developer, Firebug is probably already wired into your brain and you’re going to download it once you start developing.

Interface is light and well made. Picking certain elements is also much easier than in Internet Explorer developer tools.

Disabling certain classes can be done fast too. However, it does not have IE like checkboxes which might take some time if you want to turn all of them off.

One thing which I’ve found annoying was the way it accepts code. When you’re working with CSS arguments, line ends with semicolon (;), right? Well, not in Firefox. Firebug will automatically add it which just messes with your mind. Add ; when coding in text editor, don’t add when coding in Firebug.

Safari Web Inspector

Just like IE, this was my first time trying Safari Web Inspector.

The interface is pretty much Mac alike aka lots of gray. Although it’s a matter of taste, I’ve found it to be worse than over developer tools.

As you can see from the screenshot below, Web Inspector has checkboxes similar to IE’s. Even though you can’t disable the whole ID, it can be done a little bit faster than in Firebug.

One of the things I didn’t like in Safari developer tools was the way it displays color code. Instead of the usual #00000 it will show something similar to this:

Opera Dragonfly

Last but not least is Opera Dragonfly (still in alpha). As it is being served from Opera server, this tool will always be up to date which is quite nice.

Interface looks light and simple, although I’ve found it to be slower than its competitors. The very first issue which you can instantly notice is elements edit. To quickly disable certain attribute, you will have to delete the line itself.

Certain elements cannot be modified as well, even though they are listed in the right column.

As this tool is not even in Beta stage yet, there is not much left to say. I am sure things will improve.

Conclusion

As you can see from the very first picture of each developer tool, all of them were picking code differently.

For the very basic needs and quick developing (find, edit, fix), I would go with Internet Explorer Developer Tools choosing Firebug as a great alternative. Even though Safari’s Web Inspector interface was not very impressive I’d still chose it over Opera Dragonfly which so far lacks some basic features.

[digg-reddit-me]

Screenshot below:

Click to enlarge.

Red line indicates the places where I was looking to turn this thing off. Ideas?

Edit: Solution (thanks to anonymous):

Type opera:config in the address bar, find “Developer Tools”, replace “Developer Tools URL” with the following:

https://dragonfly.opera.com/app/weekly/

Click “Save”. Restart Opera.

So what exactly is Opera Dragonfly? I won’t say quite yet, but I do think that, in my opinion, it is the most important project we have on going at the moment, and probably since I’ve been at the company. It won’t directly affect everybody, but will hopefully become invaluable for those that it does. We’ll likely have more to say about it at SxSW in Austin Texas.

I’m pretty excited about Opera Dragonfly and can’t wait to hear more about this project in the future. Here are a few guesses by various people:

Offline apps,
Web developer tools,
Opera’s Firebug
Opera OS

Dragonfly means so many meanings that I’m really confused right now. What’s your guess?

Web Browsers News and Reviews. Subscribe to our RSS Feed.