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 try { ...} catch (e:Error) { var s:String = e.getStackTrace(); if (s != 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()); } } } E4X expression! display the names of all getters

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”