Documentation last updated: 15 January 2013
Opera Dragonfly is a fully featured development and debugging tool integrated into the Opera browser. It requires no additional installation or setup and works across most of Opera’s browsers – on desktop, mobile phones, tablets and even web-enabled TVs and set-top boxes.
Opera Dragonfly is an HTML5-based web application which is tightly integrated with the Opera desktop browser. It can be launched in three main ways:
When debugging markup or styles, the quickest way to launch Opera Dragonfly is to right-click on the element or area of interest and select
Inspect Element from the context menu. This opens Opera Dragonfly with the element selected in the DOM Inspector.
The keyboard shortcut to launch Opera Dragonfly is Ctrl+Shift+I on Windows and Linux, and ⌘+⌥+I on Mac.
On Windows and Linux, click on the Opera menu in the upper-left-hand corner of the Opera browser interface and select Page → Developer Tools → Opera Dragonfly.
On Mac, select Tools → Advanced → Opera Dragonfly from the menu bar.
The windowing controls can be found at the top right of the Opera Dragonfly interface.
The first icon of the group is for selecting the debugging context. This switches the tab, window, or Opera extension that Opera Dragonfly attaches itself to into debug mode. The default debugging context when opening Opera Dragonfly is the currently active tab. It may be necessary to switch the debugging context when switching tabs, debugging a page on a remote device, or when debugging an extension.
The debugging context selector lists all available contexts to which Opera Dragonfly can connect. Selecting a different context will disconnect Opera Dragonfly from the current debugging context and attach itself to the new one. If the connected debugging context is not the currently active window or tab, an option at the top of the list will be available to quickly switch to that context. It is also possible to reload the context from this menu. Reloading can also be done from the regular browser reload button. This is needed for Opera Dragonfly to receive information about scripts, resources and errors. The DOM Inspector functions fine without reloading.
By default, Opera Dragonfly is docked to the bottom of the browser window. For people with a second or larger monitor, there is a detached mode, which allows Opera Dragonfly to be placed elsewhere on the screen in its own window, or moved to the other monitor entirely, freeing up work space. Clicking the Detach button switches between the two modes. The state is remembered when the window is closed.
The final windowing control button is the close button. This button closes Opera Dragonfly. The Opera Dragonfly shortcut can also be used to close the window if it is already open.
Each tool replaces the area below the application toolbar with its own UI. Each tool is generally split into several sub-panels, which can be accessed by clicking on the panel’s tab.
There are a number of UI features common between all the different tools:
A debugging context often has multiple scripts (including inline scripts and
eval) or documents (such as documents embedded using the
iframe elements). These documents or scripts can be selected using the document selector in the main panel’s toolbar. Scripts are organized under the parent document from which they are linked or defined. Selecting an entry in the document selector will display that document or script in the script panel. As the console is global, if there is more than one script it also needs to be selected from its own document selector.
Editing content is done consistently across the application. All editing commands can be found in the context menu when right-clicking any editable content. Double-clicking also enters editing mode; Enter submits the edit in single-line edit mode, and Ctrl+Enter / ⌘+Enter submits an edit in multi-line edit mode. The Esc key cancels the edit. Full details on editing can be found in the relevant documentation section for each tool.
Throughout the application, it is possible to access the official specification for features such as DOM properties and functions, ECMAScript objects, CSS properties, and HTTP headers. The spec can be accessed by clicking the specification option in the context menu of the relevant feature.
There are three global features that can be accessed when using any tool in Opera Dragonfly. The buttons to access these features are found to the left of the windowing controls in the application toolbar.
All settings for the application can be accessed from the settings overlay. This can be accessed from the cog wheel button. Most settings take immediate effect.
The Remote Debug feature allows Opera Dragonfly to connect to other instances of Opera, either on the same machine or on a remote device. This is especially useful when working with devices such as mobile phones, tablets, and TVs. Pressing the Remote Debug button opens the connection overlay. For more information see the Remote Debugging section of the documentation.