debugging flex applications
DESCRIPTION
Debugging Flex Applications. Mike 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)?. - PowerPoint PPT PresentationTRANSCRIPT
2006 Adobe Systems Incorporated. All Rights Reserved.
Debugging Flex ApplicationsMike Morearty
2006 Adobe Systems Incorporated. All Rights Reserved.
The Basics
2006 Adobe Systems Incorporated. All Rights Reserved.
In the Beginning, there was trace()
Flash’s Output window
Flex Builder’s Console view
2006 Adobe Systems Incorporated. All Rights Reserved.
Beyond trace(): The Flex Builder Debugger
2006 Adobe Systems Incorporated. All Rights Reserved.
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.
2006 Adobe Systems Incorporated. All Rights Reserved.
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)
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
Tips and Tricks
2006 Adobe Systems Incorporated. All Rights Reserved.
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:
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
Variables: Options
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
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>;
2006 Adobe Systems Incorporated. All Rights Reserved.
Advanced
2006 Adobe Systems Incorporated. All Rights Reserved.
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...
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
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) {
...}
}
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
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”);
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
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”