Debugging Flex 4 applications – Part 3: Variables view, watchpoints, and Run to Line

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:

• Use the Variables view to inspect the values of variables.
• Change the values of variables during a debug session to test fixes.
• Use the Expressions view to watch the values of specific variables and expressions.
• Use new watchpoints to halt code execution when the value of a specific variable changes.
• Break out of loops and jump to lines of code using the new Run to Line command.

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.

Examine variable values

When code execution is stopped with a breakpoint, you can view variable values in the Variables view.

1. Open Drawing.mxml in the Flex4DebuggingTutorial_StartProject Flex project that you used in Part 1 and Part 2 of the tutorial series.

   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.

2. Make sure you have a breakpoint enabled on line 34 of Drawing.mxml. Add one if you do not have one.
3. Select Run > Debug Drawing to debug the application. Change the shape color to a color other than black and then draw some shapes. You will be returned to the Flash Builder debugger.
4. Click on the Variables tab to open the Variables view (see Figure 1). You should see three variables: this, e, and 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 null.

5. Double-click the Variables tab so that it opens full-screen in Flash Builder.
6. Click the arrow next to e to display all the properties and their values for the MouseEvent instance (see Figure 2). Red squares indicate private properties. Green circles indicate public properties.

7. Click the arrow next to [inherited]. By default, the superclass members are grouped in a separate tree node to help reduce the number of variables visible at one time.
8. Double-click the Variables tab so the window returns to its original size in Flash Builder.
9. In the Variables view, click the arrow next to e to collapse the tree node and hide its properties.
10. Look at the value of shape (currently null).
11. Click the Step Into button and then the Step Over button. You should see the value of shape change to an instance of com.adobe.samples.shapes.Circle (see Figure 3).

12. Click the arrow next to shape and the arrow next to its inherited properties. Start scrolling through all of its properties.
13. Right-click anywhere in the Variables view and select Find (see Figure 4).

14. In the Find dialog box, type sh and look at the variables. You should see the shapeColor property (see Figure 5).

15. Select shapeColor and click OK. In the Variables view, the property shapeColor is now selected. This is the color you selected using the ColorPicker in the application.

Customize the Variables view

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.

1. In the Variables view, click on the View Menu button in the toolbar and select Layout > Select Columns (see Figure 6).

2. In the Select Columns dialog box, select Declared Type and click OK (see Figure 7). You’ll now see an additional column in the Variables view displaying the declared property type as well as its value.

3. Collapse the shape tree node and expand the this variable. You will see properties declared in ActionScript (such as selectedShape and shapeColor) and MXML (such as shapeCanvas and shapeSelector). You do not see the SHAPES constant.
4. Click the View Menu button in the toolbar again and select Flex > Show Constants (see Figure 8).

5. You can now see the SHAPES constant listed (see Figure 9).

6. Terminate the debugging session.

Change variable values

In addition to looking at the values of variables, you can also change their values in the debugger.

• Debug the application and try to draw some circles. You are returned to Flash Builder.
• In the Variables view, locate selectedShape under this. Currently, its value is "circle".

  Right-click on 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.

• In the Set Value dialog box, type star and click OK (see Figure 11).

• Look at the value of selectedShape in the Variables view. It will now be “star” instead of “circle”.
• Look at the code editor and note that code execution is halted at line 34.
• Click the Step Into button. The if block for selectedShape=="circle" is now skipped and code execution jumps to line 37 (the check for square).
• Click Step Into two more times to enter the 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).

• Leave the application suspended as you procede to the steps in the next section.

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

Watch variable values

You can specify a variable to be watched in the Expressions view from either the Variables view or from the code editor.

1. In the Variables view, expand the shape node and its [inherited] node.
2. Navigate to the size property (either by scrolling or finding). Right-click it and select Watch (See Figure 13).

3. You can now see the property in the Expressions view (see Figure 14).

4. Return to the code editor and locate the reference to the selectedShape property on line 18.
5. Double-click it to select it, then right-click and select Create Watch Expression (see Figure 15). You will now see the two properties in the Expressions view.

6. Click the Resume button. The values of the two properties are removed as you are no longer in the scope of any function.
7. Return to the browser and move the mouse. You are returned to Flash Builder.
8. Look at the Expressions view again. The shape.size variable now has errors during evaluation because it does not exist yet. There is, however, a value for selectedShape.
9. Right-click the breakpoint in the marker bar of line 43 and select Enable Breakpoint (or add it if you do not have one).
10. Click the Resume button to move from line 34 to this breakpoint (on line 43) after the shape is created. You will see a value (10 if you have circle selected or 20 if you have star or square selected) assigned to shape.size.

Evaluate expressions

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.

1. Right-click in the Expressions view and select Add Watch Expression (see Figure 16). There is also an Add Watch Expression button in the Expression view toolbar.

2. In the Add Watch Expression dialog box, type shape.shapeColor and click OK (see Figure 17). The new expression is added to the Expressions view.

3. Terminate the debugging session.
4. Disable the breakpoint on line 43.

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.

1. Debug the application and then start to draw a shape. You are returned to a debug session in Flash Builder.
2. In the Expressions view, right-click on selectedShape and select Toggle Watchpoint (see Figure 18).

3. Switch to the Breakpoints view. You will now see your watchpoint listed here as well (see Figure 19).

4. Disable the breakpoint on line 34 and click the Resume button.
5. Return to the browser and draw some more circles.
6. Change the color and draw more circles.
7. Change the shape and you should immediately be returned to the debugger in Flash Builder. The value of the watchpoint changed, halting code execution.
8. Terminate the debugging session.

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. In Drawing.mxml, place a new breakpoint at line 46, on the first line inside the onClick() function.
2. Debug the application.
3. Draw several different shape paths and then click the Clear All button. You will be returned to the debugger in Flash Builder with code execution stopped at line 46.
4. Switch to the Variables view and locate the i variable.
5. Click Step Over three times and watch the value of i increment to 0 and then 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.
6. In the code editor, select shapeCanvas.numElements in 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).

7. Select the variable i in the code editor, right-click, and select Create Watch Expression to also add it to the watch list.
8. Terminate the debugging session.
9. Debug the application again, draw a shape path, and then click the Clear All button.
10. Click Step Over three times, watching your variables in the Expressions view. It would take a while to get through the entire loop.
11. Select the line after the loop (line 49), right-click, and select Run to Line (see Figure 21).

    You should get a RangeError telling you that an index is out of range. Somewhere in the loop code, an error was thrown.

12. Terminate the debugging session.
13. Examine the code inside the for loop. It is looping over the number of elements in the shapeCanvas, but it is calling the clear() method on this, the main application.
14. Inside the for loop, change the code to clear the elements of the shapeCanvas instead:

15. Debug the application, draw some shapes, and then click the Clear All button. You will be returned to your breakpoint on line 46 in the onClick() function.
16. Remove the breakpoint on line 46.
17. Select the line after the loop (line 49), right-click, and select Run to Line. Code execution jumps out of the loop to this line of code.
18. Terminate the debugging session.

That’s it—you’ve now successfully debugged the Drawing application.

Where to go from here

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.

To learn more about creating and customizing Flex 4 applications, see the Flex 4 documentation, the Flex 4 in a Week video series and exercises, the and the Flex Developer Center.