If you’re a web developer, this tool is pretty well known…at least….it should be. For those breaking into the industry, this tool is a MUST HAVE. Built as an extension to the very popular Firefox web browser, Firebug allows a user to dive deeper into any page as they browse. From the Mozilla plugin website:

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Installation

As with all Firefox plugins, installation is a one-click process. If you’re using Firefox 2, be sure to install version 1.05. For Firefox 3 users, a beta version of 1.2 is available. I have installed it and it seems pretty stable.

Once installed and you’ve restarted Firefox, simply activate Firebug by clicking the icon in the bottom right of the browser. A green circle with a white checkmark will appear if it is activated.

Viewing HTML

As you navigate, clicking the Firebug icon will show you the HTML of that page in a lower pane. You can expand the each element in the HTML tree and see how all of the (hopeful) divs link together. As you hover over each element, the top pane will highlight the portion of the page that is defined by that element.

Ever wonder how a page is constructed? Ever gaze in amazement on what cool CSS trick an author has used to generate a page?

Firebug can tell you.

Debugging HTML / CSS

On the flip-side, you can debug your own pages by right-clicking them on the page and selecting ‘Inspect element’. This will open the lower pane of Firebug and take you directly to the portion of html that generates it. If that html element has a CSS class or ID, the details of that CSS entity is displayed on the right side of the lower pane.

Even better, if multiple declarations are acting on an element in a CSS file, you’ll see the entire stylesheet build. Perhaps your style.css is making your links blue with no background, while your screen.css is making your links red with a yellow hover. Now you can see which declaration is getting the higher precedence.

Tons of Features

Without a doubt, Firebug is the Swiss army knife for web developers. In addition to simple HTML viewing and debugging, you can view the Javascript included on a page, the element details for embedded Flash objects, and the DOM tree structure. You can also view the speed of how certain elements are rendered. If your site is slow, simply look at the different elements and see which is taking the longest to download.

The single coolest thing, however, that makes Firebug a hands-down favorite is the ability to edit the HTML in the page right in the console.

Curious to see what a site would look like with a different font? Interested to see what your site would look like with a different background image?

Simply change the CSS of the page directly inline in the Firebug pane and the page in the top pane will update. If you’ve got a dual screen setup, you can pop-out the Firebug pane and have your HTML editor on screen and your test site on the other!

Have fun…and Firebug away.