Colin Cochrane

Colin Cochrane is a Software Developer based in Victoria, BC specializing in C#, PowerShell, Web Development and DevOps.

7 Firefox Add Ons For Web Developers

Firefox add-ons can be one of the best set of tools a web developer can have but with so many out there it can be hard to decide on which ones are the best for you.  I was reluctant to post this at first, given the countless other blogs out their who have posted their own add-on lists, but felt this would be of value for those looking for recommendations that weren't posted 2-3 years ago.  I avoided going for the "Top 841 Add Ons Every Web Developer Must Have!!!!" angle, as this isn't a top list.  It's simply a list of my personal favourites because, as a guy who's known around the office for having too many add-ons installed for Firefox, I've definitely used a lot of add-ons, some which were fanstastic, and some which left something to be desired.  Over time I managed to pare down my pile of add-ons in to a core set that all save me a considerable amount of time, and also share the same basic qualities:

  1. Easy to Use
  2. Not Obtrusive
  3. Light-Weight
  4. Accurate

Ease of use is important to saving time (an add-on isn't going to increase productivity if it takes just as long to figure out how to use it, configure it, or even just to use it).  Not being obtrusive is important because I want my add-ons to be un-noticable other than a toolbar or icon unless I actively want to utlilize it, and this ties in with being light-weight, as a light-weight add-on is not going to cause any decreases in performance.  Finally, accuracy is imperitive because I have to be able to trust what information the add-on is providing me with.

With those qualities explained, I'll get on to the list.

1) Firebug

For web development and/or design if you are going to install one add-on, this is the one.  Firebug lets you view, edit, debug and monitor HTML, CSS and JavaScript live on any web page.  I use Firebug extensively every day to test layout changes before I make them, to debug script errors, navigate through a page's markup with ease, monitor all the HTTP requests made for a given page, and more.  It also has some incredibly useful features like a diagram that shows all the measurements for dimension, margin, padding, border, etc... for a selected element, a list of applied styles for a selected element, and the "inspect" feature that lets you simply click on the part of a web page you want to analyze and have Firebug automatically get all the details on it for you.


2) Web Developer

Web Developer is an add-on that provides a toolbar and menu that gives you access to a host of different development tools.  Just one of the 12 toolbar buttons gives you the following options:

There are tons of other useful tools included with Web Developer, including some of my personal favourites:

  • Outline different HTML elements (with ability to display element type and custom outline colour)
  • Show/hide/outline images with oversized dimensions, missing alt attributes, adjusted dimensions, missing dimensions, etc
  • Show image paths, alt and title attributes, sizes
  • Disable javascript
  • Disable CSS styles (external, interal, inline, etc..) 

3) Greasemonkey

One of the most popular add-ons out there, Greasemonkey simply lets you run custom JavaScript against any page you want.  There are thousands of Greasemonkey scripts out there for those who don't want to create their own, offering enhancements such as numbering search results in Google, MSN and Yahoo, killing pop-up ads, and pretty much anything else you could think of.

4) HTML Validator

A must have if you care about W3C validation.  HTML Validator displays an icon in the bottom of your browser indicating if the current page validates against its DOCTYPE, as well as the number of errors and warnings.  You can configure the validation method it uses (HTML Tidy, or SGML which is used by the W3C Markup Validation Service), and it also displays a list of errors and highlights them in when you view the page's source.

5) MeasureIt

Simple and easy-to use, MeasureIt is an add-on that, when activated, displays an overlay where you can drag and position a dynamic ruler so you can measure dimensions on a web page.

6) Session Manager

Session Manager is an incredibly useful add-on that tracks your Firefox sessions and allows you reload older sessions or recover a crashed session.  If you're like me and usually have the same websites opened in different tabs, this add-on will make your life a lot easier.

7) QuickRestart

QuickRestart is a simple and convenient add-on that simply adds a button to your toolbar that restarts Firefox, just like when you install an add-on or upgrade.

Hopefully you will find these add-ons as useful as I have.  I'll also be posting a list of useful add-ons for Internet Explorer later this week as well.  I encourage everyone to comment with your own recommendations for Firefox add-ons that you find useful for web development.


Comments (10) -

  • Niko Bellic

    11/26/2007 6:12:35 AM |

    Measure it is not needed, Web Dev has a ruler feature in built. This is the 2nd list that I've seen that lists the ruler type addon, but web developer has this.

  • Colin Cochrane

    11/26/2007 6:22:36 AM |

    While Web Developer does have the ruler I prefer MeasureIt's implementation.

  • Bijay Rungta

    11/26/2007 6:37:08 AM |

    I either had or installed all the adons except session manager. not sure if I need it.

    any idea about a password manager from where I can search my passwords by matching the entered text by username, website name, password etc??

    It sucks when I want to find a saved password either because I mistyped the password or want to see the password or something like that..

    specially when you mistype or enter a wrong password and choose to save it in the popup it causes issues..

    (FF3 have improved this you get to choose whether or not to save the password after you land on the logged in page successfully and without an annoying popup.. with a drop down bar..)

  • sumanth krishna

    11/26/2007 8:38:58 PM |

    I agree with you, though WebDeveloper having the measure it stuff, even I feel comfortable with MeasureIt extension.
    But WebDeveloper also has various validators supported under Tools.
    I strongly feel that Y-slow should be included here, if this article is intended for developers (
    YSlow gives you:
    * Performance report card
    * HTTP/HTML summary
    * List of components in the page
    * Tools including JSLint

    sumanth krishna

  • Umar

    2/25/2008 10:32:43 PM |

    I dont see the use of Measureit! when you have a rule already in the web developer extension.

  • Colin Cochrane

    2/26/2008 5:42:41 AM |

    sumanth krishna :

    I agree 100%.  YSlow is a fantastic tool.  I've started using it quite extensively over the past month.

  • shidiq

    1/1/2009 9:42:09 PM |

    Nice posting

  • Asheville dui attorney

    7/19/2011 2:42:02 AM |

    Thank you for this valuable information. Now i clearly understand the subject and hopefully can manage well with the implementation.

Pingbacks and trackbacks (2)+

Comments are closed