Firebug Reaches 1.0
There has been some recent chatter around the web - I read about this on the websites of Roger Johansson and Dave Shea - about a new, super useful extension for Firefox called Firebug.
Some of the extensions I use include HTML Validator, DOM Inspector, XML Developer Toolbar, and the excellent Web Developer Toolbar. These are all very useful for their purposes, but there is a gap in the functionality they collectively provide. This missing functionality is being able to step into the scripts, markup, and style sheets used on a website.
Firebug fills this gap.
With Firebug installed, you can open in Firefox - as a pane or a separate window - a set of tools that allow you to dig into the internals of a website. Specifically, you can view a Document Object Model of the page, similar to what the DOM Inspector extension provides - it may be time to retire that one - but in more detail, and you can view the contents of scripts and stylesheets attached to the page. The style sheets part has a nice feature: you can go into the style sheet and selectively disable individual style rules, and the resulting change takes effect in the window viewing th site. Very cool. It also shows how styles for child elements are inherited from parent elements - this can be very useful to locate any cases of conflicting rules. As a more general feature, you can edit markup, scripts, and style sheets on-the-fly and have the changes immediately show up in the browser. Great feature!
Oh, there’s too many useful features to list here, so I’d suggest going straight to the source. Run, don’t walk, to Firebug today! If you want to see a demo of some features, there is a screencast available.
I can see Firebug being very useful, and will be sure to use it when building future web projects. I’ll watch the project with interest and see how it goes along.
Roger seems to think Firebug should is the Web Developer Tool of the Year - coming from him, that’s saying something!