22 March 2010
A basic knowledge of creating Flex 4 applications is helpful. You should also have read and complete Part 1 and Part 2 of this series before this one. For more details on creating and customizing Flex 4 applications, see the Flex 4 documentation, the Flex 4 in a week video series and exercises, and the Flex Developer Center.
In this last part of the three-part tutorial series, you learn to use the Variables view, the Expressions view, watchpoints, and the Run to Line command.
In Part 1 of the tutorial series, you imported the sample application that you will be debugging in this tutorial and learned some debugger basics.
In Part 2, you learned to use breakpoints and step through code.
In Part 3, you will:
In Part 2, you added breakpoints to halt application execution and step through the code. When code execution is halted, you can use the Variables view to look at the values of variables that are in the currently selected stack frame (the unterminated function). You can also use the Variables view to watch variables and modify their values during the debugging session.
When code execution is stopped with a breakpoint, you can view variable values in the Variables view.
Note: If you did not complete the second part of the tutorial series, download the Flex4Debugging_start3.zip, unzip it, and import the FXP project into Flash Builder.
shape. The first variable is
this,the instance of the application, Drawing. The second is
e, the argument for the
onMouseMove()function and an instance of the MouseEvent class. The third variable,
shape, is local to the
onMouseMove()function and initially is
eto display all the properties and their values for the MouseEvent instance (see Figure 2). Red squares indicate private properties. Green circles indicate public properties.
eto collapse the tree node and hide its properties.
shapechange to an instance of com.adobe.samples.shapes.Circle (see Figure 3).
shapeColorproperty (see Figure 5).
shapeColorand click OK. In the Variables view, the property
shapeColoris now selected. This is the color you selected using the ColorPicker in the application.
By default the Variables view displays names and values of the properties and when you select a property, its value is displayed at the bottom of the Variables view. You can customize this view, changing what members and what information about the members are displayed.
shapetree node and expand the
thisvariable. You will see properties declared in ActionScript (such as
shapeColor) and MXML (such as
shapeSelector). You do not see the
SHAPESconstant listed (see Figure 9).
In addition to looking at the values of variables, you can also change their values in the debugger.
this. Currently, its value is
selectedShape and select Change Value (see Figure 10). You can also change the value by clicking directly on the value in the Variables view data grid and changing the value there.
selectedShapein the Variables view. It will now be
selectedShape=="circle"is now skipped and code execution jumps to line 37 (the check for square).
selectedShape=="star"condition and then click Step Over. An instance of the Star class is now created instead of one of the Circle class (see Figure 12).
Rather than looking at all the properties of an object, you may be interested in only watching the value of one or more specific properties as the code is executed. Instead of having to locate this variable amongst the many, many others in the Variables view, you can call it out specifically to be watched in a new view, the Expressions view. In addition to watching variable values in this view, you can also watch expressions
You can specify a variable to be watched in the Expressions view from either the Variables view or from the code editor.
shapenode and its [inherited] node.
sizeproperty (either by scrolling or finding). Right-click it and select Watch (See Figure 13).
selectedShapeproperty on line 18.
shape.sizevariable now has errors during evaluation because it does not exist yet. There is, however, a value for
10if you have circle selected or
20if you have star or square selected) assigned to
In the previous section, you added variables to watch in the Expressions view. You selected the variables either in the Variables view or the code editor and selected that you wanted to watch them. You can also specify variables or expressions to watch from the Expressions view itself.
Instead of referencing a property, you can also write an expression to be evaluated. Most but not all ActionScript expressions are supported. See the Using Flash Builder 4 documentation for a complete list of valid expressions.
In Part 2, you learned to use breakpoints to halt code execution; the Step Into, Step Over, and Step Return commands to step through your code; and the Resume button to execute all code until the next breakpoint is reached. Next, you will learn two additional ways to control code execution, both new to Flash Builder 4: watchpoints and the Run to Line command. Watchpoints provide a new way to halt code execution and Run to Line provides a way to break out of loops.
Watchpoints provide an additional way to specify when code execution should be halted. Instead of breaking at a specific line number as for breakpoints, you specify code execution to be halted when the value of a specific variable changes. This is referred to as a watchpoint. Watchpoints are set on a specific instance of a variable so they cannot be set in the code editor but must be set during a debugging session in the Variables or Expressions views. Unlike breakpoints, watchpoints only live for the life of that one debugging session.
selectedShapeand select Toggle Watchpoint (see Figure 18).
At some point in your debugging, you will probably end up inside of a loop. If this loop repeats many times and you want to get past it, you will be stuck stepping through the loop until it finishes executing all of its iterations. The Run to Line command provides a way to break out of a loop or to jump from any line of stopped code to a subsequent line of code. If this jump is something you may only want to do once, using Run to Line keeps you from having to create another breakpoint to run to.
1. You can see that to get past the loop, you would need to step through many times. You can find out how many times.
onClick(),right-click, and select Create Watch Expression. The expression will be added to the Expressions view and you can see its current value (see Figure 20).
iin the code editor, right-click, and select Create Watch Expression to also add it to the watch list.
You should get a RangeError telling you that an index is out of range. Somewhere in the loop code, an error was thrown.
forloop. It is looping over the number of elements in the
shapeCanvas, but it is calling the
this, the main application.
forloop, change the code to clear the elements of the
(shapeCanvas.getElementAt(i) as UIComponent).graphics.clear();
That’s it—you’ve now successfully debugged the Drawing application.
In this three-part tutorial series, you learned to debug Flex 4 applications with Flash Builder 4. You learned to halt code execution using breakpoints, conditional breakpoints, and watchpoints and to control code execution using Step Into, Step Over, Step Return, Resume, and Run to Line commands. You used the Breakpoints view to manage breakpoints, the Variables view to examine and change the values of variables, and the Expressions view to watch specific variables and Expressions.
To learn more about the Flash Builder debugger, see Debugging your aplications in the Using Flash Builder 4 documentation. To see some of these debugging tools in action, watch the Debug and Test Code in Flash Builder 4 video.
For debugging applications that use remote services (HTTP requests, web services, or remote objects), you can use the Flash Builder 4 Network Monitor, which shows the network traffic between Flash Player and your back-end server from within Flash Builder. For more information on using the Network Monitor, see the Tracing network traffic with the Network Monitor in Flash Builder 4 tutorial and Monitoring applications that access data in the Using Flash Builder 4 documentation.
For debugging complex applications, you may want to use unit testing to test and identify specific problems in application functionality. For more information on using integrated unit testing support in Flash Builder 4, see the Test Driven Development using Flash Builder 4 and FlexUnit tutorial and the FlexUnit test environment content in the Using Flash Builder 4 documentation.