POTM February: Firebug

Submitted by Larry on 5 March 2007 - 1:24am

So February was an interesting month in my world, so interesting that it's now March and I didn't get around to posting a Project of the Month for February. Well, better late than never I suppose. To parallel GBGames' February Project of the Month, here's a big thank you cheer to my favorite Firefox extension and every web developer's best friend, Firebug.

One of the great things about Firefox's plugin support is that it allows all sorts of people to "scratch their own itch" by extending the browser. Of course, one has to be able to program plugins in order to scratch said itch, so it's no surprise that some of the best and most widely-used plugins are targeted at developers. I've long been a fan of the Web Developer Toolbar, and for a long time it was my "first to install" Firefox plugin. Even the venerable WDT, however, has been supplanted on that list by newcomer Firebug.

Firebug, quite simply, is the web IDE you always wished you had. I've been using it since its 0.6 beta version, but it is now at the 1.0 stage (which in the open source world means "old and stable") and simply blows me away. What's so great about it? Let's have a look at just a few of its features:

  • In-panel Javascript and CSS errors and warnings. Rather than deal with an external dialog that doesn't self-clear, Firebug offers a console right in the browser window that slides up from the bottom of the window. It reports errors and, optionally, warnings in Javascript and CSS files, clears them for each page load so that you don't get overwhelmed, and provides direct links to the error location in the source file.
  • Javascript console with custom debug messages. The console is writable, too. It provides a real-time Javascript command line for issuing commands to check on the status of any property in the page. It also includes a custom console object, so in your javascript code you can write console.debug('running function'); and get debug output in the console rather than having 500 alert boxes in your face just to track down a bug.
  • Honestly, though, I don't use the console.debug feature that much. Instead, I use the real-time Javascript debugger. That's right, real-time debugger for Javascript, and a very good one at that. A real-time debugger, for those not familiar with it, lets you freeze code execution at any point, examine the entire state of the system via a convenient GUI, and then step through the code, executing a single statement at a time to track down where some code is misbehaving. It is one of the biggest productivity boosts any programmer can give himself, in any language or environment. Before Firebug, the best alternative was the Venkman plugin for Firefox that only sort of worked. Firebug, though, blows it away. It would be worth installing for this feature alone, but there's so much more.
  • Ajax tracking. Remember that console? It can also report every out-of-band XMLHttpRequest request a script makes, allowing you to examine the exact headers and data sent and received.
  • If your page is loading slowly, there may be something funny going on at the HTTP level. Enter the built in network profiler, which provides a graphical display of what files were downloaded for a given page, how long they too, which ones were cachable, which ones had to wait for a free HTTP channel to open (did you know that you're limited to 4 simultaneous requests, but most pages make far more than that for every page load?), and more. Don't waste your time optimizing your code if the slow part is just getting the code to the browser.
  • Inline CSS editing is a feature I haven't used as much, but for the design set out there should be a killer feature. Load a page, examine the stylesheets, see exactly where a given rule is applied, edit it inline, and play what-if games with the style properties. The browser itself becomes your web editor. Sadly you can't save files directly from Firebug, but judicious copy and paste should be good enough and still save hours of development time.

Firebug can also be enabled and disabled for specific sites individually, so if you don't want it warning you about all the parse errors on Digg or Slashdot or someone else's blog but do want it to dig into every detail of the site you're building, you can do that, too.

Firebug is a free download either from the Firefox plugin repository or from its very own site, http://www.getfirebug.com/ . If you do any sort of web development at all, Firebug will help you, and if you do any sort of Javascript development, Firebug is the tool we've been waiting for since Netscape 2 was released. Debugging Javascript is no longer a complete guessing game; your browser is the IDE. And that is why Firebug is my Project of the Month for February.