Debugging Client-Side Code in Flex Applications

Configuring and Running Flex’s Client ActionScript Debugger (fdb)

To run fdb, ensure that you have the following configuration settings correct. Fdb requires a version of the Java Runtime Environment (JRE) 1.4.x installed on the machine running the debugger. If you don't already have JRE 1.4.x installed, you can get it at: http://www.java.com. Ensure that the fdb jvm.config (located at C:\JRun4\bin\ for JRun installations) file has the java.home value set to the correct location for Java. The following is an example of the java.home setting.

java.home=C:/j2sdk1.4.2_04

Verify that you have the Flash Debug Player installed and configured for your default browser. You can find more information on determining and setting your default browser version in the Flex documentation: http://livedocs.macromedia.com/flex/1/flex_docs/33_deb22.htm#wp146003.

Once you've correctly installed and configured Java environment and the Flash Debug Player, you are ready to start debugging your application with fdb.

1. Go to {flex.rootdir}/bin directory and start fdb.
2. Run the MXML file that you want to debug with the run {path to the MXML file you want to debug} command in the fdb window. The following is an example of the command and the information it returns as you debug a simple MXML file that implements a counter in ActionScript:

   (fdb) run http://e-apple:8100/flex-support/debug/debugmxml.mxml
   Attempting to launch and connect to Player using URL:
   http://e-apple:8100/flex-support/debug/sample.mxml
   Player connected; session starting.
   [SWF] /flex-support/debug/sample.mxml.swf - 487,496 bytes
   
   

3. Set breakpoints and type continue to resume the session.

   The next step in using fdb for debugging an MXML file is to determine which files Flex created for your MXML template. To view the files that Flex generated or used, you can use the info sources command in the fdb window. The following is an example of the command and the information it returns when debugging the explorer.mxml file.

   (fdb) info sources
   sample-generated.as#2
   sample.mxml#1
   
   

4. Set break points in the file and step through them in fdb. To view the source of the application, use the list {file name} command as follows:

         (fdb) list sample.mxml
    1     <?xml version="1.0" encoding="utf-8"?>
    2     <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="600" height="450">
    3
    4     <mx:Script>
    5     <![CDATA[
    6
    7     function TestEffectHandler(): Void {
    8
    9      var counter:Number;
    10     var tempCounter:Number = 0;;
   (fdb)
    11
    12     for (counter=0; counter<5; counter++) {
    13             tempCounter=counter+tempCounter;
    14             trace("Counter = " + counter);
    15             }
    16
    17     debugText.text = "Total Counted = " + tempCounter.toString();
    18
    19    }
    
   

5. Create a break point at line 13 of the sample.mxml file. Below is an example of how to create a break point on line 13.

   (fdb) break 13
   
   Breakpoint 1 at 0x76a91: file sample.mxml, line 13

6. Execute the continue command to step through the function and see the output.

   (fdb) continue
   
   Breakpoint 1, TestEffectHandler() at debugmxml.mxml:13
   
   13             tempCounter=counter+tempCounter;

   In this tutorial, you want to step through the ActionScript for the loop and print the value of the tempCounter object. To do this, use the print {object name} command. The following asks fdb to print the tempCounter object and then uses the step (or "s" as a shortcut) command to step through the loop and display the value for the object.

   (fdb) print tempCounter
   $1 = 0
   (fdb) step
    14             trace("Counter = " + counter);
   (fdb) s
   [trace] Counter = 0
    13             tempCounter=counter+tempCounter;
   (fdb) s
    14             trace("Counter = " + counter);
   (fdb) s
   [trace] Counter = 1
    13             tempCounter=counter+tempCounter;
   (fdb) s
    14             trace("Counter = " + counter);
   (fdb) s
   [trace] Counter = 2
    13             tempCounter=counter+tempCounter;
   (fdb) s
    14             trace("Counter = " + counter);
   (fdb) n
   [trace] Counter = 3
    13             tempCounter=counter+tempCounter;
   (fdb) n
    14             trace("Counter = " + counter);
   (fdb) n
   [trace] Counter = 4
    17     debugText.text = "Total Counted = " + tempCounter.toString();
   
   

The sample fdb session above is a basic example of how to start a debug session, set break points in code, and then step through them while examining the variable values. You can find more information on fdb including all of the possible features of the tool by typing help in an fdb session. You can also find information in the Flex online documentation, Flex LiveDocs, at:
http://livedocs.macromedia.com/flex/1/flex_docs/wwhelp/wwhimpl/js/html/wwhelp.htm.

Page 8 of 10

Previous Page

Next Page