Firebug

We’ve taken a break from the daily Firefox Quick Tips since I think we’ve featured a lot of the useful add-ons and the worthwhile tweaks for Firefox 2.0. I still can’t wait for Firefox 3 to come out but that is still a long wait. But here’s a trickle of life to what used to be our daily feature. I’ve decided to review what we have here so far and what do you know, we’ve missed out on featuring a few great add-ons that might interest you.

Now, I’ve been helping a good friend of mine with her web development efforts, mostly as an alpha tester for Windows (IE7 and Firefox). Aside from that, I’ve been tossing some helpful extensions for her to use, one of them is the Web Developer toolbar which we featured a while back. And that toolbar’s probably a reason why I skipped featuring Firebug (which I’ve been using all this time!).

Firebug’s a real handy set of tools for web developers. It’s basically an editor, debugger, monitor for your HTML, CSS and JavaScript. It can be launched with a simple keystroke or a click at the button on the status bar. It pops open an interface (at the bottom or in a new window) that lets you nitpick your way through codes.

You can tweak and edit your HTML and CSS on the fly. What I like about it is that it gives you an idea on what code relates to a particular part of your site by highlighting it when you hover over a particular line of code. You can even visualize the nesting of your DIVs and the CSS metrics in one of its tabs. It can even do quick error analysis.

I say, a real must-have for web developers. Oh, and while the one featured here is for Firefox, the guys who made this also created a “Lite” version for use in IE, Opera, and Safari.

Download Firebug here.