I don’t know how I used to develop web pages before Firebug. It is the single best tool you can have when debugging a webpage. If something doesn’t look right I open Firebug and find out what styles are being inherited. If some javascript functionality is not working I open Firebug and enter debug statements. If some ajax call is messing up and the page isn’t showing the response correctly, I open Firebug.
Installation
The best thing about Firebug is how much time it saves you on debugging. Even better than it being free. That’s a lot considering how I watch my money. I only use Firebug with Firefox. It can be downloaded at https://addons.mozilla.org/en-us/firefox/addon/firebug/. What’s good is that it’s available on both Mac and PC. Just click on the Add to Firefox button and it’s mostly done for you. That easy. A firebug was also developed for IE but I haven’t tried it recently. I tried it a couple years ago and it didn’t help me very much so I stuck with just using the Firefox one.
CSS
When you need to see why an item on a webpage is not showing as its supposed to you can right click on it and select “Inspect Element”. Doing this opens up the firebug window and it will tell you exactly what styles are being applied to it and what styles have been overwritten. You can even change the values of anything you want to see the outcome in real-time.
Javascript
Browsers can tell you the last error code that happened, but firebug can let you watch expressions, look at the stack, insert breakpoints, and print out statements in the console.
Request / Response
Any and all requests to the server can be inspected on the Net tab. You can see each javascript include file, each image, each ajax request. This means that if an ajax call goes wrong, you can inspect the parameters that were sent and the response the page got back from that request. It makes debugging a breeze.
Firebug can be downloaded here: http://getfirebug.com/