My favorite browser extensions for web development

By
Chris Haan

As a web developer, I have a web browser running about 99.9% of the time I'm on a computer. It's usually the first program I start up and the last one I shut down. Not only is a web browser the medium through which the world views our work as developers, it can also be an indispensable tool to help us get sites built. Most desktop browsers have a few tools built in that can assist in web development, but the real power comes when you get into the realm of browser extensions.

My personal choice of web browser happens to be Firefox, which puts me in the minority these days. Google's Chrome browser currently has a commanding lead in browser market share. Probably the only reason I now use Firefox is that I've been using it since before Chrome was a major player and before Chrome had many of the extensions that I find so useful in my daily work. I should note though, that that time has long passed. Many of the extensions I use are now available for both Firefox and Chrome so it's really only habit that keeps me on Firefox. Maybe I'll switch one of these days...

Firebug

My number one favorite browser extension and the one that I use the most is Firebug. While the full version of Firebug is a Firefox-only extension, Firebug Lite is available for all major browsers (and even quite a few not-so-major ones). This extension is my Swiss army knife for web development. I use it when I'm working on styles, debugging javascript, monitoring asynchronous calls to the server, and even just examining the html of a page. I can highlight an element on the page, experiment with the applied styles live in the browser window, and when I have the style tweaked the way I want it, I copy and paste the styles into my css or sass file to make them permanent.

When working with javascript, I frequently use Firebug to dig into the DOM to see what objects and variables are defined and monitor their values. If something is not behaving as expected, I turn to the debugger or just try running some functions from the command line. When viewing javascript errors in the console, a click takes me to the specific file and line where the error occurred and the command line allows me to interactively try variations on the misbehaving code while I diagnose the problem. For asynchronous calls to the server, I can look at the net tab (which also lets me see how long it is taking to load all page elements) and I can examine the data sent and the response received. On a normal page request, if an exception occurs, the framework on the development site will return a nicely formatted error page and by using the net tab in Firebug, it's possible to view the rendered html of this page even on ajax requests which make tracking down the problem that much easier.

Colorzilla and Measureit

But enough about Firebug. Two more extensions that I always download on a fresh browser install are ColorZilla and MeasureIt. In contrast to Firebug, these extensions are basically single-function add-ons. The former provides a color-picker that lets you sample the color at any point on a web page, and the latter a screen ruler that lets you measure. Both are very useful when doing template work and, incidentally, both are available for Chrome as well as Firefox. Once you pick a color with ColorZilla, the hex code for that color is copied to the clipboard in standard css notation, but the dropdown menu it provides also allows the color to be copied in a variety of other formats, so it can be useful in conjunction with other graphics programs as well as for add colors to a style sheet.

S3 Organizer a.k.a. S3Fox

A final extension that I only recently discovered but which is quickly earning a spot in my favorites list is S3 Organizer a.k.a. S3Fox. It's just a simple two-pane style file transfer tool that shows your local files on the left and the remote files on the right. I came across this when I was searching for an S3 client to use on my Ubuntu development machine and it has worked great for me from the start. It's nice to have this accessible in my browser with just a couple of clicks since my browser's already open.

Of course this list only scratches the surface of what is available, but these are the extensions I find myself using over and over again. There are many more useful extensions that I use from time to time, but not necessarily on a regular basis as I do with these. Not to mention there's a whole other list of extensions that I use as a consumer of web sites rather than a developer. What browser extensions do you find help you get your job done whether you're a developer or otherwise?