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.

First off: both tools are wonderful.  If you are doing web development (JavaScript heavy or not), do yourself a favor and install BOTH of them.  If you are using IE7, upgrade.  If you are using IE6 … may the gods be merciful on your soul.  Actually, let me restate that: There are no redeeming qualities to IE6 as to put up with it except by threat of violence.  Get rid of the beast.  (Then download the IE6 vm from Microsoft).

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:

Feature	IE8	FireBug +FireFox	Opera	Safari	Chrome	Usefulness
HTML
Syntax Highlighting	Yes	Yes	Yes	Yes	Yes
Code Folding	Yes	Yes	Yes	Yes	Yes
Html Editing	Yes	Yes	No	No	No
HTML Validator	Yes*	No	No	No	No
Clear Cache	Yes	No**	No**	No**	No**
Select and Highlight	Yes	Yes	Yes	Yes	Yes
Layout	Yes	Yes	Yes	Yes	Yes
CSS
Css Viewer/Editor	Yes	Yes	Yes	Yes	Yes
Css Syntax Highlight	Yes	Yes	No	No	No
Disable CSS Styles	Yes	Yes	No	No	No
Create New Styles	Yes	Yes	No	No	No
Validate CSS	Yes*	No	No	No	No
JavaScipt
Javascript Highlight	Yes	No	Yes	Yes	No
JavaScript Debug	Yes	Yes	Yes	Yes	No***
Breakpoints	Yes	Yes	Yes	Yes	No***
Step Over/In/Out	Yes	Yes	Yes	Yes	No***
JavaScript Profiler	Yes	Yes	No	Yes	No
Execute JavaScript	Yes	Yes	Yes	Yes	Yes
Call Stack	Yes	Yes	Yes	Yes	No
Local Variables	Yes	Yes	No	Yes	No
Watch Variables	Yes	Yes	Yes	No	No
Web Service Viewer	No	Yes	No	No	No
Intangibles
YSlow	No	Yes	No	No	No
Browser Mode Switch	Yes	No	No	No	No
Dockable	Yes	Yes	Yes	Yes	Yes
Color Picker	Yes	Yes*	No	No	No
Net Tab	No	Yes	No	No	No

* 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:

Google Chrome: Chrome has its Developer menu which contains a primitive set of the features listed.  It is missing quite a bit, but it is able to view html, css, and JavaScript, debug JavaScript, modify css on the fly, and a few other items.  All things considered, it isn’t bad, but Chrome is well behind the other two browser for functionality.

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.

What do you get: you get a better JavaScript debugger than what Chrome has.  The Resources tab works.  A profiler (nice touch).  But there is this Databases thing that I know nothing about.

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
https://addons.mozilla.org/en-US/firefox/collection/webdeveloper
This includes Firebug, YSlow, ColorZilla, Web Developer Toolbar, and more.  Please just get the collection.

Note: Star Image via FamFamFam

Chris Brandsma JavaScript, html, web