Debug Window v2 – Simple Flex Debug Window

Back in Flex 1.5, I created a simple DebugWindow that was 1 class, and worked inside of Flex apps.  I don’t like a lot of complexity, and the fact I just needed to drop 1 class in my project, and write 2 lines of code to make it work was something that no others delivered on.  Using trace required you to not look at your Flex app to see traces, you had to run in debug mode, and you had to use ASCII art to filter messages.  I was using LuminicBox for Flex 1.5 projects later in the game, and in 2 & 3, I used the AS3 update of it by Mark Walters.  There were a couple of problems, though, and some features I wanted to add.

So, I revisited my DebugWindow in hopes of keeping the same setup & ease of use simplicity.  DebugWindow only required 1 class, and 2 lines of code to make it work.  However, I wanted the message type & filtering that LuminicBox had with 2 other features: developer message filtering & clipboard copy.

Enter DebugWindow v2.  There are plenty of other debuggers out there, so here’s the quick skizzy on what mine offers.

Features

1. If you are/were a LuminicBox fan, you’ll (mostly) feel at home.
2. Works in your application; no browser or AIR dependencies
3. Simple setup; requires a SWC and 2 lines of code.
4. Open source under MIT license.
5. Simple API; Debug.log, Debug.debug, etc.
6. Works; I’ve used on 4 projects so far.
7. Works in Flex 3 & 4.
8. Works in AIR.
9. Trivial to wire up to work in AS3 AIR.
10. Falls back to trace.
11. Filters message types by log, debug, info, warn, error, and fatal.
12. Easily copy to clipboard.
13. Auto-scrolling can be turned off.
14. Easy to clear.
15. Filter message types.
16. Compile time filtering for different loggers; for example, you can choose to only show your messages and a profiler for example.
17. Built using Flex SDK; tweak if you need to.
18. You can close it and your messages are still there and continually recorded.

Cons

• Doesn’t work in the Flash IDE.
• Not very fast (remove from production code).

How to Use

Drop the SWC into your libs folder.  Then, use this code (I typically do it in Application.mxml file’s script block).

import mx.managers.PopUpManager;

PopUpManager.createPopUp(this, DebugMax, false);
DebugMax.log("Application::init, DebugMax ready and able, SIR!");

Message Types

For more thorough documentation on when/where to utilize the different message types, refer to the logging section in my previous consulting article.  Below, I’ll briefly cover them.

Log’s are for common messages that should occur every time your application runs.  If you don’t see these log messages, you should be worried.

Debug’s are for when writing new code that you want to visually confirm is working in addition to your unit tests.   They are also for log messages you don’t intend to leave in your application long; they are supposed to stand out as being temporary.

Info’s are for unique situations you want be made aware of, but aren’t necessarily bad.  They are best used in tandem with debug’s so they stand out.

Warn’s are for errors that occur, but don’t negatively affect application functionality, such as images not loading, fullscreen not working because you forgot the correct JavaScript, etc.

Error’s are for logging all errors; synchronous, asynchronous, and custom ones.  Not all try/catch blocks should have them (some can be regulated to warns), but anything bad should be put here.

Fatal’s aren’t really ever used since there aren’t a lot of fatal things in Flash Player.  Usually these are business specific such as an initial XML configuration file that your application requires to run not loading, running out of memory, or other crucial things not happening like they should.

Additional Notes

The Debug window save’s its current position in a local SharedObject.  If you’re app shrinks and the window appears off-screen, just delete your SO, or just call a win.move(0, 0) or PopUpManager.centerPopUp(win) on it to reset it.

The Message ValueObject has the ability to add a time stamp for each message, but it’s commented out.  If you wish to have those for validation, open up the Message.as class, and you’ll see the line of code to uncomment.

Finally, using in AIR requires a simple wrapper window.  Here’s some code to get you started:

private var debugWin:Window;

private function onOpenDebugWindow(event:Event):void
{
        openDebugWindow();
}

private function openDebugWindow():void
{
        if(debugWin == null)
        {
                debugWin = new Window();
                debugWin.addEventListener(Event.CLOSE, onDebugClosed);
                debugWin.addChild(new Debug());
                debugWin.open();
                debugWin.width = 556;
                debugWin.height = 418;
                debugWin.move(0, 0);
        }
        else
        {
                debugWin.activate();
        }
}

Download

Includes a Library Project with SWC and an example project with Source code.  Both are for Flex 3 (but you can use in 4 if you’re so inclined). – Download ZIP | Source