Since a Rich Internet Application is not a stateless client, you typically have a lot of data in the client, especially when you load dynamically over time. Often, while developing Flex applications, you might need to peek at data structures during runtime‹this is where my utility, the Flex Trace Panel, comes in handy.

Requirements
To make this most of this tutorial, you need to install the following software and files:

• Flex 1.5
• Flex Trace Panel and accompanying files (which can be found at http://macromedia.com/devnet/flex/articles/tracepanel.html)

Prerequisite Knowledge
This article assumes that you are familiar with the basics of Flex.

The Problem
When you debug a web application that uses HTML in the presentation tier, you typically write debug messages to the either the standard log file of your application server or directly into the HTML output to track the flow of your application or to inspect data. For Flex-powered applications you can leverage the Flex Debugger integrated in Flex Builder 1.5 to inspect your application. However, there are situations were you do not want to run your application under the debugger or inside Flex Builder 1.5 but directly in the browser. In those cases you must use the trace() function or add some sort of sophisticated debug text area to the application to output debug messages.

While the trace() statement works fine for simple debugging tasks, one major drawback of it is that there is no console window to display the messages. Instead, you must browse your local machine for the log file that Flash Player writes to when executing a trace() statement. This may not even work at all if you haven't installed the Flash Debug Player and configured it to enable file logging. Finally, to get some sort of real-time logging experience you must open the log file with some text editor that automatically reloads the file after its content change.

One other technique is to add a logging console to the application itself. This may work, but can compromise the design of your application's user interface.

Introducing the Flex Trace Panel
To improve the debugging experience, I wrote a simple but powerful add-on for your daily Flex development needs: the Flex Trace Panel. It's a standalone application that runs outside the browser and listens for debug messages sent from your Flex application. Received messages display in real time. There are several features such as different log levels and nested object introspection that help you develop and debug your Flex application. Technically, the Flex Trace Panel is a SWF file made with Macromedia Flash Professional 8, wrapped into a stand-alone shell by using the third-party tool Zinc v2.5 by Multimedia Limited.

Once you start the Flex Trace Panel, it creates a new LocalConnection instance and listens for incoming messages. After the Flex Trace Panel receives a message, it writes the data to the output text area. If the data is complex (such as an object), the Trace Panel recursively introspects the structure and prints the hierarchy while avoiding cyclical references that could cause the Trace Panel to freeze. In short, your Flex applications send data to the Flex Trace Panel by using the Dumper class, an ActionScript 2.0 class that comes with the Flex Trace Panel download in the Requirements section.

Using the Flex Trace Panel
To use the Flex Trace Panel, unzip the downloaded ZIP file to a directory of your choice. The directory contains an src and a bin folder, with the Flex Trace Panelexecutable in the bin Folder. You may want to copy this file to another location on your machine.

The src folder contains a directory structure for the Dumper class. Copy the contents of the src folder to your Flex server, so that the Dumper class is available to your Flex application. In general, place the Dumper class in the class path of your Flex application. To make the Dumper class available to all of your Flex applications (recommended for a testing or development system) simply copy the directory structure to the user_classes directory of your Flex server. With a default, out-of-the-box Flex 1.5 installation, this is at:

C:\ProgramFiles\Macromedia\Flex\jrun4\servers\default\flex\WEB-INF\flex\user_classes

If you only want to use the Dumper class in a single application, copy the de.richinternet.utils.* package to the root of your Flex application. After you install the source files, it's time to start the show.

Create a new Flex application and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Script>
   <![CDATA[
      import de.richinternet.utils.Dumper;

      private function sayHello():Void {
         Dumper.dump(³Hello World!");
      }
   ]]>
   </mx:Script>
   <mx:Button label="Say Hello!" click="sayHello()"/> </mx:Application>

Start the Flex Trace Panel and run your Flex application. When you click the button, the following message will appear in the output window (see Figure 1).

The [INFO] text printed left to the message indicates the log level of the message, while (String) tells you the type of data sent. This is extremely helpful when passing complex data such as Arrays or nested Objects to the Trace Panel (see Figure 2).

As mentioned before, you can set up your applications to send any data type to the Flex Trace Panel. For example, if you want to output the content of the DataProvider attached to the DataGrid myGrid you simply write:

Dumper.dump(myGrid.dataProvider);

The Dumper class provides several methods to send data with different log levels to the Trace Panel. This is convenient if you for example want to indicate whether a certain message is an error message or just simple information. The log levels are:

• INFO
• WARN
• ERROR

Here's a listing of all available methods of the Dumper class:

• Dumper.dump(message:Object):Void takes the passed Object (any type) and routes it to the Flex Trace Panel with log level INFO
• Dumper.info(message:Object):Void takes the passed Object (any type) and routes it to the Flex Trace Panel with log level INFO
• Dumper.warn(message:Object):Void takes the passed Object (any type) and routes it to the Flex Trace Panel with log level WARN
• Dumper.error(message:Object):Void takes the passed Object (any type) and routes it to the Flex Trace Panel with log level ERROR

To distinguish between messages with different log levels, you can use the Flex Trace Panel to filter messages on their log level. By using the Level menu of the Trace Panel, you can filter all received messages. Internally, the Flex Trace Panel uses a message buffer to filter messages dynamically.

To save the content of the output text field to a text file, click the save icon or select Save from the File menu. To clear the text field, select File > Clear or click the trash can icon.

This article explained how you can use the Flex Trace Panel while you develop Flex applications. As with any other software, the Flex Trace Panel will keep evolving. Especially, I'd like to update it so that it runs with Flex 2 and the new Flex 2 Logging API. Stay tuned on developments with the Flex Trace Panel category on my blog.