I was enlightening a coworker today about all the wonderful and useful extensions Firefox has for web developers. There’s the web developer extension that allows users to easily obtain information about images, classes, IDs, cookies, etc right on the page. It can also outline tables, table cells, and block level elements, making tweaking layouts much easier. There’s ColorZilla, the eye dropper tool for color matching, and MeasureIt, the handy way to get the height and width of something in pixels. I explained to her how helpful the render source extension is when I’m trying to troubleshoot a bothersome CSS layout. It displays all the block level elements in their own color-coded bubbles. This lets me see any accidentally overlapping, nested, or unclosed elements. This I tell her is one of the best reasons to use Firefox.
Imagine my surprise when the newbie to Firefox extensions trumps my holy grail with the discovery of possibly the greatest Firefox extension ever…the format source extension by Felix Ritter. This extension formats the source of any web page like an XML document. Specify elements in the preferences and they become expandable or collapsible with a single click. Concentrating on a single area of code? Collapse all the remaining elements leaving only the ones you want to look at. That’s pretty cool. Want more? You can select any block level element on a page and with a right-click, view the source of just that element. It gets even better however. Mouseover anything in the source and the styles applied to it appear dynamically. I’ve only had it a few short hours but already found it to be immensely helpful. Keep up the good work Felix!
