Flex Test Drive: Test and debug your code

Video | Code | Tutorial | Links

Debug client-side code

Download the Test Drive solution files (ZIP, 14 MB)

Code

Tutorial

In this tutorial, you use the Flash Builder debugger to debug your Flex code. First, you trace variables to display their values at runtime in the Flash Builder Console view. Next, you add breakpoints to stop code execution inside of an event handler and look at the values of variables in the Flash Builder Debugger as you step through your code.

In order to debug applications you must have the debug version of Flash Player installed for your browser. Debug versions of Flash Player are installed when Flash Builder is installed.

Your handler should appear as shown here:

Step 2: Debug the application.

Click the Debug button to debug the application. Edit an employee's first name and then return to Flash Builder and go to the Console view.

For the first trace of employee.firstname, you see the new first name for the employee you edited (see Figure 1). For the second trace of employee, you get [object Employee], indicating it is a complex object of type Employee; however, you don't get any of the property values. For the third trace of empDg.dataProvider, you get info telling you the object is of type AsyncListView with 13 items. For the fourth trace, you get a comma-delimited list of Employee objects indicating it is an array of Employee objects, but again no individual property values.

Step 3: Stop the debugger and switch perspectives.

Click one of the red Terminate buttons and then click the Flash and Flash Debug buttons in the upper-right corner to switch between the development and debugging perspectives. End in the development perspective.

If you do not see both buttons, click the left edge of the tab and drag it to the left until you see both (see Figure 2).

Step 4: Add a breakpoint.

Double-click in the marker bar (to the left of the line numbers) next to the first line of code inside the DataGrid gridItemEditorSessionSave handler, empDg_gridItemEditorSessionSaveHandler (see Figure 3). Debug the application and edit a cell.

After editing a cell in the browser, you will be returned to Flash Builder automatically (or you may see it flashing in your dock or task bar and need to navigate to it manually), and you will see an arrow next to the first line of code inside the handler indicating that code execution has stopped there (see Figure 4).

Step 5: Look at variables in the Variables view.

Drill down into the event object and locate the columns.dataField property.

You should see two variables, this and event (see Figure 5)—this is a reference to the application itself; event is the variable passed to empDg_gridItemEditorSessionSaveHandler(). Locate the event.column.dataField property, the reference to the field that was edited in the DataGrid.

Step 6: Look at inherited properties of the event object.

Drill down into the event object's inherited properties and then into the currentTarget property (see Figure 6).

currentTarget is a reference to the empDg DataGrid, the object listening for the event that was broadcast. Drill down into the currentTarget object's properties and locate the dataProvider property. The dataProvider is an AsyncListView whose list property is set to an ArrayCollection of Employee objects. Look at the values for one of the Employee objects.

Note: You can double-click the Variables tab (or any tab in Flash Builder) to have it go fullscreen. This is helpful so you can see more variables at a time. Double-click the tab again to return it in its initial size.

Step 7: Step into your code.

Click the Step Into button (see Figure 7) ten or more times and watch as the debugger steps through your code. Stop when you are in a different file and then click the Step Return button to return code execution back to your MXML file.

Various files will open and close as code in other classes is executed.

You could continue to step through code and watch the values of variables in the Variables view, but if you are interested in watching the value of one (or more) particular variables, you can explicitly watch them instead.

PHP developers using Flash Builder 4.5 for PHP: You can also place breakpoints in the PHP files located in the Flash Builder PHP project enabling you to debug and step through both client and server-side code. To debug server-side code, you must debug as a Web (PHP) Application and not as a Web Application because the PHP Debugger must start from a PHP browsing session. To make sure you are running as a Web (PHP) Application, choose Debug As from the Debug button menu or the main Run menu option or create a specific run configuration.

Step 8: Watch the variables.

Select employee anywhere inside the empDg_gridItemEditorSessionSaveHandler() handler and select Create Watch Expression. In the Expressions view, add a new expression to watch, employee.firstname (see Figure 8). Click the Resume button in the Flash Builder Debugger (see Figure 7), return to the application in the browser window and change another value in the DataGrid, and then return to Flash Builder and look at the new values in the Expressions view (see Figure 9).

Stop the debugger.

In this module you've learned to use the Flash Builder Test Operation to test
your server-side code, the Flash Builder Network Monitor to trace network traffic between your Flex application and the server, and the Flash Builder debugger to debug your Flex application.

In the next module, you will learn how to deploy your application.

Learn more

Refer to the following resources to learn more about this topic:

Documentation: Using Flash Builder 4.5

• Debugging your applications
• Managing variables in the Variables views

Documentation: Using Flex 4.5

• Configuring the debugger version of Flash Player to record trace() output
• Client-side logging and debugging
• About debugging

Flex Developer Center

• Debugging Flex 4 applications