flex builder debugger

Debugging Flex Applications: 

Debugging Flex Applications Mike Morearty

Slide2: 

The Basics

In the Beginning, there was trace(): 

In the Beginning, there was trace() Flash’s Output window Flex Builder’s Console view

Beyond trace(): The Flex Builder Debugger: 

Beyond trace(): The Flex Builder Debugger

What happens to uncaught exceptions (Errors)?: 

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: 

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: 

The Expressions View Pretty simple: Go to Variables view Find the variable you want to track, e.g. this.x 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

Slide8: 

Tips and Tricks

Canceling a Launch: 

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: 

Breakpoints Tip: “Link with Debug View” When you hit a breakpoint, the Breakpoints view highlights 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: Options

Variables: “Automatically invoke getter functions” option: 

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 on next launch

Variables: XML: 

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>;

Slide14: 

Advanced

Launch Configurations: 

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”: 

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: 

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: 

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 null try { ... } catch (e:Error) { var s:String = e.getStackTrace(); if (s != null) { ... } }

flash.utils.describeType(): 

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(description..accessor.@name.toXMLString()); } } } E4X expression! display the names of all getters

Debugging Data-Binding problems: 

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: 

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 Set breakpoints in your Java server app and/or your Flex app Launch JRun from inside Eclipse, as a debug target 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: 

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”