Debug Web Pages in Firefox With Firebug

For Web developers like me, one of the most burning questions is “why does the page look like this?” Firebug is a free add-on for Firefox that can answer that question very quickly and in great detail. With over 1.6 million users and a five-star review average from 1,144 user reviews, Firebug 1.8.4 is a must-have Web development utility, especially when you consider the price tag (free).

The page that appears in the browser window is usually a combination of HTML, CSS, and JavaScript. Firebug offers inspection facilities for each of these components, so you can figure out exactly why a certain image isn’t where it should be (CSS, usually), or why that JavaScript animation never runs.

When debugging JavaScript, Firebug lets you set up breakpoints in the code, inspect variable values, step through functions, and do everything else you would expect from a modern debugger.

Modern browsers such as Chrome and Opera feature built-in developer tools that strongly resemble Firebug, but make no mistake, Firebug was there first: It was originally written in 2006, about two years before Google Chrome and Opera Dragonfly (Opera’s developer tool) ever saw the light of day. A Lite version of Firebug is available as a bookmarklet for IE6+, Opera, Safari and Chrome, but the full version is Firefox-only.

Starting to use Firebug is easy, even if you are not a pro Web developer. Simply right-click anywhere on the page and select Inspect Element from the context menu. Firebug will pop up in the bottom half of the window, displaying details about the element you just clicked. You can also detach the Firebug pane and make it into a standalone window–very handy if you have more than one monitor. You can inspect any page on the Web, not just your own. This makes Firebug into a very good educational tool–think “View Source” on steroids.

When I was doing a lot of work with CSS (cascading style sheets), Firebug was indispensable. It is not always easy to understand why a certain page element shows up where it does or how some website achieved a neat visual effect with CSS3. Firebug let me see what CSS rules apply to each element, and where these rules come from. To test different rules, I simply needed to type them into Firebug and see how they affect the page instantly. No need to type them into my CSS editor, save, upload, and refresh. Firebug also includes such amenities as CSS auto-completion, and incrementing or decrementing values using the arrow keys. It’s a fantastic learning tool, too: You can see what each CSS rule means right on the page, and not just by reading a dry description of it.

Firebug is so large that it has add-ons of its own. That’s right–add-ons for an add-on. Optional Firebug panels include CodeBurner for extending Firebug with HTML and CSS reference materials, and FireFinder for matching CSS selectors or XPath expressions to various page elements. These are just two of the myriad Firebug add-ons available on the Mozilla add-ons site.

I use Chrome for my day to day browsing, but Firebug keeps me coming back to Firefox whenever I need to develop or debug a webpage.

Note: The link takes you to getfirebug.com, where you can install the add-on directly into your Firefox browser.

–Erez Zukerman