Tools of the Trade

by Matt Garvin - September 26, 2010


I remember the first time I used Firebug. I was blown away, and immediately realized "This is a game changer!" The second thing I thought was "How did I ever get by without this?" I still would say that Firebug is the #1 tool in the arsenalt of a Front End Developer, but there are also a number of other "must haves" in the Front End Developer's tool belt.  And not all of them are simply Firefox Addons.

#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

Probably the #2 addon for Web Devleopers is the fittingly titles Web Developer Toolbar by Chris Pederick.  (See http://chrispederick.com/work/web-developer/)  It has some very handy features, the handiest of which are the three little icons in the upper righthand corner which say if your pages are sound, CSS-wise and Javascript-wise.

#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). 

#4 MeasureIt

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.