Jan
9

Tracer – Better Debugging in AS3 Jon Keon

Actionscript, Flash, Workflow

When developing in Flash, I find that I often lace my code with traces to see what certain values are, whether the code has entered a function or not, or even just to give myself a note to remind me of a certain behaviour that is in the program.

What I’ve found though is that the default trace functionality is really lacking in terms of quickly conveying the information I want to know.

Granted, I know I can fire up the debugger and step through the code when I need to figure out at what point variable x is being populated with data but that’s an extra step that requires restarting the program in debug mode and assigning break points etc etc. Sometimes I just don’t want to do that.

I created the Tracer Module as a way to improve the default trace functionality to give developers more information faster. It’s designed to be as unobtrusive to your workflow as possible while yielding all sorts of benefits.

You can get the source code here on our Google Repository (along with the example seen below).

The module is comprised of 4 classes.

qtrace, dtrace and etrace are public functions the same way regular trace is and these should be placed in your root Classes folder. The reason being that now you can call them just like trace and not have to rely on a custom class or importing.

TraceManager is a set of statics to signify whether you are running in the IDE or Deployed on a website and what level of traces you want to show for each of these modes.

qtrace (Quick Trace)

The qtrace is essentially a replacement for trace. It does the exact same thing and nothing fancy. The only added benefit to using it over regular trace is that you can turn them off by setting TraceManager.IDE_QUICK_TRACE = false or TraceManager.DEPLOYED_QUICK_TRACE = false depending on your preferences.

Usage:

qtrace(“This is a sample qtrace”);

Output:

This is a sample qtrace

By default, in IDE mode you will see all qtraces in your output window, but when deployed to a website, these traces do not appear in your log file to be seen by a program like Flash Tracer.

dtrace (Debug Trace)

The dtrace is the trace that I use the most. It works the same way as regular trace but it will prepend the Class name and Function Name to your trace. If your fla has the permit debugging option enabled, it will also prepend the Line number.

Usage:

dtrace(“This is a sample dtrace”);

Output with permit debugging off:

[{CLASS_NAME}::{FUNCTION_NAME}()] - This is a sample dtrace

Output with permit debugging on:

[{CLASS_NAME}::{FUNCTION_NAME}() : {LINE_NUMBER}] - This is a sample dtrace

This provides you with instant feedback to know exactly where a trace came from and you can easily navigate to that class to find it.

etrace (Error Trace)

The etrace is a trace used for more in depth debugging if you want to see the Stack Trace but don’t want to throw an actual error which halts your program.

Basically an extension to dtrace, it works the same way but includes the stack trace in a more readable form.  For example, here’s a regular stack trace thrown:

Error

at global/etrace()[C:\Documents and Settings\jkeon\Desktop\TravelFolder\TravelLib\TravelLib\Blog\Tracer\trunk\Classes\etrace.as:10]

at com.sample.dummy::ETraceExampleThree/finalLevelETrace()[C:\Documents and Settings\jkeon\Desktop\TravelFolder\TravelLib\TravelLib\Blog\Tracer\trunk\Classes\com\sample\dummy\ETraceExampleThree.as:12]

at com.sample.dummy::ETraceExampleTwo/nextLevelETrace()[C:\Documents and Settings\jkeon\Desktop\TravelFolder\TravelLib\TravelLib\Blog\Tracer\trunk\Classes\com\sample\dummy\ETraceExampleTwo.as:13]

at com.sample.dummy::ETraceExampleOne/callETrace()[C:\Documents and Settings\jkeon\Desktop\TravelFolder\TravelLib\TravelLib\Blog\Tracer\trunk\Classes\com\sample\dummy\ETraceExampleOne.as:13]

at com.sample.core::SampleCore/com.sample.core:SampleCore::sampleETrace()[C:\Documents and Settings\jkeon\Desktop\TravelFolder\TravelLib\TravelLib\Blog\Tracer\trunk\Classes\com\sample\core\SampleCore.as:146]

A little bit messy isn’t it?

Here’s that same call but running through etrace:

****[BEGIN STACK TRACE DUMP]****

[USER PASSED PARAMS] - This is a sample etrace

[ETraceExampleThree::finalLevelETrace() : 12]

[ETraceExampleTwo::nextLevelETrace() : 13]

[ETraceExampleOne::callETrace() : 13]

[SampleCore::sampleETrace() : 146]

****[END STACK TRACE DUMP]****

Much cleaner and easy to see where the trace was called from.

Usage:

etrace(“This is a sample etrace”);

Output with permit debugging off:

****[BEGIN STACK TRACE DUMP]****

[USER PASSED PARAMS] - This is a sample etrace

[{CLASS_NAME}::{FUNCTION_NAME}()]

[{CLASS_NAME}::{FUNCTION_NAME}()]

[{CLASS_NAME}::{FUNCTION_NAME}()]

[{CLASS_NAME}::{FUNCTION_NAME}()]

****[END STACK TRACE DUMP]****

Output with permit debugging on:

****[BEGIN STACK TRACE DUMP]****

[USER PASSED PARAMS] - This is a sample etrace

[{CLASS_NAME}::{FUNCTION_NAME}() : {LINE_NUMBER}]

[{CLASS_NAME}::{FUNCTION_NAME}() : {LINE_NUMBER}]

[{CLASS_NAME}::{FUNCTION_NAME}() : {LINE_NUMBER}]

[{CLASS_NAME}::{FUNCTION_NAME}() : {LINE_NUMBER}]

****[END STACK TRACE DUMP]****

Take a look at the example program below to play around and download the source again from here.  I’ve enabled permit debugging on the fla so you can see the line numbers, but feel free to switch it off in the downloaded fla to suit your purposes.

Tracer Example

This entry was posted on Saturday, January 9th, 2010 at 10:14 pm and is filed under Actionscript, Flash, Workflow. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.