Chris Pederick's Firefox extension, the Web Developer extension, does almost anything you can imagine will help you get under the skin of a website. Since its release in June 2003 it has become the standard in any web developer's tool box because it does so much that everyone can find a use for it. It has so many options that I haven't used all of them, but I have my favourites and the ones I use daily and I'm sure that there are things that I would use if I had the time to find them!

So What Does It Do?

The toolbar is massive, there are menus with sub menus and sub menus, Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Tools, View Source and Options are the top levels. I would go through each one but that would take forever, so I'll let you know a few of my favourite uses of the toolbar. If you use the extension, please let me know if I am missing out on any really useful parts in the comments.

Disable Anything!

Great for testing your site against all sorts of user set ups, you can disable images, JavaScript, CSS, the cache, cookies, Java and the list goes on. I particularly like the quick ability to turn off JavaScript to test that a site is accessible without JavaScript enabled.

Display Anything!

You can display anything from image alt attributes to information about any element (much like XRAY). I like the quick access that you have to view all of the CSS or all of the JavaScript for a page with just a couple of clicks, especially when dealing with code written by others.

Outlines

It's remarkable, but being able to draw an outline around any element, group of elements or all elements, can really help in debugging style sheets. Seeing where the element is on the page by surrounding it with a red border, just by hovering over it is much easier than adding debugging code to your style sheets.

External Tools

The Tools menu allows you to use external validators and other measures to test your site. You can even add tools to the list, though quick links to W3C validators are sufficient for me at the moment.

Edit On The Fly

Editing the CSS or HTML and seeing the results instantly can help enormously when developing. CSS editing is my top use for the Web Developer extension.

There are quite literally hundreds of uses for the Web Developer extension, my thanks must go to Chris Pederick, I hope he continues to maintain this fantastic bit of kit for use in Firefox as long as I'm developing.

If you haven't used the extension, install it now, if you do, what are your favourite functions?