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