Tools of the Trade
by Matt Garvin, published 2011
#1 is Firefox with Firebug
Ok, for starters, as of 2010, you have to use Firefox and the aforementioned Firebug. But there are tons of other handy addons, besides Firebug, although they are not in the same league as Firebug. Nothing is in the same league as Firebug. But...
#2 Web Developer Toolbar
#3 HTML Validator
Number 3 -- which goes hand-in-hand with #2 -- is HTML Validator (see http://users.skynet.be/mgueury/mozilla/). It has a handy display in the lower righthand corner that gives you a green checkmark when your HTML/CSS validates according to a parsing engine of your choice. If it doesn't validate, it shows relevant errors. Nothing makes me happier than getting three green checkmarks upstairs (in the Web Developer area) and downstairs (in the HTML Validator area).
Probably the #4 addon for a Front End Developer is MeasureIt by Kevin Freitas. (See http://www.kevinfreitas.net/extensions/measureit/) It lets you quickly and easily make pixel-perfect measurements in your browser. This is a handy thing in general, but it becomes a real Killer App when you are working with absolute positioning.
#5 Screen Calipers
Stepping out of the realm of Firefox Addons, and into stand alone apps, I present to you Screen Calipers by Iconico. (See http://www.iconico.com/caliper/) This cool looking tool floats on top of anything on screen, and allow you to measure distances in any direction. (Up, down, and even diagonally, though I don't think I have ever used them diagonally yet.) Nowadays, the screen calipers have largely been replaced by Measureit in my own use, but what I still use the for is as a "placeholder" from when I toggle between pages. Here is what I mean. In one tab in Firefox, I will have the HTML/CSS I am working on. In another tab I will have a JPG of what I am trying to make (a graphic design, usually called a mockup, or a flat, a composite, a screen or a million other variations). The calipers floating on top allow me to make sure that what I am seeing is really the same on both pages. They make it easy to judge distances between things, or making sure things are level when toggling between one screen and another.
I am sure I will add more items in the future, but that is my Top 5 right now.