After reading recently that IE is finally wearing out its welcome (except in government and huge companies), it occurred to me that I couldn’t remember precisely when I had started using Chrome as my primary frontend debugger, but that it is measured in months.

Why would someone use Chrome over IE or Firebug? Well, here are the things that I like:

Always Feels Light and Fast

I can’t quite put my finger on it, but Chrome doesn’t seem to suffer from the same bog-down bloat that Firefox does over the course of a debugging session.  New tabs and windows spring open, and script debugging is snappy.   I have to close a crashed tab occasionally, but I’d rather have that happen than experience debugger lag any day of the week.

Editing is Intuitive

Altering the DOM or CSS in-place just feels natural.  Tab orders make sense and do what I expect; adding or changing properties, styles, or elements is a breeze.

Help is Just a ? Away

Typing a question mark anywhere in the debugger presents a modal dialog with common key commands for each section.  It’s not a killer feature, but it’s more convenient than having to drill into a Help menu to remember how to increment a value by 100.

Live Tutorials in the Documentation

The documentation for Chrome Developer Tools is specifically designed for you to pop open your debugger and walk through the functionality.  This is a great way to learn-by-doing, which helps retention several times over.

Revision History!

This is, by far, my favorite new(ish) feature.  After making changes to JS or CSS in the Elements tab, switch over to the Resources tab and drill down to the file.  Expand the arrow, and you’re presented with a list of revisions for the entire session that you’ve been fiddling.  You can see what has changed in each version highlighted, and ultimately, opt to save off changes or revert if something goes awry.

Drag-and-Drop DOM

Ok, I’ll admit this is more of an oddity than anything else, especially since the revision history doesn’t extend to the HTML markup of a page.  But maybe it’s useful for rapid prototyping?  In the Elements tab you can literally drag elements around on in the DOM where you see fit.  Want to see what would happen if you switched the positions of two divs?  You can do that now!

But Wait, There’s More!

Not enough? There’s also remote debugging and the ability to pretty print minified scripts, with more features added regularly.  Check out this presentation earlier in the year from gurus Paul Irish and Pavel Feldman, and happy hacking!