Web developers can breathe a sigh of relief with Firebug

Filed under: Freeware, web 2.0, Browsers

Web developers can breathe a sigh of relief with Firebug

by Adam Maras Jul 3rd 2008

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

Reader Comments (Page 1 of 1)

ratt said 10:13AM on 7-03-2008

I had just remember when web page bugs were located by intuition.

Adam Maras said 1:13PM on 7-03-2008

Yeah, and i remember when web pages were simple enough that you actually could find bugs like that. However, you have to think about things like dynamically generated pages (from PHP, ASP.NET, RoR, etc..) and pages that have dynamic content like AJAX on them, where you can't always just hit Ctrl+U and look at the markup that was sent to the browser to find your problems.

Dave Forster said 3:34PM on 7-03-2008

As an ASP.NET and Ajax developer Firebug is "un-live-withoutable". Like the previous comment, chasing your tail trying to debug dynamic and partial content is much less of a pain... oh if only they would do it for IE i'd be able to sleep at night... sometimes. IE's web developer toolbar is fairly useful but not a patch in FB

zmnatz said 6:41PM on 7-04-2008

I agree entirely, I just got my first job in Web Developement. We didn't learn any of this stuff in school and I'd be lost without Firebug. It has truly saved me from hours of debugging already and I've only been working a few weeks.

duvet-dayz said 8:47PM on 7-12-2008

We have just put a two page PDF / PNG cheat sheet for Firebug online with all keyboard shortcuts etc. after we could not find one anywhere online.

It's at http://duvet-dayz.com/archives/2008/07/12/794/

Featured Time Waster

Civiballs is a beautiful, soothing physics puzzle Time Waster

I have an absolute weakness for physics games, and while Civiballs isn't the strongest physics-based game, what it lacks in the physics department it makes up for a few times over in style and fun.

In Civiballs, you are presented with a few colored balls, and your goal is to get those balls into the same-colored urn on the level. The "civi" part of Civiballs is that there are 3 sets of levels to play, each representing a different civilization. While the civilization doesn't affect gameplay, the artwork for each level is beautifully themed to it's appropriate era.

To play the game, you are given only one tool - a sword with which to cut the chains that are holding the balls. The puzzle part of the game is in figuring out what order, and with what timing to cut each chain. Do it right, and all the right balls end up in the right urns, with no stray balls entering an urn (a no-no). Do it wrong, and you get to start over again.

Civiballs is not terribly deep on gameplay; the entire game can be completed in about 15 minutes. But if you enjoy this type of game, it will be a very enjoyable 15 minutes.

View more Time Wasters