Opera developer tools - Opera Developer Community

These are developer tools that have been used internally for some time by Web Application developers at Opera Software. These tools are meant as early previews, and should be considered alpha quality software. They are provided on an as-is basis, in the form of buttons that can be dragged to any Opera toolbar.

All of the tools should work in Opera 9.0 and later.

DOM Console

The Live DOM Console allows a developer to work on and inspect various aspect of a page:

DOM

Interactively inspect the generated document tree for a page

Computed styles

Explore the computed styles for any given element in the document

Property inspection

Inspect properties of any element in the DOM

Element metrics

Visually inspect and explore the geometry of elements in the DOM: Width, height, margins, and padding.

Attribute inspection

Inspect attributes that are set on individual elements in the DOM.

Node removal

Any node in the document can at any time be removed from the document tree to ease debugging and clarity.

To install this tool, click the following link, or drag it into any Opera Toolbar: DOM Console.

CSS Editor

The CSS Editor provides an live view of all stylesheets attached to a page. Further, the tools allows live editing of a page's CSS, including modifying, adding and deleting style rules on-the-fly. These edited stylesheets can further be exported for later use.

To install this tool, click the following link, or drag it into any Opera Toolbar: CSS Editor.

DOM Snapshot

The DOM Snapshot tool allows you to inspect the source of a page, as parsed by the browser.

To install this tool, click the following link, or drag it into any Opera Toolbar: DOM Snapshot.