Opera Dragonfly is THE developer tool to use in Opera, but in addition to its built-in feature set there are quite a few browser extensions that can make debugging and development even easier.

In light of that, we've just recently released The Developer Briefcase – an extension for web developers to check out web pages in more detail. With it, you can:

Check the id and class names of the elements on the page

and names of the elements on the page Highlight div s on the page

s on the page Highlight any new HTML5 elements

Highlight any deprecated elements on the page

Check the page for images with empty or absent alt attributes

attributes See viewport size info

Do a WAVE accessibility check

View the page in the Opera Mini Simulator

Highlight form information

Outline headings, tables, forms and various inline or block level elements

See how the page appears without stylesheets

Shorten the URL with TinyURL or bitly

Validate CSS and Feed information

View WHOIS and Alexa details

and much more

Note: Once you install the extension, make sure to refresh any already open pages for the extension's JavaScript to be applied properly – otherwise the menu options won't work. Any pages opened after installing the extension will have no such issues though.

Of course, there are many other neat Opera extensions for developers – here are some of our favourites:

YSlow: YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages.

Layers: Provides a topographic view of the web page and visualizes how its different elements are layered on top of each other.

Edit the Page: Edit the Page like a WYSIWYG editor. Especially useful if you're doing translations and you want to see if the translated word will fit properly in place of the original words in the design.

ShowIDs: Outlines all elements with an HTML id attribute and shows the id when hovering over them.

attribute and shows the when hovering over them. OMeasure!: Provides a ruler-like measuring tool for web developers ... quite handy!

Resize Me: This resizes the currently viewed page – useful for testing how it will look on various screen sizes.

HTML5 outliner: Displays an outline of the current page based on the HTML5 outlining algorithm.

Readable Javascript : Makes JavaScript more readable by colorizing and auto-formatting it. Quite cool.

I hope developers find these extensions useful, and of course, feel free to make more great extensions yourself too! ;)