Over the past few years, I’ve accumulated a collection of add-ons for FireFox that I genuinely use almost daily to do my job. I’ve seen other “top development add-on” lists, and I don’t really agree with all of the items. With that said, here goes my take:

1. Console²
   http://console2.mozdev.org/index.html
   
   Allows you to filter the JavaScript Console by type, language and context, compared to the way the console works by default where it just shows everything all in line. You don’t really notice it, because it should’ve been built into Firefox to begin with.
2. Firebug
   http://www.getfirebug.com/
   
   Adds an full JavaScript debugging solution to Firefox and much more. Also helps debug your AJAX applications, because it has a network activity view to show you the ins and outs of your page. I can’t live without this add-on, really. Being able to set a breakpoint in my JavaScript and fully explore the DOM/variables while debugging is immensely helpful.
3. HackBar
   https://addons.mozilla.org/en-US/firefox/addon/3899
   
   Just recently found this. It adds a toolbar to Firefox that helps you test for security problems with your app, mainly with querystrings/URLs. Gives you tools to automatically increase/decrease values, test for SQL injection, etc.
4. HTML Validator (based on Tidy and OpenSP)
   http://users.skynet.be/mgueury/mozilla/
   
   Another “core” add-on I use, that I couldn’t live without. This one adds native HTML validation inside of Firefox. You can use different types of validation, and choose how strict it is with your code. Even checks for accessibility problems. Use this and find out just how syntacticly bad your HTML really is.
5. LiveHTTPHeaders
   http://livehttpheaders.mozdev.org/
   
   Like the name implies, shows the live HTTP headers of your page, underneath the “View Page Info” section of Firefox, or via a pop up window in “realtime”. Lets you also change the headers and re-send the request. Kinda like Fiddler, but built into Firefox.
6. Save As Image
   https://addons.mozilla.org/en-US/firefox/addon/3408
   
   Again, like it implies, it saves a webpage as an image. Useful for generating “thumbnails” of site designs, bug snapshots, etc.
7. Server Spy
   http://jacquetc.free.fr/mozilla/exts/ServerSpy/
   
   Shows (on the bottom of the browser) what web server software the current domain is running. Useful for planning out what web capabilities you’re working with when initially meeting with a client.
8. ShowIP
   http://l4x.org/frontpage/showip
   
   Shows (on the bottom of the browser) what the current web server’s IP address is. You can then query that IP address with numerous lookup services to find history, etc. Useful for knowing what server you’re on, or figuring out a domain/subdomain’s structure.
9. URLParams
   http://urlparams.blogwart.com/share/index.php
   
   Adds a sidebar to Firefox that makes it very easy to edit GET (querystring)/POST (form) variables, as well as change your referrer, and submit them again.
10. View Rendered Source / View Source Chart
    http://jennifermadden.com/scripts/ViewRenderedSource.html
    
    Visually displays the source code of your page, using literally “blocks” of varying colors to represent each element in your code. Each block is collapsable as well. Gives you a quick way to see how deep an element is nested, where it’s nested, what tags are used, etc.
11. Web Developer
    http://chrispederick.com/work/web-developer/
    
    One of the most important add-ons. Adds a toolbar to the top of Firefox that has almost everything a web developer could ever want/need for tweaking pages, tracking down problems, editing CSS on the fly, etc… This toolbar has it all. Really, go check it out now and install it. If you don’t install anything else on this page, you need to at least install this one.
12. Autofill Forms
    https://blueimp.net/mozilla/
    
    Like it says, it automatically fills forms! Useful for filling out forms with test data repeatedly.
13. Cache Status
    https://addons.mozilla.org/en-US/firefox/addon/1881
    
    Adds a section to the bottom of Firefox showing current memory and cache usage, and allows you to right click and reset/clear the caches (RAM/disk.) I use it just to have that cache clearing shortcut.
14. IE View Lite
    https://addons.mozilla.org/en-US/firefox/addon/1429
    
    Adds a right-click menu to your page that brings up the current URL in Internet Explorer. Useful for quickly jumping to “the other browser” to see what it looks like over there.

P.S. — An e-mail from Mike at HireAHelper.com prompted me to write this list. Check out his site if you need moving help, landscaping or general help!

Worked my booty off this weekend to get Chris’ new design up for Flawd Clothing. I suggest you all check out the site and let me know what you think— from a technical and/or design, etc. point of view. And buy some shirts while you’re at it

Okay, I totally knew about this, but forgot until recently. In HTML/CSS, you can actually specify more than one class name inside of the “class” tag. For example:

Go ahead, try it yourself.