20 must-have Firefox extensions

Web Developer Essentials

FireFTP
Why bounce between applications when you can use FireFTP and have a full-featured FTP client in one tab, and the page you're working on in another?

FireFTP adds an option to Firefox's Tools menu. Click on it and a new tab opens (you can set this to a new window if you prefer) with a traditional two-panel FTP client: local files on the left, remote on the right. By right-clicking on files you can tweak their permissions and all the other things you'd expect to be able to do via FTP.

FTP right from Firefox with FireFTP. (Click image to see larger view)

One nice feature is "View on the Web," which opens the file on the remote server in a new tab. You can set up each host to "snip" out parts of the directory structure (/public_html, for example) so that you get valid URLs rather than the full "physical" path to the file.

The one disappointment is that the client is FTP only. When asked about SFTP support, the author responds (in a FAQ on his page), "Maybe in Version 2.0." Let's hope.

Warning: The combination of FireFTP and Firefox 2.0.0.1 exposes a regression bug in Firefox, causing high CPU usage. If you're still running 2.0.0.1, you should upgrade to 2.0.0.2 before installing FireFTP.

Version reviewed: 0.94.6
addons.mozilla.org/firefox/684

Firebug
Firebug is an essential tool for developers working on Web pages. It allows you to examine and tweak the HTML, CSS and JavaScript contained in a page, all on the fly. Firebug opens either as a panel at the bottom of the page you're inspecting, or in a separate window.

Exploring all that Firebug can do could be a full article of its own. But for a taste of its power, let's look at basic HTML coding. Once Firebug is activated, running your mouse over an HTML tag in the Firebug window causes a highlighted area to appear on the rendered page, showing where that tag is in the display.

Inspecting a page's HTML code. (Click image to see larger view)

For JavaScript development, Firebug finds errors and quickly jumps to where they are in the code. You can change the code and step through a script line by line, set breakpoints and so on. Essentially, it's a full-fledged JavaScript debugging system residing in a browser extension.

Firebug is a great extension and a big topic. If you develop Web pages, you'll want to add this extension to your tool kit. There's plenty of documentation and discussion of what it can do at the GetFirebug Web site.

20 must-have extensions Taming the Web Visual improvements Matters of convenience Information gatherers Web developer essentials

Web Developer
Web Developer is another virtual Swiss Army Knife for coding. There's some overlap with Firebug, but where Firebug concerns itself almost exclusively with the content of a Web page, Web Developer offers tools to tweak how you're interacting with the page.

Web Developer's cascading menus. (Click image to see larger view)

Web Developer's features can be accessed as a tool bar, or as cascading menus under Firefox's Tools menu. The tool bar is particularly handy since you can see all 12 of the top-level categories of features at a glance (and, of course, it can be easily turned off when you're not in the midst of site development).

This extension can even be useful for regular Web users, thanks to features like the ability to turn off background images. If you've ever struggled to read text displayed, for example, over a background image of someone's dog, you'll appreciate this.

Web developers will probably want to run both Firebug and Web Developer, and the two extensions seem to co-exist peacefully.

Version reviewed: 1.1.3
addons.mozilla.org/firefox/60

MeasureIt
So simple and so useful. After installing this extension, you'll have a small ruler icon in your status bar. When you click on this icon, the client area of your browser window will fade out a little, and you'll have a crosshair cursor.

Use this to drag out a box over a section of the screen. Next to the box is its height and width, measured in pixels. No more guessing as to how wide a sidebar really is, or if the footer is really rendering 150 pixels deep like your style sheet says it should. When you're done, a tap of the Escape key turns off MeasureIt and gives your Web page back to you.

Measure any element on a Web page with MeasureIt.

Version reviewed: 0.3.6
addons.mozilla.org/firefox/539

ColorZilla
Another quick and simple tool, this one more for designers than developers. ColorZilla puts an eyedropper icon in your status bar. Click it and you'll get a crosshair cursor. As you run this over a Web page, the RGB values of the pixel under the crosshair will display in the status bar, both as three separate values and as a hex value (e.g., R:255, G:255, B:255 | #FFFFFF).

ColorZilla shows color values in the status bar.

	More ColorZilla options.

ColorZilla also offers a color picker, color palettes and easy access to DOM Inspector, a Mozilla tool for examining a page's Document Object Module.

Version reviewed: 1.0
addons.mozilla.org/firefox/271

So there you have it: the 20 extensions we just can't live without. Please add your must-have extensions to the comments area below.

Peter Smith is a Web developer and freelance writer with a special interest in personal technology and digital entertainment.

Related News and Discussion:

• Scot Finnie: The Great Mac Software Hunt
• Preston Gralla: Why Firefox has lost its mojo
• daily IT Blogwatch: It's IE8 vs. Firefox 4 for 2008 (and animal noises)
• Firefox loses browser share, Safari gains

Read more about networking and internet in Computerworld's Networking and Internet Knowledge Center.