Opera Ships Dragonfly Debugging Tools Beta

Opera Software delivered the beta version of its Dragonfly debugging tools for Web designers and developers.

Announced on March 14 at the South by Southwest conference (SXSW) in Austin, Texas, Opera's initial beta of its Dragonfly open-source suite of debugging tools is now available for when users download the Opera browser. Dragonfly is built in and loads automatically from the Web.

Opera officials said Dragonfly covers the full debugging workflow, from inspecting network access and downloaded resources, to correcting JavaScript issues and seeing how CSS rules apply to the Document Object Model (DOM). Opera Dragonfly also supports the latest Web technologies, including SVG and HTML5 APIs such as Web Storage.

In a press release on the new software, Opera said Dragonfly enables developers to take their JavaScript debugging to a new level of thoroughness. Watches monitor the exact expression or specific variable in your JavaScript code. If you want to see exactly what caused that massive JavaScript fail, check the breakpoints panel. Not only did we give breakpoints their own panel, but we have added new types of breakpoints and more granular control.

“People ask why we chose ‘Opera Dragonfly’ as the name of our developer tools,” said David Storey, Chief Web Opener at Opera, in a statement. “Dragonflies eat bugs, and that is exactly what we want it to do for developers around the world. You spend your time making the Web better for everyone. The least we can do is make life easier for you.”

According to Opera's release: “Watches monitor the exact expression or specific variable in your JavaScript code. If you want to see exactly what caused that massive JavaScript fail, check the breakpoints panel. Not only did we give breakpoints their own panel, but we have added new types of breakpoints and more granular control.”

The Dragonfly Network inspector helps to find bottlenecks and latency issues, and enables the developer to see how resources download and in what order, and even view cached resources. The Dragonfly Resource Inspector enables the developer to see all site resources such as images, scripts, fonts, HTML files and videos at a glance. And the Storage Inspector enables developers to dynamically update and test cookies and HTML5 Web Storage.

Meanwhile, Opera said developers can start hunting bugs with Opera Dragonfly beta in four quick steps:

• Enter opera:config#DeveloperTools|DeveloperToolsURL into your address bar.
• Change “DeveloperToolsURL” to https://dragonfly.opera.com/app/cutting-edge/.
• Click “Save.”
• Use the shortcut to open Opera Dragonfly: Ctrl+Shift+I (Windows and Linux) or ⌘+⌥+I (Mac).