Posted on 24th Jan, 2008 24th Jan 08
Posted by fran fran

The Best Web-Development Firefox Plugins

There are a metric crap-load of articles to be found which list the best firefox plugins available for web-development and design, but few seem to go into very much detail about what they actually do.

Here’s my list of plugins that I use on a regular basis, along with details of their key features, or at least those which I profess to understand. Hopefully this will introduce you to some new and exciting ways to clog up your browser screen.


Web Developer Toolbar


If you’ve been desperately searching for a plugin which jam-packs your toolbars with so many buttons they literally can’t fit on your screen and so fly out of your monitor and into your eyes, then your prayers have been answered.

I’ve been using this plugin for a year or so now, and don’t feel as though I’ve got terribly far in understanding what it all really means. There’s a couple of mainstay features that I find invaluable and use from day to day, but many remain largely shrouded in mystery (‘Display Topographic Information’ – ‘Outline Links with Ping Attributes’). I remain fearful of finding out what some of the functions do, so I’ll stick to talking about what I’m familiar with.


Web-developer toolbar allows the user to make real-time adjustments to a site’s CSS styling, and enables those changes to be saved as a local copy.

Edit CSS in Web-Developer ToolbarEnabling the option CSS > EDIT CSS will call up an editable text-area, populated with the current stylesheet. Changing any of the CSS classes will instantly modify the on-screen area to reflect those changes. Unfortunately, the down side is that CSS based image values are removed from the screen, and so we’re limited to making non-graphical changes if we want to view them in real time. When we’ve made the changes we want to, hitting the ‘Save’ button will allow us to save the revised copy of the stylesheet to a local drive.

The second feature that I use very regularly is ‘View Style Information’ (found in CSS > VIEW STYLE INFORMATION). It gives the user a simple way by which to view the name, hierarchy and associated CSS styles for any on screen element. Hovering the mouse over a section will indicate where it is positioned within the page hierarchy. Clicking on an element with this tool enabled will allow you to view a listing of associated CSS styles, along with a line number indicating where it can be found in the stylesheet.



MeasureItThis tool gives the user a super-imposed ruler to allow a pixel-based measurement of any area on-screen. Great for checking the dimensions of your project as it takes shape, and how large or small a margin should be.


Allan Jardine – Design

DesignThough not strictly a Firefox plugin (it’s compatible with most next-generation browsers), this suite of Javascript tools give the user access to super-imposed, interactive graphics such as a pixel ruler, overlaid grid (for keeping your design in line), and crosshair (great for detecting on screen elements which don’t quite line up). Rather than installing any plugin, you simply have to drag a javascript bookmarklet to your toolbar, and click on it whenever you want to load the tools. Genius!



ColorzillaColorzilla gives us a straight-forward and fast way of finding out the hex values of any colour on-screen, allowing the user to copy it to the clip-board in a variety of formats (RGB, Hex). The plugin also features a Photoshop-style colour picker which quickly allows us to modify a page’s entire colour palette, when used in conjunction with the Web Developer Toolbar’s live CSS editing function.
Another useful way to run these plugins in tandem is to detect an on-screen colour’s hex value using the eye-dropper, and search/replace that value with the Web Developer Toolbar’s CSS search function, speeding up the process of replacing all instances of a colour.

Really worth a download, this has saved me hours!


HTML Validator

HTML ValidatorThis tool has single handedly helped me to adhere to web standards in a more consistent way. It has also started to teach me where I usually leave errors to such a level that I rarely create them any more. A simple but sometimes infuriating indicator in the bottom right of your browser screen will tell you whether the current page is valid XHTML, or otherwise. If your page is not validating correctly, the plugin will provide a modified source view of the page, which will guide you to where the problems lie, and more often than not – tell you what the fix should be.


IE Tab

IE TabThis little utility is great for quickly switching views between the Mozilla or Internet Explorer engines, from within Firefox. It cuts down on effort, and as such you’re more likely to check on how things look in IE 7 on a more regular basis.


IE 6 Standalone

Internet ExplorerI realise that this isn’t a firefox plugin, but it really does deserve a mention! As web developers and designers, however much we don’t like it, we’re going to be stuck with the slowly fading ghost of Internet Explorer 6 for some time to come. Rather than using Browser screen-shots services, I’d recommend downloading the standalone version of IE 6 from Click here to go to their archive. For IE 6, download There’s no messing around with the innards of your operating system to get it running at the same time as IE7, and it will save hours in development time.


That’s all for now! If I’m missing out on anything glaring, do drop me a comment below and I’ll update the page. If youfound this article useful, let me know and I’ll be sure to write more in future!

Tags: , , , , ,

  • Tenuously Related Posts: