Tools of the Trade: Firebug

Posted on in Blog

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

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 😉

Up Next

Search engine results pages (SERPs) are always changing. Google is constantly testing new SERP features to provide users with information more efficiently and often without clicking through a result to a domain. The no-click SERP has changed the way we search the internet, but how big of an impact do SERP features have on important...

Read More