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
classnames of the elements on the page
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
- 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
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
idattribute and shows the
idwhen 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.
I hope developers find these extensions useful, and of course, feel free to make more great extensions yourself too!