Earlier today, I heard about a 'new' debugging utility for Flex, AIR, and Flash. It's called De MonsterDebugger and is absolutely worth a look.

De MonsterDebugger is an AIR application and runs alongside your Flash, Flex or AIR application. Installing the application is, of course, easy (it's an AIR app, after all!), however, the application's web site does not have a lot of documentation on it (it does have some). There's a nice video post on gotoandlearn.com for using the De MonsterDebugger.

The video is about 15 minutes long and shows how to setup your application to 'use' the debugger and some of the basic ways you can use the debugger when your application is running. If you don't want to sit through the video, following are the basic instructions to setup your application for De MonsterDebugging and how to use the debugger's trace method (versus ActionScript's).

Setting Up the Flex Application for De Monster
Setting up the Flex application is pretty simple, all in all. In brief, you import a class (more on that in a moment) and instantiate it, passing a reference to your application in the constructor. Before you do that, however, we need to export the MonsterDebugger class from De MonsterDebugger.

  1. Download and install the De MonsterDebugger AIR application
  2. Launch the AIR application
  3. From the File menu, select Export Client Class
  4. Save the exported class to the root folder of your application

The exported class action will add the following folders nl->demonsters->debugger (and a MonsterDebugger.as file in the debugger folder) to the the root folder of your Flex application, which you selected in step 4, above. We can now import the debugger class into the main application file.

<![CDATA[
import nl.demonster.debugger.MonsterDebugger;// note how this path matches the aforementioned folders
private var debugger:MonsterDebugger = new MonsterDebugger( this );// this represents the application object
]]>

That's it. Make sure that De MonsterDebugger is running and then build or open the Flex application in your browser.

Using the Debugger's trace() Method
If you want to see some cool trace details, use De MonsterDebugger's trace method. It's sweet. If you're tracing an XML object, it will render the XML object as a tree you can traverse. MUCH nicer than scrolling through the traced code in Flex :)! To use the debugger's trace method, add this snippet of code below where ever you want to run a trace:

MonsterDebugger.trace( this, trace_variable_or_string );

Nothing more to it. Please note that I called the trace method on the class and not on the class instance I created. This is correct; the trace method is a static method of the MonsterDebugger class.

Other Fun Features
One of the coolest feature sets of this debugger is that you can change properties and call methods while the application is running via the inspector and method tabs in the debugger UI. It's pretty cool and fairly intuitive to use once you get it installed and connected to your app(s). Watch the video I linked to (above) for more on these features.

Happy debugging!!

Comments