Toolbars
Menus
Panels
Speed Dial
Bookmarks
Extensions
Opera Widgets
Notes
Geolocation
Opera Link
Opera Turbo
Opera Unite
Content blocking
Fraud and Malware Protection
BitTorrent
Display modes
Developer tools
Preferences
- General preferences
- Forms
- Searching in Opera
- Webpage preferences
Advanced Preferences
- Tabs
- Browsing
- Notifications
- Content
- Fonts
- Downloads
- Programs
- History
- Cookies
- Security
- Network
- Storage
- Toolbars
- Shortcuts
Skins
Keyboard shortcuts
Using the mouse
E-mail and news
Feeds
Chat
Dialogs
Auto-update
Backing up Opera

Developer tools

Press Page Down and Page Up to switch slides.

Opera includes several tools to aid web developers, most importantly Opera Dragonfly, a tool that enables remote debugging of webpages.

The developer console is a tool for analyzing and/or interactively modifying a webpage during development or debugging, while the source viewer is a simpler tool for examining the source code of a webpage, and making quick changes.

Opera Dragonfly

Note: to use Opera Dragonfly, JavaScript must be enabled.

Opera Dragonfly is a JavaScript application used to debug local and remote webpages. To open it, select the menu item Page > Developer tools > Opera Dragonfly. The user interface contains seven tabs:

a DOM tab, for HTML and CSS debugging,
a script tab, for JavaScript debugging,
a network tab, to study the loading of resources,
a storage tab, for offline applications,
a console tab, for error viewing,
a utilities tab, for managing colors,
and a settings tab.

Opera Dragonfly is still in development. For more information, see the following articles:

The developer console

Like the other JavaScript applications on Dev.Opera, the developer console can be dragged and dropped onto any Opera toolbar. When you open the developer console, a small window will appear on top of the webpage to be analyzed, with five tabs: DOM, JS, CSS, HTTP, and About.

Note: to use the JavaScript applications on Dev.Opera, pop-ups must be enabled.

The developer console opens in the DOM tab, with the list of nodes collapsed under "document". Click on the plus sign to expand the list. When you click on a node, the webpage will flash briefly to indicate the region associated with this node.

Alternatively, clicking anywhere on the webpage will open up a list of DOM nodes, with the node relevant to that region of the page highlighted. To find the relevant region, press and hold the Shift key while scanning the page with the mouse.

The following are key features of the DOM tab:

"Search" enables you to search the DOM tree for any class of nodes using standard CSS selectors, for example p > a to indicate a parent-child relationship, or #menu to find an id.
"Snapshot" gives a complete DOM snapshot.

The developer console can be used to interactively modify a webpage. The "Remove" button in the DOM tab permits removal of nodes, but also any CSS property can be edited from within the CSS tab, after pressing the button "Show rules" for the appropriate style sheet. The result of the changes is displayed instantly, and can be exported for later use.

A more detailed discussion of the developer console can be found on Dev.Opera.

The source viewer

Opera includes a simpler tool for analyzing and modifying webpages, the source viewer. If you want to have a look at the source code of the current webpage, go to Page > Developer Tools > Source, or press Ctrl+F3, or right-click the page and select "Source".

The source viewer opens in a new tab on your tab bar, and has syntax highlighting to give you a better overview of the source. If you want to edit the page, you have two options:

Save to cache and see your changes applied immediately by clicking "Apply changes", or pressing Ctrl+R.
Save to a location of your choice by clicking "Save", or pressing Ctrl+S.

Note that if you are editing a locally saved document "Apply changes" will permanently save your changes.

If you prefer to use an external program for source viewing and editing, you can specify this in the programs preferences.