Firefox Extensions for Web Developers

Having recently installed a few new extensions in Firefox I thought I might share my favourite ones:

Always nice to know exactly what content your server is pumping out, but this extension is really useful if you are trying to debug Ajax applications.

Web Developer Toolbar
Absolutely the single most useful extension ever. I always use the Resize tool to check my page designs at a number of different resolutions.

I'd always struggled a bit with Venkman, and quite often did without a Javascript debugger altogether, but this new extension is far more intuitive and easy to use.

A significant chunk of my working life is spent making web applications resemble the websites of potential clients. Used to be I'd have to take a screenshot and then open up Photoshop to use the eyedropper tool to find out what colour page elements are, this makes the whole thing a lot easier.

Although the outline tool built into the Web Developer toolbar is useful it is limited because it can only outline element (it can't select by id or class), this extension lets you easily find out the ID of any visible element on the page.

Handy and non-intrusive, extends the basic console in Firefox so you can filter by event type and source as well as the standard severity.

View Source Chart
View the document source in a containerised and structured fashion. Much easier to spot page structure than with the standard view source, also shows the end results of DOM manipulations.