Tools of the Trade: Firebug

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 😉