The first time I used FireBug it to see what was happening with XMLHttpRequest calls in AJAX applications. Now I can’t imagine writing JavaScript code without FireBug, and it also catches some CSS errors. The bottom line, if you are doing web development then FireBug is a must have on your list of extensions for Firefox.
Even when you aren’t actively using FireBug it places a little status indicator in the bottom right hand corner of the Firefox window. If no errors are found it has a green circle with a white check mark in it. When errors are found then a red circle shows up with a white x in it followed by the number of errors found in red text. Clicking on this will pull up the FireBug section in your Firefox window. These two simple status indicators make it very easy to figure when FireBug has caught in error in your code.
Lately I’ve been paying more attention to that little status indicator while browsing around other sites. After doing this for awhile it became very clear that some developers aren’t using FireBug at all because they have a long list of errors that show up. Here is a little tour of what I’ve seen.
First up, I’ll pick on my own site. We’ll take my entry on FlightAware: FreeBSD and PostgreSQL as an example. You’ll see the red circle come up and indicate that there are 4 errors. If you dig into those errors you’ll find that they are from the Google AdSense ads on the site. Unfortunately the code causing the errors is inserted by the Google ads when the page is loaded, so there doesn’t seem to be much that I can do about that. I may try to chance the style of ads to see if I can make it work later on.
So that you know what the green circle looks like go check out wordpress.org. The WordPress site shows no errors, now you know what the FireBug status should look like when browsing sites.
Back to more interesting sites. Lets check up on the some of the sites from the Alexa Top 10.
Yahoo.com: 101 errors. They just released a new layout and most (all?) of these errors are for CSS. I should point out that were declarations that were simple dropped by Firefox.
Google.com: 0 errors, nice green circle.
MSN.com: 2 errors. Both CSS.
MySpace.com: 72 errors. Again CSS is the major (only?) problem.
eBay.com: 4 errors. If you guessed all CSS again, you’d be right.
Those are all of the English sites on the top 10 list. Now I’m going to pick on other sites that many folks are familiar with.
Slashdot.org: 3 errors. And may I say that it is about time that they updated their site.
Microsoft.com: 8 errors. Our old friend CSS.
Apple.com: 1 error. CSS.
Gmail.com (logged in): 510 errors! What is going here?
Google Calendar (logged in): 30 errors. Thankfully no where near what Gmail hit.
Bloglines.com (reading my subscription list): Starts at 202 errors. While less than Gmail this puts Bloglines in a solid second place for the most errors. What makes Bloglines even worse though is that each time that I click on a feed to read new items 3 more errors are generated. Since I tend to leave Bloglines open in Firefox for a long time I’ve seen it add up to some insane numbers (over 3000).
Firefox is free and works across many operating systems and FireBug runs any where Firefox does. So why aren’t more of these sites using FireBug to track down errors?