beTech :: Evolve Already

Surely as much as the Web Standards Project, the great CSS awakening, or Web 2.0, Firefox deserves a warm place in our hearts for its role in the enriching the Web developer’s life. Before Firefox, Web developers created table and spacer GIF laden pages in a “WYSIWYG” editor (e.g., Dreamweaver), saved them, and then checked the layout for consistency in Internet Explorer and Netscape—validation was often another step. Edits would be made and the process repeated. CSS was out there, but most found it frustrating to work with given the idiosyncrasies of its implementation by the competing browsers. Firefox woke the world up to the possibilities of Web standards compliancy, dependable CSS, transparent PNGs, and useful real-time developmental tools in the form of extensions.

Firefox’s extensions are free add-ons that provide functionality far beyond the basic browser’s default capabilities. Never before have so many tools been available to examine and modify almost every element of a live Web page. With the right extensions, you can manipulate layout, images, fonts, and even behavior without leaving the browser. There’s no more need to do the WYSIWYG create, save, examine roundtrip dance any longer. And because the learning curve to create these extensions is relatively shallow for the geeks amongst us, new ideas and tools are blossoming on a daily basis. Any way you slice it, Firefox extensions are a developer’s dream.

Here are a cool bakers dozen of the most useful Firefox Web development extensions (updated):

1. DOM Inspector

   Included with Firefox (choose ‘custom’ setup at install), DOM Inspector allows you to visualize and interact with the Document Object Module. Snoop through a page’s CSS, JavaScript, and much more node-by-node.

2. Web Developer

   Web Developer is an absolutely indispensable tool for those interested in designing/debugging their own sites or deciphering someone else’s. If you install any extensions, make this the first.

3. IE View (Windows only)

   Because no matter how good it looks or works in Firefox, more than 4 out of 5 surfers still use Windows Internet Explorer. To see what they see, right click on a page in Firefox and choose “View This Page in IE” to open the same page in Explorer. Simple as that.

4. HTML Validator (Windows only)

   Based on W3C’s Tidy, this extension resides in Firefox’s status bar and automatically checks for valid HTML on the fly. Double clicking on the icon brings up a full report which identifies offending lines of source code. HTML Validator even helps you clean up your source code.

5. View Formatted Source

   This little gem rids the source code of white space, formats and color-codes it in slick collapsible sections, and displays optional CSS information for each element as you mouse over. The code view is based on the rendered document (including dynamically rendered Javascript HTML).

6. Resizable Textarea

   If you work with form textarea fields—especially tiny ones—this extension will save your sanity. Don’t like the size of that textarea box? Grab an edge and resize it!

7. MeasureIt

   Alright, you just resized your textarea box, so how big is it now? Get its dimensions or any other onscreen dimensions in pixels with MeasureIt.

8. ColorZilla

   Get the hexadecimal and RGB color value from anywhere in the browser. Click on the eyedropper in the status bar or use the shift+esc shortcut key to activate. Colorzilla also measures pixels point-to-point and remembers your color samples from session to session.

9. Live HTTP Headers

   Sometimes you just gotta know what the browser and Web server are saying to each other. Live HTTP Headers allows you to see (in real time) the hidden response header information your browser sends to the server and the response that the server sends back.

10. Aardvark

    Aardvark outlines HTML elements as you mouse over them and displays id and class names. The real magic, however, comes in when you learn the shortcuts for messing with these elements. It can be extremely handy when you need to print a page without the author’s space consuming banner ads or menus.

11. Greasemonkey

    Alter the content and behavior of any website with Greasemonkey and client-side “user scripts”. There are already hundreds of ready-made user scripts for you to install or you can build your own in JavaScript. Exercise caution with what you install, however. For instance, an XMLHTTPRequest inside a user script could easily send your personal data to a third party.

12. Clusty

    Living on the bleeding edge can be hazardous if you don’t know what people are talking about. Clusty’s unique addition to the world of search tools is the dictionary and encyclopedia clip. Right-click on a word and choose either of the clips to view its definition right then and there in a popup. Clusty also has search toolbar features similar to Google’s or Amazon’s except its results are clustered into categories which makes search results a lot more interesting if not useful.

13. Forecastfox

    When you finally emerge from that Web coding cave of yours, you might want to know what’s going on outside. Forecastfox performs as good or better than those infamous weather bugs without the worry of giving spyware a free pass to your operating system.

If we missed your favorite Firefox extension, please let us know by dropping a note in the comments box.

UPDATED September 21, 2006: 10 More Essential Firefox Extensions!

Posted Wednesday, August 31st, 2005 at 3:56 pm • Trackback URI • Comments RSS
Categories: Browsers, Tools