Sometimes you just can’t figure it out on your own. That list picture that doesn’t want to play nice and line up. Boy, have I got a browser for you!
It’s been around long enough to fire a nerve in your brain when I mention Firefox. The open-source poster boy that slowly steals Internet Explorer uses with every fun new feature is more that a pretty face you know. Hidden among the countless pointless add-ons there’s hope for the developers yet.

(If you’re new to Firefox, it’s an open source web browser built off the gecko browser base. It offers a whole slew of add-ons to customize the “User Experience” including themes. )

My favorite add-on is, of course, Firebug. Firebug is a neat little tool that lets you inspect and customize the DOM real-time on any page you can view in the browser. This makes CSS tweaking a breeze since you can view all your changes in real time. Pixel pushing has never been so easy! It also has a network monitor and a JavaScript debugger built right into its sleek and simple interface.

But maybe you already knew about that one since you’ve been using Firefox for years. In that case, you should give ColorZilla a try. I know the name sounds silly, but it’s gotten me out of a couple binds. ColorZilla is a simple eyedropper tool that lets you snag any color from any page. You could even step through the colors in the images! It’s the simple interface that makes this a must have. All you do is click the button in your status bar and click the location of the color. Your clipboard is auto populated with the hexadecimal color code, so you can drop it right into your code.

Some add-ons just get overlooked because they don’t seem useful. I’d say that’s the case with another one of my favorite add-ons, MeasureIt. MeasureIt allows you to draw a box on the screen and gives you the boxes’ width and height in pixels. It’s perfect for getting a rough idea of how wide or tall something is on the fly. It might seem rather useless when you can just inspect the element with Firebug and get its properties but not every element gets themed. For those times you just need to know if there’s room for one last image in your copy or how tall your text is really spacing out, MeasureIt is a must!

This last add-on I’m going to mention is one I can’t work without. When you’re working on a website, you often find yourself with multiple browsers open because they all render differently. The main two I test in are Internet Explorer and of course, Firefox (our HR guy Thomas will be upset to know Safari isn’t on my list yet). But Internet Explorer doesn’t have these useful tools, so I generally use Firefox for all of my day-to-day work and preview it in Internet Explorer to make sure everything lines up.

That in itself can be a tedious task: the navigation to the Internet Explorer icon, waiting for it to load, pasting the URL into the navigation bar and loading the page just to see one tweak or to verify the functionality didn’t break with that last line of code. I realize I can be lazy in that aspect but with all the programs and windows already open, it’s easy to get overwhelmed. IE Tab solves that problem for me. IE Tab allows me to take any page I’m viewing and with the click of a button, render the page in Internet Explorer inside Firefox. This allows me to keep all my web pages open in one window using tabs.

There are plenty of incredible add-ons out there. It was hard just picking a few, but these are the few that make my browsing and developing experience a lot easier. Try them out! And if you think you’ve used better, leave me a comment. I’m always up for trying new things! I’ll leave you guys with a list of the add-ons I currently use in case I missed an important one.

Adblock Plus
ColorZilla
Download Statusbar
Firebug
Greasemonkey
IE Tab
MeasureIt
W3C Page Validator