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?
4 replies on “Why Don’t More Developers Use FireBug?”
I’m with you. Firebug is indispensible.
I’d guess that most of those errors in the sites tested are because of browser incompatability. In order to suffice all or most browsers you’ll have to use ‘dirty’ tricks, specially in CSS.
Since all the above sites seem to work pretty well, I wouldn’t talk about errors as in ‘wrong programming’.
When I found Firebug I couldn’t believe I hadn’t heard of it before. I think maybe people just don’t know it’s out there.
I have been using it for awhile now though and I agree, it is indispensable. Firefox is as well. If I try and look for extensions for IE like this I either can’t find them or they cost money or something. If I had lots of money to spend on them I could waste my time trying to figure it out or just tell the visitors to the site to use Firefox instead if they have problems.
It is great because of the ability to create development tools that I can easily use like this. Or you could even create your own if you had the time. But why reinvent the wheel when theres good things right there on the Firefox extensions site.
In agreement with what Christian said, since browsers throw-away CSS tags that they do not recognize I would not exactly categorize these as errors. These errors that you are referring to are usually CSS tags that are not part of W3C CSS standard. Different browsers have created their own CSS tags to allow certain features. So as Christian said, sometimes programmers need to use “dirty” tricks in order to get their content to show up correctly across different browsers.