I know what your thinking, usually these lists come in flavours of 5, 10, 20 etc, so apologies for the random number. The last 2 on my list could technically count as 1 so if reading lists of 7 makes you feel a little unbalanced, you can always close your eyes and pretend.
Anyways, here’s my list of the top 7 developer add-ons for firefox. They make life so much easier when it comes to developing websites and I heartily recommend you check them out.
- Web Developer Toolbar
Adds a menu and a toolbar with various developer tools.
- Html Validator
Adds HTML validation to the View Page Source of the browser. The validation is done by Tidy or a SGML Parser from W3c
- MeasureIt
Draw out a ruler to get the pixel width and height of any elements on a webpage
- ColorZilla
Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.
- IE Tab
Enables you to use the embedded IE engine within Mozilla/Firefox.
- 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.
- YSlow
An extension of Firebug, YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites. YSlow gives you a performance report card, HTTP/HTML summary, list of components in the page and tools including JSLint.