Debugging Flex Applications

1. Debugging Flex Applications Mike Morearty

2. The Basics

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

4. Beyond trace(): The Flex Builder Debugger

5. 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.

6. 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)

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

8. Tips and Tricks

9. 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:

10. 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

11. Variables: Options

12. 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

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

14. Advanced

15. 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...

16. 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

17. 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

18. 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

19. 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());  } } }

20. 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”);

21. 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

22. 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”