In-browser Development Tools: Firebug Still King
The Internet Explorer Developer Toolbar for IE6 and IE7 is a useful tool for fiddling with page styles on the fly when you’re hunting for a work-around to the rendering issues in those browsers. Its features for diagnosing actual bugs in your CSS are clumsy, but capable. Its ‘Trace Styles’ feature, for example, will let you look at a list of rules that apply to an element, but it can’t compete with the at-a-glance view of the CSS cascade that you get with Firebug.
In summary, the situation with Internet Explorer is iffy, but improving. Let’s see how the other major browsers are doing…
Safari has come a long way this year already, and it’s set to get even better! With the release of Safari 3, not only did Windows-based developers gain access to a native version of this browser on which to test their designs, but the WebKit team threw in a bunch of new tools for developers.
First up is the Web Inspector, which you can access in Safari 3.1 by enabling the Develop menu (on the Advanced tab in Safari Preferences). Not only does it provide the same powerful on-the-fly CSS tweaking and at-a-glance view of the CSS cascade as you get in Firebug, but it also includes Firebug-like network monitoring.
In just a year, Safari has gone from providing virtually no developer tools worth mentioning to having the slickest (and very nearly the most powerful) tools around. The WebKit team is clearly on fire.
Like Safari, the just-released Opera 9.5 has gained some impressive new developer tools since its previous release. Dubbed Dragonfly, what Opera has produced is more than just its answer to Firebug; it’s a browser-independant platform for web debugging tools.
For now, Dragonfly is still an early effort. Opera 9.5 may be out, but its built-in developer tools are still a bit buggy and unstable. For now, Dragonfly is also read-only: you can’t edit your HTML or CSS on-the-fly like you can with other browsers’ tools. Opera promises live editing is on the way, however; that, and squashing a few bugs should see Dragonfly become a solid contender in the in-browser development tool race.
…which brings us back to Firefox, where the combination of the Web Developer extension and Firebug (among others) has secured its place as the browser of choice for most web developers.
Firebug in particular began this race in the lead, but for the past year the changes to Firebug have come mainly in the form of performance improvements, and compatibility updates for Firefox 3. Firebug’s creator, Joe Hewitt, had this to say about Firebug on the eve of Firefox 3’s release yesterday:
Firebug 1.2 is the new version that is compatible with Firefox 3. Don’t thank me for the new version, as I didn’t write a line of code for it. The credit goes to the open source community that has sprung up around Firebug in the last year, led by John J. Barton of IBM. They’ve done an amazing job and made me feel really good about the decision to make Firebug free and open source.
A lot of work has gone into Firebug over the past year, but very little of it is visible in the form of new features or other improvements to make it more useful to developers. Firefox’s competitors have had ample opportunity to steal the hearts and minds of developers with a competing set of developer tools.
Of course, browser-specific bugs happen all the time, so every browser that offers a comprehensive set of developer tools will benefit. For now, however, thanks to Firebug, Firefox is still the browser that most developers want to call home.