1. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
Adds a menu and a toolbar with various web developer tools.
Tools includes table, div out liner, resizing tool

The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes.
4. MeasureIt
Draw out a ruler to get the pixel width and height of any elements on a webpage.
5. IE Tab

This is a great tool for web developers, since you can easily see how your web page displayed in IE with just one click and then switch back to Firefox.
6. Screengrab
It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.
HTML Validator is a Mozilla extension that adds HTML validation inside Firefox. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
8. Font Finder
Simply highlight a single element (e.g. a paragraph or a strong tag ), right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.
9. ColorZilla

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program.
10. CSS validator
CSS validator ,Validates a page using the W3C CSS Validator.
11. Capture Fox
You can use this tool to capture firefox window or the whole screen and make screencast videos. You can compose tutorials, e-lessons or videos. You can also record your voice.

The article is ver good. Write please more
Some of us even don’t realize the importance of this information. What a pity.