FireFox+Firebug vs IE8 Developer Toolbar

May 18th, 2009

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.

image image

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 star star
Code Folding Yes Yes Yes Yes Yes star star
Html Editing Yes Yes No No No star star star
HTML Validator Yes* No No No No star
Clear Cache Yes No** No** No** No** star star
Select and Highlight Yes Yes Yes Yes Yes star star star star
Layout Yes Yes Yes Yes Yes star star
CSS
Css Viewer/Editor Yes Yes Yes Yes Yes star star star star
Css Syntax Highlight Yes Yes No No No star star
Disable CSS Styles Yes Yes No No No star star
Create New Styles Yes Yes No No No star star
Validate CSS Yes* No No No No star
JavaScipt
Javascript Highlight Yes No Yes Yes No star
JavaScript Debug Yes Yes Yes Yes No*** star star star star
Breakpoints Yes Yes Yes Yes No*** star star star star
Step Over/In/Out Yes Yes Yes Yes No*** star star star star
JavaScript Profiler Yes Yes No Yes No star star
Execute JavaScript Yes Yes Yes Yes Yes star star
Call Stack Yes Yes Yes Yes No star star star
Local Variables Yes Yes No Yes No star star star
Watch Variables Yes Yes Yes No No star star
Web Service Viewer No Yes No No No star star
Intangibles
YSlow No Yes No No No star star
Browser Mode Switch Yes No No No No star star star
Dockable Yes Yes Yes Yes Yes star
Color Picker Yes Yes* No No No star
Net Tab No Yes No No No star star

* 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

  • wtv

    oh yeah and my favorite. you get a js error reported in firebug and you click on the line number and it takes you to that spot regardless of script location. in ie 8 developer toolbar – source code is not available for this location. poor microsoft…its just too hard for you. wheres the sourcecode at…. the browser side knows where its at because it tried to run it, why not the toolbar??? awaiting ie9 for now

  • Pingback: The UX of Firefox 3.5 | commadot.com

  • http://nagbaba.blogspot.com himel

    nice comparison. i use firebug lite for chrome and ie6. they are not exactly what ff firebug is, but still they surve well.

  • http://www.care.org/ Michael

    Another thing that is a bonus for FireBug is additional FF plugins designed specifically as plugins for FireBug. For example: Firecookie, which gives you a very handy Cookies tab in FireBug and provides good cookie handling right there, and CodeBurner for FB, which adds a very handy reference tab in FB. There are others too, their usefulness depends on your needs. Also, and it might be because I’m fairly new to IE8 so if it does this, maybe I haven’t found it yet — but in FireBug, when you console.log an object, it gives you a clickable link that takes you to the DOM browser so you can see the constituent parts of that object which I’ve found absolutely vital in writting OO JavaScript applications. Also, clearly, IE8 seems to have immulated the console commands from FB, so no more errors or try/catch to prevent them… yay!

    Still toying with IE8 dev toolbar, and while it seems a bit inferior to FB, it does appear to be a massive leap forward for Microsoft (probably because they paid attention to the Open Source community for a change… wish they did more of that!)

  • http://dotnetslackers.com/community/blogs/bmains/default.aspx Brian Mains

    There is a color picker as a third-party add on for FireFox: http://www.colorzilla.com/firefox/

    So I think that makes it a Yes * ?

  • http://www.fighterwarehouse.com/Hayabusa-FightWear-Hayabusa-MMA-Gear-s/2023.htm Hayabusa Fightwear

    Where’s the best download for the ie8 tool?

  • Quymatsatt

    I think that IE8 Developer Toolbar is very bad than FireBug. Uncomfortable !!!!