“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
andclass
names of the elements on the page - Highlight
div
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 - 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 theid
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! ;)