debugging flex applications

2006 Adobe Systems Incorporated. All Rights Reserved.

Debugging Flex ApplicationsMike Morearty


The Basics


In the Beginning, there was trace()

Flash’s Output window

Flex Builder’s Console view


Beyond trace(): The Flex Builder Debugger


What happens to uncaught exceptions (Errors)?

If you aren’t using a debugger, you get a stacktrace but that’s it:

A developer with debugger build of player sees an error dialog

An end-user with release build of player does not see an error message

When debugging with Flex Builder: debugger stops at the line where the exception was thrown

You can see the callstack, examine variables, etc.


How to launch

Standalone Flex Builder: just click “Debug” icon, or press F11

Plugin Flex Builder: To debug most recently debugged project: just click “Debug” icon, or press

F11

To debug current project: “Debug As > Flex Application” (Alt-Shift-D, F)


The Expressions View

Pretty simple:

1. Go to Variables view

2. Find the variable you want to track, e.g. this.x

3. Right-click on it, and pick “Watch”

That adds a line to the Expressions view, e.g. “this.x = 0”

Eclipse bug: Sometimes, after adding an expression, it shows an error message, e.g. “Variable does not exist” or something like that Workaround: Switch to Variables or Breakpoints view, then back to

Expressions view


Tips and Tricks


Canceling a Launch

When you click Run or Debug, it waits for two minutes

If you clicked Run or Debug, but something went wrong, you can cancel it before the two minutes is up:


Breakpoints

Tip: “Link with Debug View”

When you hit a breakpoint,the Breakpoints viewhighlights the one you hit

Helpful when you have a long list of breakpoints

Ctrl-Shift-B, or double-click in margin, to set a breakpoint Also works in MXML files, e.g. on halt on this line when the user clicks:

<mx:Button click=“alert(‘you clicked’)” />

In Flex Framework source files, there is no margin to click in, but Ctrl-Shift-B works

If there is no source on that line, breakpoint “moves down” automatically


Variables: Options


Variables: “Automatically invoke getter functions” option

99% of the time, executing all getters does not mess up debugging

But occasionally, re-executing getters each time you step would wreak havoc

E.g. if a getter changes the internal state of a class

Clearing this preference lets you debug this type of app

Preference only takes effect onnext launch


Variables: XML

The Variables view shows you exactly what is in your E4X variables

var x:XML = <root><child id=“1”>some data</child></root>;


Advanced


Launch Configurations

A “Launch Configuration” allows customized settings: URL to launch (the main reason to customize a launch configuration)

Directories to search for source files, etc.

Ways to modify a launch configuration: Ctrl-click on an item in the Debug or Run toolbar dropdown

Plugin Flex Builder: Debug As..., Run As...

Standalone Flex Builder: Other...


The ActionScript “scope chain”

List of places where the Player VM looks to resolve variable references

“trace(x)” needs to figure out what “x” is

In a “regular” method, it’s a lot like C++ or Java: check the locals and function arguments

check the “this” object

check the “global” object

What if you are in a nested function? check the locals and function arguments

check the locals and function args of the parent function

check the “this” object of the parent function

check the “global” object


The Scope Chain in the Variables view

Only shows up when the scope chain has something interesting – e.g. you are in a nested function

When in a “normal” function,scope chain is not shown


class Error

Error.message A message explaining why an error was raised

In debugger Flash Player, has full text, e.g.: “Error #1009: Cannot access a property or method of a null object reference.”

In release Flash Player, “Error #1009”

Error.getStackTrace() In Debugger version of Flash Player, returns callstack where the error

occurred

In Release version of Flash Player, returns nulltry {...

} catch (e:Error) {var s:String = e.getStackTrace();if (s != null) {

...}

}


flash.utils.describeType()

AS3 reflection; occasionally useful for learning more about a class

describeType(variable) or describeType(typename) returns XML describing the type – every member field, member function, etc.

Example from the docs:

package { import flash.display.Sprite; import flash.utils.describeType; public class DescribeTypeExample extends Sprite {

public function DescribeTypeExample() { var child:Sprite = new Sprite(); var description:XML = describeType(child);

trace([email protected]()); }

}

}

E4X expression! display the names

of all getters


Debugging Data-Binding problems

Where are your data-binding events going?

import mx.binding.BindingManager;

...

BindingManager.debugBinding(destinationString);

Example 1:

<mx:Binding source=“name.text” destination=“myxml.name” />

...

BindingManager.debugBinding(“myxml.name”);

Example 2:

<mx:Label id=“mylabel” text=“{name.text}” />

...

BindingManager.debugBinding(“mylabel.text”);


Simultaneous Flex and Java debugging

Eclipse can debug more than one program at a time

Install the plugin version of Flex Builder, not the standalone version

1. Set breakpoints in your Java server app and/or your Flex app

2. Launch JRun from inside Eclipse, as a debug target

3. Launch your Flex app for debugging

Launching JRun requires some special flags – see James Ward’s http://www.cayambe.com/wordpress/?p=47 for details


fdb, the Free SDK Debugger

You’ll be just fine if you never use it, but it does have a few tricks that Flex Builder doesn’t have

Conditional breakpoints: “condition” command

Execute commands when breakpoint is hit: “commands” command

Automated execution (reading commands from a file): “source” command

Runs on Linux

fdb is modeled after gdb Similar commands: (s)tep, (n)ext, (c)ontinue, (p)rint, etc. – reduces learning

curve

emacs mode: In emacs, type M-x gdb, then backspace over “gdb”, give command “fdb”

debugging flex applications

Documents