Opera Dragonfly features
DOM Inspector
Style Inspector
The Style Inspector shows the styles that target the currently selected element. All styles can be edited on the fly, including temporarily disabling declarations and adding new rule blocks. To speed up editing and help remember valid and supported properties and values, auto-complete functionality and specification links are built-in.
Element Highlight
Opera Dragonfly features a fully configurable in-page element highlight. This visualizes the box model of the selected element, including alignment guidelines. It is also possible to invert the color and keep multiple elements highlighted.
DOM View
View your markup after it has been parsed by Opera and manipulated by JavaScript. The DOM view can represent the DOM as either markup or a node tree. The DOM is fully editable, with updates shown in real time in the browser window. A search feature allows you to search for a particular element via text, RegExp, CSS queries or XPath expressions.
Breadcrumb trail
A breadcrumb trail allows you to view and navigate quickly to the parent and ancestor elements of the currently selected element.
Color picker
A color picker is included for any CSS properties which accept a color value. The color picker updates the page on the fly and features a color palette to store colors for later reuse.
JavaScript Debugger
Source View
The source view shows syntax-highlighted scripts, complete with the option of setting breakpoints. A powerful search feature allows for searching in the currently selected script or across all loaded JavaScript files using text or RexExp. This reduces the time it takes to hunt down that problematic piece of code you know is hiding in one of your files.
Variable Inspection
See all variables and functions that are in scope, as you step through your program. Variables of interest can be quickly added to the Watches panel for further inspection. Handy specification links allow you to look up built-in variables and functions quickly.
Breakpoints
Opera Dragonfly allows full management of breakpoints in the Breakpoints panel. It is possible to enable and disable breakpoints quickly as you debug different sections of code. Multiple types of breakpoints are available, including line and event breakpoints. An optional condition can be added to break only when a particular expression is true.
Watches allow variables and expressions to be monitored and evaluated throughout the lifetime of the application.
Network Inspector
Network Log
View all network activity from your page or application in the network log. Each resource is shown in a waterfall view, visualizing the download order, the latency and total download time. You can access all the details of each network request and response, including XHRs and POST requests.
Request crafter
The request crafter allows you to generate a new network request, including the ability to customize the request header fully. This makes it easy to see what content is returned by the server when using a different user agent or browser language.
Network options
Various options are available to ease debugging of network or server-side issues, including the ability to disable all caching and overriding individual or full request headers for the length of the session. A number of request header presets are available that allow you to use the same headers as other popular browsers such as Chrome, Internet Explorer, Opera Mini and many more.
Resource Inspector
Resource list
The Resource Inspector displays a list of the resources used by your page or application. Resources can be grouped together by resource type or by the host from which they were downloaded.
Resource Previews
Custom preview views are available for known resource types. Image files will show a preview of the image, while HTML or JavaScript files will show a syntax-highlighted view, along with line numbers and a search field.
Storage Inspector
Cookie Inspector
The cookie inspector lists all cookies grouped by runtime. Full metadata can be seen for each cookie. Cookies can be edited, created, and deleted to debug cookie-related issues.
Web Storage and Preference Inspectors
If you’ve moved over to HTML5 Web Storage, or if you’re building Widgets using Widget Preferences, no problem — the Storage Inspector can view and modify this data, as well. Working with cutting-edge technology doesn’t mean you have to leave your tools behind.
Error Log
Error List
All parsing errors can be seen in the Error Log. Each error is hooked up to the Resource Inspector, so you can go directly to the file where it occurred.
The Error Log can be filtered to hide errors you don’t want to be notified about, such as vendor prefixes or the IE underscore hack in your CSS.
Console
Full panel and HUD
JavaScript expressions can be evaluated in the Console for quick testing and debugging. And, as it’s such a useful feature for power users, we put the console at your fingertips — no need to switch to the full Console panel; simply bring up a Heads-Up Display Console with the Esc key.
Console and Command Line APIs
You can use the Console API to log debugging information to the Opera Dragonfly Console. The Command Line API gives you a number of convenient commands to speed up debugging.
Utilities
In-Page Color Picker and Color Palette
The in-page color picker allows you to select colors used in the page or to find the average color of a user-defined area. The selected color can be added to the color palette, which can be called up when selecting colors in Opera Dragonfly.
Screen ruler
A 2D ruler allows you to measure pixels on the page. It supports both the x and y axis and snaps to the nearest pixel when zooming in.
Remote Debugging
Wouldn’t it be great if all these features could be used when debugging webpages on a mobile phone or TV? Well, with Opera Dragonfly you can. It was built from the ground up to support remote debugging, allowing you to use Opera Dragonfly on your development machine to connect and debug comfortably instances of Opera running on other devices on your network — your web-enabled TV, set-top box, smartphone or even another desktop computer.
