Cutting Edge Browsers and Their Development Tools

Published by Chris Coyier

This is a hot time in the world of browsers. Despite a rocky morning, Firefox 3 got over 8 million downloads when it was released. It's up to over 24 million now. I bet many of you are amongst these downloaders, I know I was =)

I bet many of you do your web design and development in Firefox. Things just seem to behave as you expect them to in Firefox. Plus, it has a wealth of invaluable development tools like the Web Developer Toolbar and Firebug. If you have never heard of or aren't currently using Firebug, I did an introductory screencast for it you can check out.

The ability to view and manipulate the entire DOM of a web page after it is rendered is crazy powerful. I'm not sure if Firebug was the first tool ever created to do this (I doubt it), but it has certainly popularized it. The way that it works, being part of the browser itself, has started a new paradigm of browser-specific development tools. Let's take a look at all the browsers and their latest offerings.

Firefox 3 and Firebug 1.2

Not much needs to be said here, this standard combo has got all the right stuff. Error catching, easy to use "inspect" option for drilling down into code at just what you need to be seeing, performance testing, view of the full DOM, live editing, a console...

You can get Firefox 3 from the regular Mozilla download page. In order for Firebug to work with Firefox 3, you will need the latest Beta release, Firebug 1.2, available only from the Firebug Releases page.


Opera 9.5 and Dragonfly

No need for a separate download, Opera 9.5 comes bundled with the Dragonfly development tools automatically. Activate by going to Tools > Advanced > Developer Tools.

Very similar to Firebug, the debug menu pops up from the bottom of the browser window but can optionally be detached. You are able to see the full DOM and it supports "Find element by clicking" which is very useful. You are able to see the "full computed style" as well as the CSS rules that are applying to that element. Rules that are over-written are also shown, only grayed out. Other Firebug like features include an error console and "layout view" which shows the width/height, padding, border, margin of the element.

Dragonfly is very new, and I feel they have a ways to come before it can match the quality and ease of use of Firebug, but it does offer some compelling features unique to itself. First, we can't forget to mention that this tool existing at all is a great help in allowing us to troubleshoot for Opera specifically. Firebug sure as heck can't help with that. Second, Dragonfly is a "hybrid-application" meaning it is part web-app and part desktop-app. It resides in local storage, but it is instantly updated when there is a new version, no manually downloading a new version. Third, Opera has a good amount of market share for mobile browsers. You can connect mobile devices to your computer and debug using your computer screen which I could see being immensely useful for mobile troubleshooting. Fourth, Javascript debugging includes a step-by-step mode which I could imagine being quite useful.

Dragonfly is missing some vital features at the moment, like live-editing your CSS. This feature is planned for Alpha 2, coming soon.


Internet Explorer 8 and Developer Tools

The IE 8 Beta comes bundled with the developer tools already installed. You can get the IE Developer Toolbar for IE 7 too, if you have that installed. I found the IE Developer Toolbar to be buggy under IE 7 and opted to use the DebugBar instead, which offers about the same functionality. I imagine when IE 8 is officially released, the developer tools will be a separate download.

I think "Select element by click" feature in Developer Tools works fairly well, but still can't live up to Firebug in how just roaming your mouse around the screen highlights different elements. The style viewer is a bit convoluted in that is groups style rules by where they were inherited from starting with the top most parent. This feels backwards to me, as most of those rules are long over-written. You also can't live-edit them, which is a bummer, but you can at least turn individual rules on and off with a single click which is a huge help.

Much like Dragonfly, the fact that this tool even exisits is a huge help to designers and developers needing to troubleshoot and debug in IE. Yes, there is even javascript debugging tools (with neat stuff like Breakpoints) in this tool as well. Remember that Windows system can only have one version of IE installed at once, so if you upgrade to IE 8 your regular IE 7 version will be gone. IE 8 can "Emulate IE 7" though, so you aren't completely rudderless there.

For testing multiple versions of IE (albiet without developer tools), you should check out IE Tester.

Safari 4 (developer preview) and Web Inspector

The current public release of Safari (3) has some pretty cool tools as part of the web inspector. The visualizer for seeing the load times of the different elements of the page is second to none. But Safari 4 (developer preview), which is available for free download to ADC members, has even more juicy developer tools. If you want to check it out, it's a free signup then just go to the "downloads" section of the ADC site.

The web inspector is by far the sexiest of all the developer tools covered here. It has really nice code highlighting and everything looks and functions very smooth and cleanly. A nice breath of fresh air after using the IE development tools. Notably missing from the Web Inspector is any clear way to "click to select" a page element you are trying to troubleshoot. I think someone once told me there was a way but I have since forget and can't find it. Maybe I was daydreaming. You can however click elements in the code and see them highlighted in the browser window.

Live CSS editing is available, which is nice, but you can easily "shut off" styles like you can with Firebug or the IE dev tools. A layout view (called "metrics") is available to show a visual for calculated widths and padding and whatnot. Script debugging is present as well as a real live command-line console which is neat to see. Icons in the lower right are a direct swipe from Firebug, but are very useful for warning you about page errors right away.



Is anyone using any of these full-time for their debugging? I'm sure you can tell I'm a Firebug guy myself but I am extremely happy that we have such powerful debugging tools for all the major browsers in case we need to do browser-specific troubleshooting (like, uhm, all the time).

Feel free to share your thoughts if you have more extensive experience using any of these tools.