Opera Dragonfly 1.0 emerges from its exuviae

This fine spring morning, Opera Dragonfly’s metamorphosis was completed. Emerging from the beta phase, we’re proud to launch Opera Dragonfly 1.0 onto the world. Over the coming days, weeks, and months, we hope you’ll become increasingly familiar with each other. Opera Dragonfly 1.0 is the development tool we’ve always wanted to build. It is still young, and will grow as we nurture it and teach it new tricks in the coming versions, but it already packs a punch.

A modern app built on web technologies

From the very beginning, we decided to eat our own dog food and develop Opera Dragonfly in web technologies. This was before the HTML5 hype was on every man in suit’s lips. This choice looks to have been the right one. Opera Dragonfly is probably one of the most complex applications written in HTML, CSS and JavaScript (and not to forget SVG). This allows us to use these technologies in anger, and push them to their limits. We gain valuable experience to feedback to our developers and QA, and is a great way of discovering obscure bugs before it is too late. The Web platform has matured since we started, both with expanded capabilities, and improved performance by an order of magnitude. We can take advantage of all these improvements as they get rolled into Opera Presto.

Key Features

There are too many features packed into Opera Dragonfly to cover in this short blog post. All tools you would expect are here, such as a JavaScript debugger, and a DOM and CSS Inspector. It is possible to view the data stored by your application, and monitor network traffic. A Resource Inspector allows you to preview the assets used in your site or application. We designed Opera Dragonfly from the outset to support remote debugging, so you don’t have to leave any of your tools behind when you move to the small, or the large screen. We’ve also built in design aids, such as colour pickers and guidelines in the element highlight. You can even chose the monospace font face and font size to the one you’re most comfortable with. For a full lowdown on each of the features we’ve build into Opera Dragonfly, take a look at our features overview.

Video preview

Getting started

If you already have Opera installed, you’re ready go. If not you can download it from Opera.com. Now all you have to do is right click on the page and select Inspect element if you wish to start up with your chosen element highlighted, or use the shortcut Ctrl+Shift+I on Windows and Linux, or ⌘+⌥+I on Mac, if you want to start up where you left of the last time.

There is a lot packed into Opera Dragonfly, so I’ll leave it to the Opera Dragonfly field guide to teach you the ins and outs.

Feedback

Dragonflies are powerful predators. They eat deadly bugs like mosquitos for breakfast, dinner, and lunch. We hope Opera Dragonfly will become your dependable companion to call upon when you meet an annoying bug, or just need a helping hand working out what is going on in your app. If you like what you see, please spread the word on Twitter with the #dfl1 hashtag, or on your favourite communication mechanism. We also welcome any feedback you have. If you have any questions, I’m @dstorey on Twitter.

Thanks, and I hope you enjoy it as much as we enjoyed making it!