By: Michael Boucher

So I was setting up Firefox on a laptop that I don't use on a regular basis and realized that there are a number of add-ons that I use on a regular basis. I also realized how useful and how much easier they make everyday tasks. Please note that this is by far not an exhaustive list of the top Firefox add-ons. If you feel something missed the cut or there is a better alternative to any of the add-ons I've listed here please feel free to post them in the comments.

Seriously. How did I ever get by without these first two gems? These two add-ons compliment each other very well and I use both extensively when troubleshooting/testing projects.

Top Pick #1: Firebug

If you do any level of web design or development, especially Flash/Flex in particular, Firebug is a must have. Firebug allows you to "inspect" HTML elements on the page. As you mouse over DIVs, tables, paragraphs etc. the block highlights. When you click the corresponding HTML is highlighted in the Firebug HTML inspector window, which is conveniently organized with code collapse. There is also a CSS inspector that shows what CSS rules are applied to the HTML element. You can also view the CSS and Javascript on the page as well.

The main feature I use in Firebug is the network request viewer. It allows you to view all files requested by a web page or Flash file (SWF). You can view headers and sort network files by media type: All, HTML, CSS, JS, XHR, Images, Flash. I get the most use out of this feature when working with "behind-the-scene" files in my FLash projects such as crossdomain.xml files, video, externally loaded SWFs , video, images and audio. You can quickly and easily see if there is a problem with the load such as a 404 error etc. You can even right-click the file and open it up in a new tab to view it.

Top Pick #2: Web Developer

This little powerhouse of an add-on is loaded with useful features that will make troubleshooting/testing your web projects a breeze. Web Developer allows you to disable CSS, Javascript, Cookies, Images, Pop-up Blocker, Referrers, page colors, meta redirects and more to see what your web page will look like in "lowest common denominator" browsers. I use this feature to make sure my CSS/Javascript isn't going to render my web site useless if somebody is browsing from an older system or with these features turned off. Web Developer also lets you clear out cookies with one click which is nice when testing web applications. Other useful features are the ability to convert form methods (POST-to-GET and GET-to-POST). Which comes in very handy when the developer of a search application doesn't consider that people might want to bookmark their searches and sends search queries via POST. Of course the search application has to accept GET requests so it doesn't always work but I've had some decent success with it. Some of the other useful features are measuring page elements, displaying element attributes/css etc. There are also built-in validators for XTHML, CSS, Section 508, feeds, links, and WAI; a Speed Report for measuring how fast your page loads (yes, mine is heavy); and quick toolbar access to Firefox's Error Console and Java Console.

Top Pick #3: Flash Tracer

Flash Tracer provides a Firefox sidebar that displays output from the Debugging version of Flash Player. This includes run-time errors and warnings, as well a trace() calls within Actionscript. Excellent tool for remote debugging.

Top Pick #4: Del.icio.us Toolbar

Okay, so I was never a big fan of Yahoo toolbar or Google toolbar but I must say the del.icio.us add-on gets a daily workout from me. I actually prefer it over the native bookmarks in Firefox. I can quickly tag sites I've visited and add them to my del.icio.us account straight from Firefox. On Windows I have a del.icio.us sidebar which displays all of my saved bookmarks along with all my tags so I can quickly search and sort to find what I need. I haven't come across this feature on the Mac yet, though I only did a quick look. Clicking the del.icio.us logo in the toolbar, which displays the sidebar on Windows, takes me to the del.icio.us web site when clicked on the Mac. I can also quickly edit bookmarks through the add-on as well. Best of all, since it makes using del.icio.us so much easier I now have easy access to my bookmarks anywhere I go. Which is the point right?

Top Pick #5: Palette Grabber

Palette Grabber does just that, it grabs the color palette of a page and allows you to save the palette for use in Adobe Color Palette (.aco), Flash Color Palette (.clr), Adobe Fireworks Color Table (.act), GIMP (.gpl), Mac OS X (.clr) and Paintshop Pro Palette (.psppalette).

Top Pick #6: ColorZilla

ColorZilla allows you to use an eyedropper tool pretty much anywhere on the screen, even outside of the browser. Doesn't work on Flash content unfortunately. Flash content seems to be an issue with a
number of Firefox add-ons that rely on screen capturing.

Top Pick #7: SEOQuake

SEOQuake provides quick and useful information about the pages you are visiting. It displays Google Page Rank, Google Index, Yahoo links, Yahoo link domain, MSN Index, Alexa rank, Web Archive age, del.icio.us index and provides one-click access to view WHOIS information for the domain. There are also tools for checking keyword density, Internal Links and External Links. It also integrates with Google, Yahoo and MSN search results and adds this same information after each result. I turn this feature off because it slows things down a bit but it is easy enough to turn back on when you need it.

Top Pick #8: ScribeFire

I'm actually using this one right now to write this post. ScribeFire allows you to quickly and easily post to your blog straight from Firefox. Have you ever been surfing the web and come across an article you just had to blog about? Just click the ScribeFire button and a full-featured text editor pops up. Drag in quotes from the article, add trackback URLs, add Technorati tags and more. Supports multiple blogs too, post to one or post to all of them. Built-in support for WordPress, TypePad, LiveJournal, Windows Live Spaces, Performancing, Jeeran and "Custom Blog."

Top Pick #9: Fireshot

Fireshot allows you to create a screenshot of an entire web page (or just the visible area) and then add notes and edit. This add-on is great for communicating design changes, bug fixes or grabbing images of sites you've designed for your portfolio. There are also plenty of options for capture, copy, save, edit, e-mail, upload or open in external editor. One downside to this add-on is Flash content is invisible to the add-on so it doesn't show up, going to still have to go the old route on that one.So that about wraps it up. If there are any Firefox add-ons you use and find particularly useful please feel free to add them in the comments. Please bare in mind though, blatant advertising/marketing comments will not be approved so please don't waste my time or your's.