Sometimes when you’re chasing down a bug, the quick and dirty ‘caveman debugging’ approach is easier than using an actual debugger with breakpoints and ‘all that happiness’ (as my father says). The trace() function is great for this, but if want to view flash traces in a web-browser you have to deal with the debug player and Flash-tracer setup. And if you want to get input from someone who doesn’t have those tools you’re out of luck.

The other day I found myself in the above situation and so I wrote up a very lightweight and VERY basic class called DebugWindow. It recreates the trace() functionality within your swf, by adding a “debug window” to the display list. To use it, just call its output() method instead of using trace()

As you can see from the demo, you can use SHIFT + SPACE to hide/show the debug window. CTRL + UP/DOWN allows you to scroll to view older text. There are a few other helper functions that allow you to clear the window entirely or clear then output in one call. You can also set window size, text, background and border colors in the constructor. It’s all commented in the class.

If you’re not done with your project and still wish to use the debug window but don’t want users seeing it, set the enabled property to false. This will remove all event listeners, hide the window and block any output calls. It’s still recommended you remove all debug code from your project when finalized.

I considered adding features like a scroll bar, line numbers and some other stuff but at the end of the day this is just meant to be a light and dirty way to get some data out of your swf no matter where it’s running, test mode, browser, iPad… whatever.

Here’s the AS3 DebugWindow Class

Oh and in case you’re wondering, I grabbed the bacon facts and Nintendo facts from these two sites… much more interesting than using Math.random()*5000 :P