Filed under: Freeware, web 2.0, Browsers

Web developers can breathe a sigh of relief with Firebug

by Adam Maras (RSS feed) Jul 3rd 2008 at 8:00AM

Ahh... nothing like the sweet smell of website glitches in the morning. The web development junkies here at Download Squad know how it feels to spend hours tracking down stubborn CSS styles that have managed to magically disappear, or have cascaded themselves into places where no man has gone before. We can attest to debugging JavaScript into the wee hours of the night, and trying to get rid of that one extra pixel of whitespace at the bottom of the page until we give up and hope nobody notices.

If the above description fits a lot of your day-to-day activities, and you're a Firefox user, Firebug, something we covered a couple years ago in its infancy, is the extension for you. When we last looked at it, Firebug was a basic JavaScript console with a DOM inspector. However, since then, it's had a couple of layout changes, and has been given features that changed Firebug from a simple developer console to a powerful tool for all aspects of web development.


At first glance, Firebug's interface offers you a tree of your markup, allowing you to easily browse through your HTML to find the node you want to work on. Once you select a node, you can edit virtually any of its properties. Firebug allows you to change its associated styles, edit tag attributes, and even edit the contents of the tag itself. These features allow you to try different styling or markup without having to go back to your website, edit the source (and reupload it, if it's a remote site and you're not using Visual Web Developer) and reload it in your browser.

Firebug also includes a powerful JavaScript debugging interface and console. Once enabled, Firebug's status bar icon will notify you if the site you're browsing has encountered JavaScript errors; if you open Firebug and select the Console section, you'll get to see all the warnings and errors that occurred on the page. The debugger also packs conditional breakpoints, a stepper, a stack tracer, watch expressions, and tooltips that show the value of the variables you're hovering over. Firebug's JavaScript and network profilers will also help you optimize your code by telling you which routines are taking the longest to run, and where the largest or slowest content of the website is coming from.

If you're ready to reclaim hours of your web development life, give Firebug a try. If you're on Firefox 2, version 1.0 will work for you. If you've made the move to Firefox 3, you'll have to head to their Firefox Add-ons page to grab the latest beta. Firebug also has a lite version for web developers who aren't using Firefox, however, it only acts as as a JavaScript error console, and doesn't include any of the markup or styling features included in the full version.

Tags: developer, firebug, firefox, javascript