Like many of you, I’m sure, I hate debugging JavaScript. Really, it’s not the debugging, per se, as much as it’s using alert() to echo stuff out to the screen. It’s stupid and distracting and takes for ever if you’re debugging a lot of stuff.
For the last few months, I’ve been toying with a few different means of error reporting and echoing out debugging information, but hadn’t been really satisfied with anything I’d 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 don’t 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 I’ve 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 DOM scripter), and
- it’s 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?
Comments
Thank you for this nice tool.
This is nice, good work, I like it. But have you guys ever tried the script debugger of good old Visual InterDev? I use the one in Visual Studio 6.0. You will never have to put any alerts or trace calls in your code anymore. You can browse through all the objects in your page, you can jump through your code executing certain parts, you can change variables during debugging and so on. It is the only real good debugger I have seen so far and it seems to be pretty unknown. It is way much better then the standard Microsoft Script Debugger and easier to handle than Venkman. My speed as a developer increased a lot since I started using this debugger.
Nonetheless I can see how this jsTrace can add functionality even to the script debugger of Visual InterDev. I am gonna keep it in mind.
Thanks for posting the link to your hard work. Going to play with it all night then crash out. Have a happy Thanksgiving!!
Thanks for this helpful tool ! I’ve used Venkman some and this is also helpful.
Was wondering if anyone has experience using the Profiling feature in Venkman to capture # of calls to various javascript functions and length of time for each fxn ? As far as I can tell this is strictly a manual feature…anyone know of a way to automate this powerful feature?
Thanks