Do not forget the XRAY bookmarklet. http://www.westciv.com/xray/ If you haven’t seen this, amazing bookmarklet for getting info from CSS elements in a webpage.

Incidentally, in case anyone’s wondering, that was me who placed the irrelevant photo Skellie is completely innocent!

Nice list. But I don’t use Window Resizer because that capability is built into Web Developer. In Web Developer the size list is customizable, so I added the latest widescreen sizes, none of which are listed in your description of Window Resizer. Like 1440×900 (MacBook or other small laptop) or 1680×1050 (generic 20″ widescreen LCD).

Well, actually a lot of the functionallity (DOM inspector, load times, dimentions, html id’s and classes inspector, some other I don´t remember and don’t want to scroll up) of the stated extentions over there is included in Firebug…

Firebug has a special place in my heart…

DownloadThemAll is good, if you need to download a batch of files
http://www.downthemall.net/

I would also like to add Screen Grab! which can grab whole page screenshots (even below the visible area) and Live HTTP Headers which is I think better than Firebug’s Net view.

Just wanted to write what Rian just wrote!

Fireshot - screen capturing and with a set of editing and annotation tools.
http://screenshot-program.com/fireshot/

I agree with YSlow and would add Dust Me Selectors which can be used to look for styles in your styles sheets that are not used in your pages.

Nice list, learned about a few new ones!

If you’re on a Mac, the GrApple themes from http://takebacktheweb.org are a terrific addition.

Inspect This + Firebug = Great!!!

Thanks for the feedback everyone :-). I’m just going to investigate some of the reader additions now.

@ Dustin Brewer: It’s not actually ranked according to usefulness — I couldn’t really decide which ones were more useful. I should have said that though ;-).

Most of the tools you mentioned are all contained within the web developer toolbar.

I have a few more favorites for the list:
- Google plugin - once you get this, googling will never be the same! Adds screenshot preview next to google search results: https://addons.mozilla.org/en-US/firefox/addon/189.
- Del.icio.us plugin - gives toolbar icon to add to del.icio.us: https://addons.mozilla.org/en-US/firefox/addon/3615
- Operator plugin - recognizes microformats and offers features like export card, find on maps, or send to calendar: https://addons.mozilla.org/en-US/firefox/addon/4106.
- Cute Menus - purely cosmetic feature that adds cute little icons to right click features: https://addons.mozilla.org/en-US/firefox/addon/4142

There are some more too… google reader plugin, google mail plugin, download status bar, google calendar…

I didn’t know about #9, MeasureIt. A ruler for Firefox… That’s brilliant! Web Developer is too bloated for my needs but Firebug rocks.

Firebug: https://addons.mozilla.org/en-US/firefox/addon/1843
Web Developer: https://addons.mozilla.org/en-US/firefox/addon/60

if you’ve got ieTab, then firefox view is a nice compliment (back to ff from ie)
LinkChecker (good links are green, broken links are red)
Page update checker (for when you’re waiting for that dns change to hit)
tab mix plus
autoAuth (if you use a lot of sites that have http authentication)

Web developer does have the ability to do a similar function to what aardvark can do. However, it doesn’t do everything that aardvark does. Aardvark seems to deal with highlighting the right elements a little better then web developer does. It also gives you the ability to “widen” the selection to the parent element which can be handy when you are “searching” for a certain element in the site (hit H with aardvark activated to see all of its options). It also allows you to view the source (hit V with aardvark activated) easily of that element which is super handy when dealing with dynamic sites.

The only time I really use web developer’s magical element selector is when I’m trying to find the exact width or other properties of an element. They are both awesome tools in my development arsenal though.

Very nice list, I discovered some new great stuff here.

But item 11 (windows resizer) is not necessary if you already have Web Developer that allows you to do just that, the same goes to item 12 (Aardvak) that can be done with firebug.

You covered almost all my favorite addons concerning web development. I have two further addons that I believe are worth adding here:

Tamper Data
Allows you to tamper any http request and modify headers and all request variables (get and post). Perfect tool for security testing, especially for forms.

Live HTTP Headers
Provides all header information and information about all requests made for a specific webpage. Great tool for analyzing page contents and checking caching settings.

What’s the hottie’s name?

Absolutely fantastic post, the FTP plugin is the one I’m now most using. Thanks very much

Firebug is the best of them, the others you can get away and live without BUT Firebug???? No way!!

NOTE: here’s a great page for cutting away chaff in one’s extension list…

http://kb.mozillazine.org/Problematic_extensions

NOTE: one of the extensions in the above list is listed… with a suggested replacement.

IETab -> IE View Lite

One of the useful plugins I have found is the Foxmarks Bookmark Synchonizer. I work on three different computers at different times and it has come in handy allowing me to keep my bookmarks synchronized. It doesn’t help with the usernames and passwords of the sites you save in them, but that is good for security.

https://addons.mozilla.org/en-US/firefox/addon/2410

@ Timothy Diokno: No, I meant FPT… It’s a new kind of file transfer ;-).

Good eyes on that one… keys must have got a bit jumbled.

A great list, but Web Developer toolbar has many of the features of other items on your list: ruler, window resizer, and so on; making it unnecessary to also add a few of those additional extensions. It’s an incredibly powerful extension that absolutely changed the way I get work done.

This is nice one- I used it already in my Firefox browser, awesome list right there.

I’ve found that a few of the extensions like measureIt, window resizer and ardvark are quite redundant when using Web Developer toolbar, as the toolbar includes most of they’re features, albeit these implementations may not be specialised, I think it’s worth noting.

1. FireFTP - better learn to use a regular ftp client, and leave the browser to it’s browsing stuff. With a good ftp client you get background uploads, sftp, ssh. Lean to use putty and command line if you start using replication or other ftp more complex related issues.
2. ColorZilla - this ain’t essential
3. IE Tab - not necessary, you better test in IE6 and IE7, nothing is like the real bug itself.
4. Firebug - one of the best - has everething you need, has some bugs with javascript pages and sometimes you have to deactivate it in order to reload the pages.
5. Load Time Analyzer - is included in firebug and in webdeveloper
6. Greasemonkey - not really needed, unless you are javascript freak, javascript tools are included in the 2 mentioned previous
7. Web Developer - one of the best with firebug
8. View Source Chart - not required - html tools are included in the 2 mentioned previously
9. MeasureIt - subtle and usefull. Forget it!
10. HTML Validator - included in the 2 mentioned previously
11. Window Resizer - idem
12. Aardvark - included in webdeveloper

I think you guys like to have a lot of things in list. Mozilla with 12 or more plugins starts lagging. And more when bad plugins are starting to get into conflicts. Neither of these plugins are really supported so try to keep the plugin thing low.

I do recomend only 2 of all this list: the firebug and the webdeveloper bar. Happy debugging!

My favorite is
http://www.attari.net/index.php?My_space…:Firefox:Essential_Firefox_Add-ons