by Adobe
adobe_logo

Created

2 May 2011

 

Debug client-side code

 
 

Code

<?xml version="1.0" encoding="utf-8"?> <s:Application …> <fx:Script> <![CDATA[ (…) protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void { trace(employee.firstname); trace(employee); trace(empDg.dataProvider); trace((empDg.dataProvider as AsyncListView).list); employeeService.updateEmployee(employee); ]]> </fx:Script> (…) </s:Application>

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.
 

 
Step 1: Trace variables.

Inside the DataGrid gridItemEditorSessionSave handler, empDg_gridItemEditorSessionSave, use the trace() function to display employee.firstname, employee, empDg.dataProvider, and (empDg.dataProvider as AsyncListView).list.
 
Your handler should appear as shown here:
 
protected function empDg_gridItemEditorSessionSaveHandler(event:GridItemEditorEvent):void { trace(employee.firstname); trace(employee); trace(empDg.dataProvider); trace((empDg.dataProvider as AsyncListView).list); employeeService.updateEmployee(employee); }

 
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.
 
View employee related variables traced in the Console view.
Figure 1. View employee related variables traced in the Console view.

 
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).
 
Switch between the development and debugging perspectives.
Figure 2. Switch between the development and debugging perspectives.

 
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.
 
Add a breakpoint.
Figure 3. Add a breakpoint.
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).
 
Locate where code execution has stopped.
Figure 4. Locate where code execution has stopped.

 
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.
 
View variables in the Variables view.
Figure 5. View variables in the Variables view.

 
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.
 
Drill down into the event object's inherited curerntTarget property.
Figure 6. Drill down into the event object's inherited curerntTarget property.
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.
 
Use the buttons in the Debug view toolbar to step through code.
Figure 7. Use the buttons in the Debug view toolbar to step through code.
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).
 
Create a watch expression.
Figure 8. Create a watch expression.
Watch a variable.
Figure 9. Watch a variable.
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
 
Documentation: Using Flex 4.5
 
Flex Developer Center
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.