Firefox Extensions

There are a ton of Firefox Extensions available to help web developers do their job. Here are the ones I use:

Web Developer: I don't use this one very often, but it has a ton of useful options. I mostly use it to turn off Javascript and CSS, or to resize my browser to a certain width.

Firebug: It would be a bit harder for me to do my job without this extension. Firebug allows you to manipulate the code of a page and see the changes directly on your screen. None of these changes are saved anywhere , they will go away when you refresh the page. I like to use it for testing CSS code before writing it into my CSS file (saves time from writing, saving, uploading, refreshing and fixing). It is also a helpful tool for debugging Javascript or jQuery. One important thing to know about the HTML code it shows you: this is the generated code, which is different from the normal source code. So if you have some Javascript written to change an item on hover, you can see the changes that are made in the code as you hover on and off the element.

ColorZilla: A color picker for your browser. Very helpful when creating images that need to match the colors in your site.

MeasureIt: A tool for measuring width and/or height of areas on a website.

Pixel Perfect: Requires Firebug. Overlays an image (like a design comp) on top of your site so you can check how close you are to the design.