There was a buzz around Firebug a couple of months ago. A lot of developers installed it and enjoy every second they use it. There are some others that missed the train and are still using alerts to debug. If you're from that second category, here's your chance to get back on tracks.

1. The console

Firebug console

The console is a kind of dashboard. It shows what happens client-side : CSS, javascript error, warnings, ajax… all you want to know in just one sight.

If you have an error, just click on it and Firebug will open the source code and highlight it.

Every ajax request is also shown here along with its parameters and the response from the server.

2 . Debugger

Firebug debugger

The debugger is insanely efficient, it offers everything you would expect from a debugger : breakpoints, step-by-step, watch expressions and functions stack. Do you need anything more?

3. Inspector

Firebug inspector Great, there's an alternative to the infamous “View page source and then search through the code” technique. With Firebug, you just click on Inspect and move your cursor over the element that causes the problem and you have it all in one sight : the HTML on left and the CSS style on right. You can manipulate both of them to try to correct the problem and then, it's done.

Conclusion

There's no reason in the world why you shouldn't use Firebug, go and get it at http://getfirebug.com/.