'The Developer Briefcase' and other neat Opera extensions for developers

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
• Highlight divs 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
• 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.
• 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!