In-browser Development Tools: Firebug Still King

At the start of this year, I sat down to write the “Errors and Debugging” chapter of Simply JavaScript. I cracked my fingers, dove into the landscape of JavaScript debugging tools, and emerged very disappointed several hours later. At the time, Firefox was the only browser with a JavaScript debugging tool worth writing about: Firebug.

Less than a year later, the landscape has changed dramatically. Every major browser has introduced new development tools that make it easier to diagnose problems with your HTML, CSS, and JavaScript code right inside the browser in question. But can any of these tools stack up against the slick and effortlessly powerful tools provided by Firebug? Let’s take a look.

Internet Explorer

Internet Explorer is notorious for coughing up mysterious rendering behavior and useless JavaScript error messages at every turn, and Microsoft is obviously making a concerted effort to improve not just the browser itself, but the tools available for developers to diagnose such issues.

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.

As for JavaScript debugging in Internet Explorer, the picture isn’t pretty. The Microsoft Script Debugger is a free download, but it’s so buggy, unstable, and confusing that you’ll wish it wasn’t. The Microsoft Script Editor is a passable debugger, but it was only distributed with Microsoft Office XP and Office 2003—you can’t get it anymore.

What you can get is Visual Web Developer 2008 Express Edition, which includes an extremely slick and powerful JavaScript debugger. If you’re building an ASP.NET-powered site, you might even want to use it to build your site, in which case using its JavaScript debugger is a cinch. If you only want to use it as a JavaScript debugger, however, you could be in trouble. If your page is throwing a JavaScript error, then you can trick Visual Web Developer into debugging your site. If there is no actual error, but you’re just trying to hunt down some strange behavior, you may need to shell out several hundred dollars for Visual Studio 2008, which can connect to and debug a running Internet Explorer process.

Internet Explorer 8 is set to make things much easier by adding some polish to the features of the Developer Toolbar, adding a solid JavaScript debugger, and building them right into the browser. Microsoft gave us an early look at these improved tools with the release of IE8 Beta 1. Though they look promising, some of Firebug’s advanced features (like network monitoring and profiling) are still missing.

ie8-debugger-small.jpg

In summary, the situation with Internet Explorer is iffy, but improving. Let’s see how the other major browsers are doing…

Safari

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.

Safari’s Web Inspector

Safari 3 also introduces an excellent JavaScript debugger for Safari: Drosera. Once you configure your copy of Safari to allow a debugger to connect, you can fire up Drosera alongside the browser and use it to pinpoint problems with your JavaScript code.

Although Drosera works well, someone must have decided that it would be better to build the JavaScript debugger right into the Web Inspector. That’s exactly what the current development version of WebKit does, so we can safely expect a built-in JavaScript debugger in Safari 3.2, currently expected in September.

Safari’s new web inspector

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.

Opera

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.

Not only can Dragonfly inspect the HTML and CSS and debug the JavaScript of a page running in Opera 9.5, but it can also connect to the latest version of Opera Mobile running on a Windows Mobile smartphone. Since the platform is open source, other browsers could theoretically add support for Dragonfly as well.

Opera’s Dragonfly developer tool

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.

Firefox

…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.

Still, Firebug remains the single most functional and powerful tool for web developers to diagnose and fix issues in HTML, CSS, and JavaScript code. The other browsers have come a long way (especially Safari, which only lacks a couple of minor features and compensates with a very slick user interface), but none of them have everything that Firebug has had for over a year.

Firebug 1.2

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.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.studio-gecko.com/ XLCowBoy

    I have to agree. I’ve been using most of these, and I would come to the same conclusion.

  • Grant Palin

    The Firefox+Firebug+Web Developer combo is, I think, well beyond the other browsers’ development tools. I’ve tried the IE toolbar, but it just doesn’t have the elegance of Firebug. Dragonfly for Opera is pretty neat, and I will be keeping my eye on it. Really must try out the Safari tools.

    But as far as I am concerned, at the moment, Firefox is the supreme.

  • http://aldomatic.com aldomatic

    I have to agree too. Firebug and WD Toolbar are my main choice when it comes to debugging Javascript and CSS.

  • http://www.reich-consulting.net/userproof/ coffee_ninja

    PHP developers, don’t forget FirePHP!

  • Jim Neath

    Firebug and WD Toolbar are an awesome combination.

    Along with a couple of other extensions (Colorzilla, MeasureIt) I’ve pretty much got everything I ever need.

  • http://www.davidtan.org DavidTan

    Have to agree with firebug + firefox is currently the best combination.

    Wrote something similar about web developer tools but missed out safari.

  • Seether13

    Also only recently discovered firebug and really like its capabilities

  • Brian LePore

    The Microsoft Script Debugger is still available for download. You’re right that it is still buggy as heck, but you can still use it.

    I just discovered the Visual Web Developer the other week. I would not bother with the Microsoft Script Debugger. The MSD is just not worth it. And I think it has totally hosed up my system as it does not seem to run under Vista.

    Two other entries worth mentioning, Fiddler does give you network monitoring for IE, and Yslow is an excellent extension on to Firebug.

  • Anonymous

    Posting this with a newly created profile! Let us see if this shows up.

    The Microsoft Script Debugger is still available for download. You’re right that it is still buggy as heck, but you can still use it.

    I just discovered the Visual Web Developer the other week. I would not bother with the Microsoft Script Debugger. The MSD is just not worth it. And I think it has totally hosed up my system as it does not seem to run under Vista.

    Two other entries worth mentioning, Fiddler does give you network monitoring for IE, and Yslow is an excellent extension on to Firebug.

  • speratic

    Opera has a web developer menu as well. Not as powerful as the WD toolbar, but still quite good.

  • Mark

    I agree… Every time I hear about a new tool, I always here that it’s “similar to Firebug”, but it always falls short. It’s not similar to Firebug until I can change the values of CSS properties, execute arbitrary javscript, see the contents of XHR requests, click on an element to get its properties and then easily refer to that in the JS command line, and edit pretty much anything on the page in real time. Oh, and do all that in an extremely intuitive and easy way.

    Which isn’t to say Firebug is perfect, or that I haven’t been disappointed by the slow progress it’s made since Joe Hewitt has had to turn his attention to things that make money or whatnot. But it’s still by far the best, and hopefully today’s announcement that John Resig is going to devote half his time to Firebug will make it even better.

    However I really do think not having Joe actively on the project will hurt. Firebug’s usefulness stems from having a developer that knows his javascript at an expert level, understands the internals of Firefox intimately, understands basically everything about FFox’s plug-in architecture, regularly has to face the real-world problems of web developers and has a keen sense of usability. That describes basically one dude, and he’s busy.

    But let’s face it, he’s given us a hell of a good platform to work off of. I can’t believe I used to do my job without it. Web development before Firebug was like being a scientist before microscopes.

  • Sham

    No this is all wrong and preconcieved. FB+FF is a good combination but FB is not king in the least. IE8′s dev tool is still in beta and the soon to be dev integration within VS2008+ is goind to make it one complete diagnostic/dev platform.

    One this MS does and does well is integrate. MS is finally listening to developers from all platforms across all environments and they are starting to finally listen.

    FB is one of this good enough for now tools…but when it comes to serios develment the only way to go is a complete platform and this is something MS can do easily.

    -Sham

  • Sham

    errr integrate=intergrate…just realized I was misspelling the entire word :P