Wednesday April 12

Goodbye Venkman, Hello FireBug

I'm kind of ashamed to admit it, but I've written hundreds of thousands of lines of JavaScript in my life, and I have never ever used a debugger. Sure, I've always known that Venkman was out there, or the Microsoft Script Debugger, but it has always seemed like too much of a hassle to use them.

I suspect that most JavaScript developers out there are a lot like me in this regard. We frequently wish we had a good debugger. We want to be able to pause our scripts, look at the call stack, and step through them one line at a time, but it's easier to just use "alert debugging" than to fire up a big clunky debugger.

The FireBug Debugger

Starting with the next release of FireBug, this is all about to change. I've spent the last couple days working on adding a simple, lightweight debugger to FireBug that is so easy to use that we can no longer make excuses. Here is a screen shot:

The key to the FireBug debugger is minimalism. I don't want to be Visual Studio, and I'm not planning to copy all of Venkman's features. I just want to be able to say "Hey FireBug, stop my script right here so I can see what the heck is going on!" So just how do you stop your scripts using FireBug?

Breakpoints vs. The "debugger" Keyword

My biggest problem with external debuggers like Venkman is that it's too much work to set breakpoints, since they aren't integrated with your text editor. Luckily, JavaScript has a trick up its sleeve that, in combination with FireBug, can make our lives much easier. Whenever you use the special keyword debugger in your script, FireBug will treat that line as if it were a breakpoint, and stop your script right there.

Of course, breakpoints are still handy, especially if you want to examine a script on somebody else's website, so FireBug still allows you to set breakpoints by clicking on any line number.

Testers Wanted

Before I release FireBug 0.4 to the world, I'd like to take some time to test it out and gather feedback from a few people. If you're interested in trying it out and helping me get the debugger right, please email me and I will send you a link to install a development build.

Finally

I rag on Venkman, but it's really a great tool. We owe a lot of gratitude to Rob Ginda, not only for creating Venkman, but for the JavaScript debugging API that is included in Firefox. It was really quite easy to hook this API up to FireBug thanks to all of Rob's hard work years ago.