Absolute Need-to-Have Firefox Plug-ins

At Sociosophy we spend quite a bit of time not only using the web, but developing and designing parts of it. Part of our passion and reason for our quest is not only to find neat things on the Interwebs, but to also maintain that drive and motivation from other great ideas we witness every day in exploring new technologies, new ideas, and… you get the idea.

As Web Developers and Web Designers, we find certain things you just gotta get for your Firefox browser to extend it’s capabilities and make you that much better at doing what you do.

The assumption here is that if you’re a developer/designer, you use Firefox. Chances are if you do any web development, you either have access to, or use, more than one browser to test your work… If you don’t? Shame! Go download stuff.

Web Developer Toolbar – This puppy’s got more tools and features than we can shake a three legged pony at.
- Disable stuff: Images, JavaScript, Cache, Popups, CSS… on and on
- Clear stuff: Cookies, cache, history, form data
- Extensive cookie info: View the info, alter the path
- Forms: Display details, code id’s, alter methods (GETs and POSTs), Populate Form Fields (neat!)
- Images: View info, hide all, find broken images, display alt text, outline them
- View all sorts of page, code, script, file and header info
- Alter fixed frame sizes
- Outline elements: Block level, divs, frames, tables, images, etc
- Validation
- Multiple view source options
Firebug – What doesn’t Firebug do? It’s THE tool for in-browser code, style, script and STUFF! editing and testing, lemme just put it like that. Trust me, you want to use it. If you don’t, God will start killing kittens until you do.
HTML Validator - Having an in-browser W3C toy to check your code against is great for making sure you stay “clean” even when you can’t access the public Intartubes. We like external validation tools, just as much as the next person – but relying on outside sites for things you need… well, it’s just better to keep that kind of thing close to home just in case.
MeasureIt – Simple tool, but SO effective. To use, just select the tool, then use your mouse to select the area you’re sizing up. It gives you the pixel dimensions of your selection. Once you got that going, you’re on your merry way into design heaven.
ColorZilla Color Picker – An in-browser eyedropper, and yes, it gives you the #990000 representation of your selection in various formats for easy copy & paste into other applications, like Microsoft Paint.
ScreenGrab! – We use this CONSTANTLY on Sociosophy, see all these logos? Yea… ScreenGrab! to the rescue.
SEO Book – Search Engine Optimization is the name of the web game if you want your site to be seen. Sociosophy receives a substantial amount of traffic from search engines, as should yours. People use search to find things they don’t have at the ‘ready’. This add-on helps make sites that deliver when they look.
YSlow – Wanna know why your site’s slow? YSlow will tell you. As the great Dan Larsen once told me when we were in the trenches of Mission Valley during the battle of 1912 circa 2008, “Son? This application will spell out exactly where your choke points are.” God bless you, Dan Larsen for your infinite wisdom. This plug-in will be saving my ass from here til retirement.

There are others, and perhaps we missed one. I’m always in the mood to try out new awesome toys for Firefox to make my RAM scream at me the moment I open it up. But what’s Firefox if it’s not taking up 360,985KB of memory anyway?

Oh and; thank you Mozilla for making a browser that doesn’t want to make me beat my inner child into submission with a 40 pound sledgehammer.

Some useful tutorials and links for these things:

Firebug Tutorial – “Introduction to Debugging AJAX Application with Firebug”