Tools of the Trade: Firebug

Posted by on March 12, 2007 at 03:57 PM

Every so often, I take a moment to look at the tools and processes that I use as a programmer to marvel at the progressions of time. Occasionally, I actually find that one of them has ascended to a level of importance that is rarely achieved. A tool that, maybe weeks before, had felt like a luxury, instead becomes central to the way that I work. I had experienced this turn around several months after installing Linux at my house, or when I first tried out a "natural" keyboard back in high school.

Today, I'd like to talk about something that has been more of a recent revolution for me, and I know that there are a great many people out there who would similarly be blown away by its usefulness. Ladies and gentlemen, please let me introduce you to Firebug.

Firebug is an extension for Firefox (you are using firefox aren't you?), which adds a vast amount of functionality for web designers and programmers. Originally, firebug was a better javascript console, replacing the built in version, and adding some handy features. In its most recent versions, however, Firebug adds a pile of additional tools. In fact, it adds so much to the developer experience, that I can sense a feature list approaching rapidly...

• Tree based, syntax highlighted html source code viewer.
• 'Inspect' feature, which lets you click on a visible, in page item, which brings you directly to that item's location in the html source.
• DOM positioning information, displaying sizes of the content, padding and margin areas.
• HTML element real-time markup and css editing. With real-time display updates. (Think WYSIWYG). This breaks the standard cycle of edit, upload, preview, repeat.
• Ability to view linked in CSS and Javascript files inline.
• A DOM inspector (much like the one built into Firefox).
• A Network connection graph, showing the delay and duration of all the downloads required to render a page.
• And for all you AJAX guys/gals. Firebug will even show you the content of all xmlhttp requests and responses made by your page.

If you spend, really any, time doing website development, you truly owe yourself the pleasure of trying Firebug out for size. I guarantee you'll like it.

*Guarantee of happiness does not extend to anyone who is actually disappointed, for any reason ;)

Comments (1)