Falling in love with the IE8 JavaScript debugger

If there’s one thing Microsoft does really, really well, it making IDEs with great debugging capabilities. With the release of Internet Explorer 8, they took that experience and applied it towards JavaScript debugging. The result is nothing short of spectacular.

To be honest, I’ve never been a huge fan of Firebug’s JavaScript debugger. It sometimes loses track of the code that’s executing, it doesn’t block all script execution while at a breakpoint, and it’s impossible to debug crunched files that appear on a single line of code. The IE8 JavaScript debugger does everything right. Some are calling it a Firebug ripoff, but Firebug’s JavaScript debugger could learn some tricks from it.

First, the IE8 debugger allows statement-level debugging. It doesn’t matter how many statements are on the same line of code, it very clearly highlights in yellow the statement being executed. You want to set a breakpoint on the control condition of a for loop? No problem. Want to step through each variable initialized with a single var? It can do that too. If you’re debugging crunched JavaScript code in production, you can actually use the step over, step into, and step out functionality because you know exactly what code is executing at any given moment. Firebug can’t do that.

The breakpoints in the IE8 debugger are incredibly smart. It knows exactly where breakpoints are allowed and where they aren’t, correctly understanding anonymous functions and other strange JavaScript patterns. There’s no pause when a breakpoint is hit (a la Firebug) and breakpoints are incredibly simple to add and remove in a number of ways.

The Immediate Window is something that’s been a longtime coming. It’s not as pretty as Firebug’s, and not as functional, but it does enough to make simple code execution easy. I hope at some point they add a way to clear the console and some way to output messages to it. This is the one feature that needs a lot more love.

Want more? You can debug code that is interpreted by eval(). You can debug inline HTML event handlers. I’m not sure why this hasn’t been done before, but it’s huge not to mention impressive.

I’m really falling in love with the IE8 JavaScript debugger. It’s the best one I’ve used first discovering that Visual Studio 2003 could be used for JavaScript debugging. Firebug better get its game face on, the IE JavaScript developer is in it to win it.

Note: After my initial post, I downloaded Firebug 1.1 beta and see that they have implemented some of the features that the IE8 JavaScript debugger has. I hope this starts a JavaScript debugger war.

Comments

  1. cory

    I just had to leave a comment...

    Reasons why I think IE8's script debugger is junk:

    1) No console. Immediate Window is a poor replacement and is barely useable.
    2) Stop/Start Debugger? WTF? Just debug. If the debugger hits a breakpoint or an error it won't allow you to touch anything else until you stop the debugger. So if you see your goof, make the change, and save the file to test again. You then have to click "Stop Debugger". "Start Debugger". Refresh the page and check to see if it's fixed. Not that bad? Yeah... imagine it over and over and over again.
    3) No docking? I don't have multiple monitors. Switching between windows 1500 times a dev session is a PITA. Not only does it break my normal flow (ALT+TAB to editor ALT+TAB back to browser and refresh), it also isn't very compact. I know I *should* have a 24" monitor -- but I don't. Screen real estate is precious.
    4) I can't change styles/css/html on the fly. I can disable styles. But what if I want to test various styles without reloading my page? Being able to do this makes things a ton easier and speeds up development. I can't insert or edit HTML code. This isn't often used by me, but incredibly useful when I need it.

    You are correct. MS does write some good desktop IDEs. But, I think the very fact that they approached this debugger like their other IDEs is part of the problem. The web is NOT the desktop... no matter how much they try to make it so with .net.

    IE8's dev tools are leaps and bounds better than IE7's. But... that's like saying lethal injection is better than the electric chair -- end result is the same. IE will still be at the back of the pack and still be dreaded when I am working on any web app.


    A lot of people will say, "it's a beta". Yes. But remember when IE7 was beta and everyone was screaming, "THIS IS CRAP!", and they still released it a couple of months later. Why do I feel like this is happening again? Oh well, i'm getting offtopic.

    IE8 conclusion, debugger and all: I hate it, I hate it with all my heart. I hate it as much as a human could hate a piece of software.

  2. Nicholas C. Zakas

    @Cory - it seems like your main complaint is that it's not Firebug.

    1) The immediate window isn't meant to be equivalent to the console. It's a first step, be patient.

    2) I suspect this is done for performance reasons. Firebug really slows down the JavaScript in a page because it injects extra code to allow its functionality. Gmail and other sites now recommend people turn off Firebug for a better experience. In truth, just turning off JavaScript debugging would be good enough.

    3) Resize your browser window. I'd be willing to be that docking will be available soon, but it really doesn't seem like a big deal.

    4) This was in the IE7 developer tools so I suspect it will be included soon.

    Hatred is irrational when referring to software. :) You can feel free to hate it, but that doesn't make it bad software. It isn't the best it could be yet it's still way better than anything we've had for IE before. You can't get Firebug for IE, so unless you want to go back to using alerts for debugging, I'd recommend giving it a chance.

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.