Debugging JavaScript just got a little bit easier

Like many of you, Im sure, I hate debugging JavaScript. Really, its not the debugging, per se, as much as its using alert() to echo stuff out to the screen. Its stupid and distracting and takes for ever if youre debugging a lot of stuff.

For the last few months, Ive been toying with a few different means of error reporting and echoing out debugging information, but hadnt been really satisfied with anything Id come up with. I used to do quite a bit of Flash work back in the day (before Dave came along and put my best efforts to shame) and always loved the Trace window. I liked that you could just echo stuff out to it and it acted as a running tally of pretty much anything you wanted to track: variable values, messages, etc. Two days ago I decided that was what I wanted for JavaScript.

I toyed with the idea of spawning a popup and tracing the info to that, but I dont like popups. They are possibly more annoying than alert messages (well maybe not). I decided to echo the messages out to a div on the page instead. Then feature creep set in. Before I knew it, it was a draggable, scalable window with some nifty features. Never one to be selfish, I thought other people could find a use for it too, so Ive released it for anyone who wants it: here it is. Use it, play with it and improve on it as you see fit.

The script currently has the following features:

• the window drags scales,
• you can output a delimeter quickly to help further organize your tracing,
• you can quickly clear the window,
• the system is very easy to implement (even for a novice DOMscripter), and
• its easily removable once your debugging is complete.

Special thanks go out to Aaron Boodman, whose DOM Drag was perfect for the dragging and enabled me to hook up a window stretcher pretty easily, Richard Rutter, whose Browser Stickies were also somewhat of an inspiration, and Dave, for helping me debug the scaling code.

Aside: one nice feature of the script is that, once it was operational, I was able to use it to debug itself how cool is that?

Script just got a little bit easier