A long while back I posted that IE8 was shipping with a new Developer Toolbar that was very similar to FireFox’s Firebug. Now that I’ve had several month to play with each, I thought it was time to comment on the two of them.
I know .Net/C# developers that almost refuse to help you unless you have ReSharper installed. Same goes for web developers these days. You need IE8 and FireFox+FireBug. It is that important.
Moving along then.
Getting started with either of them is fairly similar. F12 is your friend. Click F12 and you will get on of the two displays below. You see color coded html, code folding, and display of css style information.
OK, to write everything out would take too long. Here is a breakdown:
* Uses 3rd party web site
** Available in other areas of the application
*** Technically you can…but you really don’t want to.
You can see that there are a number of features missing from each tool. That said, I think FireFox+FireBug has an advantage right now, mainly for YSlow, the Console Tab (displays web service traffic), and the Net Tab. Those three are huge. For the items that FireFox+Firebug are missing, you should probably install the Web Developer Toolbar for Firefox. I tend to install both of those on every machine I own.
For IE8, the fact that you can switch between IE7 and IE8 mode, Standard and Quirks Mode is also huge. The built in Html/CSS validation doesn’t hurt either. But what really shines in IE8 is the built in tools. Color selection, Cache Management, Outline, Image, etc. To get those in FireFox you need the Web Developer Toolbar for Firefox. To see the web service traffic in IE8 (that Firebug gives you), you need to get Fiddler2. Actually, you should have Fiddler for both browsers.
But what about those other browsers:
Apple Safari: Lions and tigers and bears – oh my! Test in Google Chrome. Hope it works in Safari.
EDIT: I was show the error of my ways with Safari. Safari does have developer tools – and they are EXACTLY what you get from Google Chrome, plus some extras. Which makes sense, after all the two browsers use the same code base – but come on, at least get some new icons!
But to find the developer tools, you have to show the menu bar. Then go to preferences, Advanced Tab, and check “Show Develop menu in menu bar”. Next go to the Develop menu and select “Show Web Inspector”. Actually, check out everything in that menu.
I still don’t think Safari is better than Firefox or IE8, but it is an improvement on what you get with Chrome.
Opera: I had some trouble getting the Opera tools to work. Could be me. But all said and done, the tools you get are serviceable.
And the winner is…
You the web developer, who for years has toiled away in the archaic knowledge of proper alert placement. You win. Both these tools are wonderful, I just wish we had them long ago. That said, it is hard not to give FireFox+FireBug a slight advantage in this race.
EDIT: Since the initial publication, Mozilla has released the Web Developer Toolbox Collection
This includes Firebug, YSlow, ColorZilla, Web Developer Toolbar, and more. Please just get the collection.