Requirements      
Prerequisite knowledge Required products
Sample files User level
A basic knowledge of creating Flex 4 applications is helpful. 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.
Flash Builder 4 (Download trial)
Beginning
       

 

In this second part of the three-part tutorial series, you learn to use breakpoints. Breakpoints enable you to suspend execution of an application so you can monitor its code line by line, see what code is being executed, and examine values of variables and expressions at various points. When you begin a debugging session, the application's code is executed until it hits the first breakpoint. At this time, the Flash Builder debugging perspective is activated and you can step through code, examine variable values, and even change variable values to test fixes and help diagnose the problem.
 
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 this part of the tutorial, you will:
 
  • Use breakpoints to halt code execution when a specific line of code is reached.
  • Use new conditional breakpoints.
  • Use the Breakpoints view to manage breakpoints.
  • Control code execution by suspending, resuming, and terminating the application.
  • Step through code using the Step Into, Step Over, and Step Return commands.
In Part 3, you will learn more advanced debugging features, including how to:
 
  • 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.

 
Adding and managing breakpoints

You add breakpoints by placing them next to lines of executable ActionScript in your code. You can also add a breakpoint next to a line of MXML code that has an event handler registered inline, but since the event handler is defined in ActionScript anyways, you typically just add your breakpoints there.
 
There are three ways to add and remove your breakpoints: by double-clicking in the marker bar to the left of a line number, right-clicking in the marker bar and using the menu options, or using the Breakpoints view in the debugging perspective.
 
  1. Open Drawing.mxml in the Flex4DebuggingTutorial_StartProject Flex project that you used in Part 1 of the tutorial series.
    Note: If you did not complete the first part of the tutorial series, download the Flex4Debugging_start2.zip (need link), unzip it, and import the FXP project into Flash Builder.
     
  2. In Drawing.mxml, add a breakpoint by double-clicking in the marker bar next to line 27 inside the onMouseDown() function (see Figure 1). You will see a blue circle appear in the marker bar next to that line of code.
Double-click to add and remove breakpoints.

Figure 1. Double-click to add and remove breakpoints.

  1. Remove the breakpoint by double-clicking the breakpoint in the marker bar.
  2. Add the breakpoint back by right-clicking in the marker bar next to the line of code inside the onMouseDown() function and selecting Toggle Breakpoint (see Figure 2).
Use menu options to add and remove breakpoints.

Figure 2. Use menu options to add and remove breakpoints.

  1. Remove the breakpoint by right-clicking it in the marker bar and selecting Toggle Breakpoint again.
  2. Add the breakpoint back one more time (either way) and then debug the application.
  3. Click in the browser window. This will fire the mouseDown event and you will be returned to the debugging perspective of Flash Builder. If you are not returned to Flash Builder automatically, click the Flash Builder task in your taskbar or dock.
  4. Locate the arrow next to line 27 indicating that code execution stopped at this point (see Figure 3).
Find where code execution stopped at line 27.

Figure 3. Find where code execution stopped at line 27.

  1. Locate the Debug view in the debugging perspective (see Figure 4). The Debug view displays a list of functions that have been called but have not yet terminated with a return. This is often called the stack frame or the call stack. Applications running in Flash Player are single-threaded so only one function can be executed at a time. You should see the onMouseDown() function listed, which is where you stopped code execution with your breakpoint.
Look at the unterminated function calls in the Debug view.

Figure 4. Look at the unterminated function calls in the Debug view.

  1. Click the Breakpoints tab to open the Breakpoints view (see Figure 5). You’ll see your one breakpoint on line 27 listed.
Open the Breakpoints view.

Figure 5. Open the Breakpoints view.

  1. Inside the Breakpoints view, right-click on the breakpoint and view the options for disabling and removing it (see Figure 6). The latter is useful if your marker bar stops responding to double-clicks or toggles at any point. You can also uncheck the checkbox next to it to disable it without removing it.
Manage breakpoints from the Breakpoints view.

Figure 6. Manage breakpoints from the Breakpoints view.

  1. Leave the breakpoint as it is for now and leave the application suspended. In the next section, you’ll proceed from this breakpoint as you step through the code.

 
Stepping through code

Next, you’ll step though the code line by line to see if you can figure out why no shapes are being drawn. In the Debug view toolbar, you will find Step Into, Step Over, or Step Return buttons to navigate through your code (see Figure 7).
 
The Step Into command steps into a called function and stops at the first line of code. Step Over will not step into a called function but instead executes that function and continues to the next line of code in the current procedure. If you have stepped into a function, Step Return (sometimes called Step Out) will execute that function and then return to the procedure it was called from. If you are executing code that does not have any function calls, Step Into and Step Over behave the same.
 
Locate the buttons to step through code in the Debug view.

Figure 7. Locate the buttons to step through code in the Debug view.

  1. In the active debuggins session, click the Step Into button. Code execution move to the next line of code, which in this case is the end of the function.
  2. Click the Step Into button again. A new file, SystemManager.as, opens and code execution moves to its stageEventHandler() method (see Figure 8).
Step into the SystemManager class code.

Figure 8. Step into the SystemManager class code.

  1. Click the Step Into button three times. Code execution moves to the debugTickler() method in the Application.as file.
  2. Click the Step Return button. Code execution move into the FocusManager class.
  3. Click the Step Over button five times. Code execution should now be stopped at the onMouseMove() method back in your Drawing.mxml file (see Figure 9).
    Note: If you are not back in the Drawing.mxml file for any reason, continue pressing and experimenting with the Step Into, Step Over, and Step return buttons until you are.
     
tep until code execution returns to Drawing.mxml.

Figure 9. Step until code execution returns to Drawing.mxml.

  1. Continue to press the Step Into, Step Over, and Step Return buttons to step through the various application files until you understand the behavior associated with each command.
  2. Click the Resume button in the Debug view toolbar (see Figure 10). Any remaining code is executed.
Resume code execution.

Figure 10. Resume code execution.

  1. Return to the browser window running your application and click anywhere in it again. You will be returned to the Flash Builder debugging perspective again.
    Note: If you try to return to the application in the browser when a debugging session is active, code execution has been halted, and there is code still to execute (like before you clicked the Resume button above), your browser will typically either hang or crash. Also, for some combinations of operating systems and browsers, you may not even be able to navigate back to the browser.
     
  2. Click the Terminate button to end the debugging session.

 
Working with multiple breakpoints

Next, you will add another breakpoint to step through the rest of the code for drawing a shape.
 
  1. Place a breakpoint on line 33, the first line of the onMouseMove() function (see Figure 11).
Place a second breakpoint.

Figure 11. Place a second breakpoint.

  1. In the Breakpoints view, uncheck the line 27 breakpoint so code execution is not stopped when the user mouses down.
  2. Debug the application and then click and drag your mouse in the browser window. You’ll be returned to the Flash Builder debugging perspective. Notice that the breakpoint was moved from the variable declaration on line 33 to the first line of executable code on line 34.
  3. Click Step Into twice to move into the Circle.as class file.
  4. Continue to press the Step Into button until you get to the code in the constructor of AShape, the superclass of Circle (about 17 times).
    Note: If you get a pop-up telling you to insert a disk into the drive, click Continue multiple times until the message disappears. You should not get it again. If your debug session ended, debug the application again and return to step 3.
     
  5. Continue to press the Step Into button and step though the AShape constructor code (at least 30 times or more). Notice that the draw() method is being called multiple times in the constructor: once for each assignment statement (for example, this.xPos=xPos;) because each assignment is actually a call to the setter function which calls the draw() method and once in the constructor after the assignment statements.
  6. Terminate the debugging session.
  7. To remove this inefficiency in your code, change the assignment statements in the constructor of AShape to assign values to the corresponding private variables instead of calling the setters.
public function AShape(xPos:int=0,yPos:int=0, shapeColor:uint=0x000000,size:uint=20) { this._xPos=xPos; this._yPos=yPos; this._shapeColor=shapeColor; this._size=size; super(); ...
  1. Debug the application and click and drag your mouse in the browser window again.
  2. In Flash Builder, click the Step Into button (and Step Over, and Step Return where appropriate) until you enter the AShape constructor code again.
  3. Continue to step through the code and notice that the draw() method is now only called once.
  4. Step into the draw() function (you will move to the draw() method in the Circle class) and then through its code.
    The code to draw the circle is indeed being executed but no circle is drawn on the stage in the application. What are some possible reasons why not? Either some other object is on top of it hiding it or perhaps it never got added to the display list.
     
  5. Continue to click Step Into until you are returned to the onMouseMove() function in Drawing.mxml. The end of the function is reached and there is no code to add the circle to the display list.
  6. Terminate the debugger.
  7. Return to Drawing.mxml and as the last line of the onMouseMove() function, use the addElement() method to add the new shape to the shapeCanvas group. The shapes are being added to their own group so that this group can be cleared independently of graphics in the main application.
private function onMouseMove(e:MouseEvent):void{ var shape:AShape; if(selectedShape=="circle"){ shape=new Circle(mouseX,mouseY,shapeColor); } else if(selectedShape=="square"){ shape=new Square(mouseX,mouseY,shapeColor); } else if(selectedShape=="star"){ shape=new Star(mouseX,mouseY,shapeColor); } shapeCanvas.addElement(shape); }
  1. Debug the application again and draw a shape. Code execution is again stopped at line 34.
  2. With the debugging session still active, double-click in the marker bar next to line 43, the addElement() line of code, to add another breakpoint. You can add additional breakpoints during a debugging session.
  3. Click the Resume button to execute all the code between the two breakpoints. Code execution is stopped at line 43.
  4. Click the Resume button again to execute the last bit of code. After you do, notice that the code navigation buttons are now disabled indicating that there is no more code to step through.
  5. Return to the browser window and start to draw a shape. You are immediately returned to line 34 in Flash Builder again.
  6. In the Breakpoints view, click the Skip All Breakpoints button (see Figure 12). Lines will be drawn through the breakpoints indicating they will be skipped.
Skip all breakpoints.

Figure 12. Skip all breakpoints.

  1. Click the Resume button again. All code is executed.
  2. Return to the browser window and click and release the mouse to stop the current draw and then draw various shapes of different colors. The application is now working!
  3. Click the Clear All button. The Clear All button does not currently work and you get an error in the debugger. You will fix this bug in Part 3.
  4. Terminate the debugging session.
  5. In the Breakpoints view, click the Skip All Breakpoints button again to remove the skips.
  6. Remove or disable the breakpoint on line 43.

 
Using conditional breakpoints

Code execution stops whenever a breakpoint is reached. New to Flash Builder 4, you can now set properties of a breakpoint so execution is stopped at the breakpoint only if a specific condition is met. This condition can be when a specified expression evaluates to true, when the value of an expression changes, or when the breakpoint is reached a certain number of times. Most, but not all, expressions are valid. See the Using Flash Builder 4 documentation for a complete list of valid expressions.
 
  1. Return to Drawing.mxml and in the code editor marker bar, right-click the breakpoint in the onMouseMove() function (line 34) and select Breakpoint Properties (see Figure 13).
Select Breakpoint Properties to create a conditional breakpoint.

Figure 13. Select Breakpoint Properties to create a conditional breakpoint.

  1. In the dialog box that appears, select Enable Condition, type selectedShape=="star", ensure the Condition Is 'True' option is selected, and then click OK (see Figure 14).
file
  1. Look at the breakpoint in the marker bar. It now has a slightly different appearance (see Figure 15).
View the conditional breakpoint icon.

Figure 15. View the conditional breakpoint icon.

  1. Debug the application and draw some circles. The debugger should not be activated.
  2. Change the shape drop-down list to star and try to draw a star. You are returned to the debugger in Flash Builder because the breakpoint condition has been met.
  3. Terminate the debugger.
  4. Right-click on the line 34 breakpoint in the Breakpoints view of the debugging perspective and select Breakpoint Properties.
  5. In the dialog box that appears, select Hit Count, type 100, and then click OK (see Figure 16). The debugger should now only be activated when you try to draw the 101st star.
Set conditional breakpoint properties.

Figure 16. Set conditional breakpoint properties.

  1. Debug the application and draw some stars (not circles!). Continue to draw stars until the debugger is activated.
  2. Terminate the debugger.
  3. In the Breakpoint view, right-click the line 34 breakpoint and select Breakpoint Properties.
  4. In the dialog box, uncheck Hit Count and Enable Condition and then click OK. The breakpoint will still be enabled but it will no longer have any conditions.

 
Where to go from here

In this second tutorial of the series, you learned to use breakpoints. You halted code execution using breakpoints and conditional breakpoints, controlled code execution using Step Into, Step Over, Step Return, and Resume commands, and used the Breakpoints view to manage breakpoints.
 
In Part 3, you’ll complete the debugging of the Drawing application as you learn about the Variables view, the Expressions view, watchpoints, and Run to Line command.