Essential Web Development Firefox Extentions

Web development without Firefox plugins is like building a fire with a flint when there’s a perfectly good military-grade flamethrower lying right beside you. These are the little guys that make my job and life that much easier.

Web Developer Toolbar

This plugin is the one I hands-down use the most.  The ability to isolate an HTML element and see what CSS is controlling it is invaluable, especially when working with complex CMS systems or frameworks.   Quickly disabling CSS is a great way to quickly see how any site is structured.   Edit CSS has been a fantastic recently discovered feature, and has saved me tons of time.  Before this I would have to work in my editor, save, possibly upload, then refresh the page to see my changes. With Web Developer Toolbar, I can see the changes made immediately on the fly. Amazing.

View image information to quickly retrieve essential image properties of both CSS background images and image tags.  Display Ruler is an often used feature to help take care of some of the guesswork of how wide an element is.  Resize is another quickie to make sure your design can properly be displayed in lower resolutions (yes there are still people rocking 800×600 resolutions, bless their hearts).

There are tons more features that the Web Developer Toolbar offers, but I find myself coming back to the features mentioned above time and time again.  Learn the keyboard shortcuts and you’ll be rollin’ like Fred Durst and Rick Astley in a Pillsbury factory.

IE Tab

This little goblin saves me from opening up IE seperately. Simply click the button, and the page renders as Internet Explorer right from within Firefox.  Very seldom do I have to brush the cobwebs off that big ole’ blue lowercase ‘e’ buried somewhere in my quicklaunch menu.

HTML Validator

Another quick little lifesaver. One day, me and my programmer buddy Mike decided that we were only going to write in XHTML strict (at the time we were coding in transitional, simply because that’s what things were defaulted to). Well, the HTML validator extension was perfect for that transition to step up to the big leagues. In your status bar, it gives you a huge red ‘X’ or a big green check’ depending on how your code checks out. When you click the icon, it gives you the page source with all the errors listed in order and how you can remedy them. This has saved me on thousands of occasions. Note: Make sure if you’re writing XHTML you use the SGML Parser in the options.

ColorZilla

This is a tool I feel I don’t utilize to its maximum potential. It’s great nonetheless. I mostly use it when I find myself going “What’s that background color again?” or “What color font is that?” It beats going through your CSS for those oh-so-cryptic hex values. I say I don’t use its full feature sets because apparently you can create palettes, save favorites and so on, but mostly I just use it to copy hex values into my CSS or Photoshop files.

Honorable Mention: Firebug

A lot of people (and when I say a lot of people, I mean most web developers I read about) use this tool as their meat and potatoes for web development. This is only an honorable mention for me simply because I only recently started using it heavily. I really like it so far, and a lot of the features overlap with the Web Developer Toolbar (which is why I still don’t use it as my primary tool).  The coolest thing about it I’ve found is the way you can hover over your code, and it will visually show you what block you are hovering over right in the browser.  Its similar to Web Developer Toolbar’s “ViewStyle Information” except it does it without a click.   Also, you can edit HTML and CSS right from within Firebug, however, I haven’t done it so much because I prefer the plain text editor style of Web Developer’s Edit CSS tool.  I’ll play with it more and see if my mind changes.  Overall though, it seems like its packing a lot of heat and I’m excited to get my hands dirty with it. Let me know if you have any cool Firebug tips that help you out.

Alright, that about covers it. No, this isn’t a crazy “Wow I’ve never heard of any of these!” Firefox plugin list.  These things are popular for a reason: they work.  They are going to help me perform everyday tasks more efficiently and that’s what keeps tons of people using them.   Let me know if you have any tips or other extentions that you can’t develop without.

Also, keep a heads-up because I’ll be writing a post on my favorite non-developer plugins.