“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! ;)