M Studio Labs

De Monster Debugger

De MonsterDebugger is an incredible new AIR app from De Monsters which allows you to debug AS3 Actionscript/Flex projects on the fly. With it, you can trace output statements, view your app’s tree structure, live-edit code and test methods.

Live-edit/Method Testing have to be the coolest of the features. I’ve only played around with this a bit, but what it allows you to do is update String, Number, int, uint or Boolean params on the fly. I find this very useful in that you can re-position elements on the stage without re-compiling your code.

To do this, you can create a public method in your classs (private methods/properties do not appear in the tree). In my example, I put together a method that accepts a width and a height parameter and draws a simple box…

package {
import nl.demonsters.debugger.MonsterDebugger;

import flash.display.Sprite;

/**
* @author Alex
*/
public class Main extends Sprite {

private var debugger : MonsterDebugger

public function Main() {

debugger = new MonsterDebugger(this);
}

public function buildUI(_w : Number, _h : Number) : void {

this.graphics.clear();
this.graphics.beginFill(0x990000);
this.graphics.drawRect(0, 0, _w, _h);
}

}
}

Open De MonsterDebugger and then compile your app.

In the left panel under “LIVE APPLICATION”, click “Main”:

De Monster Debugger

In the right panel, selet “Methods” then double-click “buildUI”:

De Monster Debugger

You’ll see a box like this:

De Monster Debugger

With your Flash app playing in the Flash Player, you can now call “buildUI” dynamically by entering in a width and a height and hitting “RUN”. This will let you position the box exactly so that you don’t have to go back and forth, recompiling each time. This can be extremely useful when you’re trying to match items up on the stage. Pretty slick!

De MonsterDebugger

Leave a Reply