Web Developer Tools: Web Developer Extension

Posted on Tuesday, December 18th, 2007

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?

If you enjoyed this post, why not subscribe to Unintentionally Blank

Posted in Tools | Trackback | Leave a comment


Comments

  1. 1December 19th, 2007 at 3:38 pm

    Laura Says:

    Good tip! For me, however, it’s probably too advanced.


  2. 2July 6th, 2008 at 5:35 pm

    Andrei Floris Says:

    I would highly recommend this extension because it has so many features that are unbelievably useful and goes REALLY DEEP into what makes up your page. I love the new features they added. I never would have thought you could design webpages with these kind of tools to help you out, especially coming from your browser.


  3. 3September 27th, 2008 at 9:06 am

    Webmaster Says:

    The disabling feature will be really useful.
    I think in the end there are not much effective ways to do it, so this can help.


Leave a Comment