Ade in Business

Firebug is an add-on for Firefox that bundles a number of great tools to help web developers. Version 1.0 was released this week, and to honor the occasion I thought I’d discuss a few of the features that I’ve grown to love.

Console Logging

This is the first feature that got me really excited, albeit one of the most basic ones. One of the frustrating things about JavaScript development has been that there’s no built-in mechanism to log debug messages to the console. I would often use alert messages, but it’s messy and time consuming to dismiss dozens of pop-up windows each time you want to debug something. And a nightmare those times that I find myself in the middle of a recursive loop.

With Firebug, you can add something like:

console.log(”checking element %s”, id)

and the output gets sent to the Firebug console. There’s even a Firebug Lite .js file that you can include in pages to get console.log functionality in Internet Explorer, Opera and Safari.

JavaScript Profiler

The profiler lets you see what JavaScript functions are taking up the most time to execute, and how many times each are called. This feature came in very handy a few days ago when a customer reported that one of his FormSpring forms were taking a long time to load. It was a very large form with a lot of skip/branching logic that’s implemented in JavaScript.

I ran the Firebug profiler and saw that the onload() JavaScript code took a little under 6 seconds to execute (this doesn’t sound like a lot, but it certainly feels like a long time when you’re waiting for the page to load). What was shocking was that in that time there were 188,548 function calls!

And the best thing about it was that I could quickly identify what part of the code was causing the problem. I probably otherwise would’ve spent quite a bit of time figuring out where the bottleneck was since my first guess about the problem was way off the mark. I tried out some alternative code (that now seems blatantly obvious in retrospect) and cut execution time by over 70%:

The experience left me realizing that I need to use the profiler a lot more during development.

Network Monitor

This is one of the most unique things about Firebug. It’s also something everyone who creates web sites should use –not just programmers.

The tool shows you every request made by the browser to load a page (images, CSS, JS, etc.) along with the size of each file and the time it took to download. This can be really handy in diagnosing what may be taking a page a long time to load, and help you tweak content to make sure you’re not alienating those visitors with slow connections.

Here’s what it looks like when I load the index page of this site:

This tells me several things:

• I can see that the page size is 234KB, which is much larger than what a lot of web page optimization experts would recommend.
• I can also see that almost 1/2 of that size is coming from my header image, which is definitely disproportionate to it’s relevance on the page.
• I can see that one of the calls to a FeedBurner URL is taking about 40% of the download time even though the file was only 274 bytes. I have files loading from a handful of different domains to use their analytics packages or widgets, and if I see that they’re consistently taking a long time to load it might be time to think about scrapping them.

–

There are a lot of other cool Firebug features that I haven’t mentioned, but I thought I’d just focus on the top ones I’m using on a regular basis.

Joe Hewitt has certainly done a great job in getting to version 1.0. I hope there’s a lot more great stuff to come.