I find that in order for my Firefox browsing experience to feel complete on any computer that I’ll be using for extended periods of time (work, home, etc.), I need to install a certain set of add-ons for my development, design and display needs. I forgot to take the time to actually do this for the first few months after I purchased my laptop, and as soon as I began doing anything productive on her (like creating and testing this website, for example!), I suddenly felt annoyed and confused. Below are the things I installed and will continue to install to make my Firefox experience feel whole again.

1. Firebug
   My favorite add-on. This little tool has helped me on things from major CMS skinning projects at work to understanding the styles associated with cool new site designs I find. Firebug is a very comprehensive HTML and CSS manipulation tool that allows one to tweak CSS in a live fashion and see the changes in the affected site instantly. It is also a good inspection tool just to see which styles are controlling the appearance of certain elements in any given area. There are many more aspects to the app than just CSS-centric uses, but this is mainly what I use it for. The only downside is a known bug that sometimes causes the Tab and Enter keys to stop working in Firefox after extended use, but the Enter issue can be fixed by holding Shift and then pressing Enter. I find it well worth the annoyance when developing and troubleshooting sites, though.

2. Web Developer Toolbar
   The Web Developer Toolbar add-on is a more well-rounded and multi-functional tool for website development which I use for things like displaying image dimensions, validating code, outlining CSS elements and blocks, and testing load times. It can basically do almost anything you’d want with the information of a webpage. It includes CSS functionality similar to Firebug but offers additional tools as well. I think they make a good set.

3. Colorzilla
   As a web designer, I need to know what colors are being used in a webpage. If I don’t want to take a screenshot and then sample the color in Photoshop (and please tell me who does) or dig through the CSS, then this is a quick way to match colors and get the HEX/RGB values quickly. And really, it just makes you look cool when you whip it out in front of someone who doesn’t do a lot of web-heavy design stuff.

4. MeasureIt
   Okay, so you don’t really need this add-on since the Web Developer Toolbar has a built in function for measuring under Miscellaneous/Ruler…but I am so used to looking for the little ruler icon in the bottom left of my window that I would feel weird not using this incarnation. Just a handy little tool to measure the pixels of any given layout on a webpage.

5. Greasemonkey
   I find that there is always some Facebook or other random script I want to install to extend the functionality of a website I come across. In order to do that, it’s usually necessary to have the Greasemonkey JavaScript handler installed. Plus, it puts a cute smiling monkey icon in the bottom right of your window, and who wouldn’t want that (but if you click to disable him he’ll sport a frowny face at you, so watch out!).

And, while not an add-on per se, what web browsing experience is complete without checking del.icio.us about 100 times a day to see what the latest cool stuff online is that everyone else is bookmarking? I, for one, am all too guilty of such pleasures…

Do you have any additional suggestions to fill in gaps I may have missed? If so, feel free to share them here!

Tags: add-ons, colorzilla, css, firebug, firefox, greasemonkey, html, measureit, testing, web developer