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.
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 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.
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.
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.
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.
Kevin YankKevin Yank is an accomplished web developer, speaker, trainer and author of Build Your Own Database Driven Website Using PHP & MySQL and Co-Author of Simply JavaScript and Everything You Know About CSS is Wrong! Kevin loves to share his wealth of knowledge and it didn't stop at books, he's also the course instructor to 3 online courses in web development. Currently Kevin is the Director of Front End Engineering at Culture Amp.
