Thursday, January 27, 2011

Developer Tools Compared (IE,FF,Chrome,Safari,Opera)

This post is part 1 of 2 comparing the relative functionality among IE, FF, Chrome, Safari and Opera's web developer tools.

Here is a spreadsheet I created to show the differences in features among the different browsers.  I will continue to update this as I learn about more features and add-ons.

I've branched out a bit from just the javascript debugger and tried to cover some of the useful tools as well that are part of the browsers.  Eventually, I'd like to grow this spreadsheet into a full on comparison of virtually every feature/bug in all the browsers.

The spreadsheet is not editable, but feel free to post comments if you find any issues or want to add something to it.

So here is a quick summary of what I found:

1. All the browsers can debug javascript and update CSS realtime.
2. IE and FF had the best command line interfaces. I had a hard time finding the command line in the other browsers, but will continue to try and find them.
3. Safari and Chrome have virtually the same interface (Did Google license Safari's developer tools?)
4. One should have no problem whatsoever debugging javascript and CSS issues in any of these browsers.
5. IE was surprisingly the most robust feature-wise, with a great many more features than any of the other browsers and missing only a color picker.

In part 2, I will provide a subjective rating of each of the browsers abilities to help web developers debug issues with their websites.

2 comments:

  1. Safari and Google Chrome both use Webkit and Webkit's built in javascript/css/html inspector is called Web Inspect, https://svn.webkit.org/wiki/WebInspector thats why they look virtually identical, they are working with almost the exact same foundation.

    ReplyDelete
  2. Thanks I was wondering about that. A while back I tried to use Chrome's command line JS debugger and got disgusted, this is much better.

    ReplyDelete