This content requires Flash To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player. To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the completed tutorial project (ZIP, 19.6 MB)

Code

AddEditView.mxml

        <?xml version="1.0" encoding="utf-8"?>
<s:View title="Add Employee" add="view1_addHandler(event)" …>
	<fx:Script>
		<![CDATA[
			(…)
			protected function view1_addHandler(event:FlexEvent):void
			{
				trace(employee.firstname);
trace(employee);
				(…)
			}
		]]>
	</fx:Script>
	(…)
</s:View>
    

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. You debug the application running in the desktop emulator and on the device. To debug on a device, the computer and the device must be on the same Wi-Fi network.

Note: You can complete the majority of this tutorial for a Flash Builder project set up to use either your local or public server. To complete the last steps and debug on the device, you need to have your project set up to use a public server as discussed in the earlier tutorial, Run on a device.

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. You can also download them from the Adobe Flash Player Download Center.

Note: To see how to use Flash Builder to test your server-side code, see the tutorial Test server-side code in the Flex Test Drive.

Step 1: Trace employee related variables.

Return to AddEditView.mxml and inside and at the end of the add handler use the trace function to display employee and employee.firstname.

Your handler should appear as shown here:

        protected function view1_addHandler(event:FlexEvent):void
{
    (...)
    trace(employee.firstname);
    trace(employee);
 }
    

Step 2: Debug the application.

Click the Debug button or from the Debug menu, select FlexMobileTestDrive 160 (see Figure 1). In the application, edit an employee and then return to Flash Builder and go to the Console view.

Note: If your project is set up to use your public server (see the earlier tutorial, Run on a device), you can also debug on the device if your computer and device are on the same Wi-Fi network.

Figure 1. Debug the application on the desktop.

For the first trace of employee.firstname , you see the value for the employee you edited (see Figure 2). 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.

Figure 2. 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 3).

Figure 3. Switch between the development and debugging perspectives.

Step 4: Add a breakpoint.

In AddEditView.mxml, double-click in the marker bar (to the left of the line numbers) next to the first line of code inside the add handler (see Figure 4).

Figure 4. Add a breakpoint.

Step 5: Debug the application on the desktop.

From the drop-down menu for the Debug button, select FlexMobileTestDrive (160). In the application, select an employee and click the Edit button.

The application will freeze (because code execution has stopped) and 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). If you get a Confirm Perspective Switch dialog box, click Remember my decision and click Yes (see Figure 5).

Figure 5. Confirm the switch to the Flash Debug perspective.

In the Editor view, locate the arrow next to the first line of code inside the handler indicating that code execution has stopped there (see Figure 6).

Figure 6. Locate where code execution has stopped.

Step 6: Look at variables in the Variables view.

Drill-down into the inherited properties of the event object.

You should see two variables, this and event (see Figure 7). this is a reference to the View itself, AddEditView. event is the variable passed to handler the breakpoint is located inside of. It is of type mx.events.FlexEvent. Drill-down into its inherited properties. The properties inherited from the FlexEvent object's parent class, flash.events.Event, and their values are displayed.

Figure 7. View variables in the Variables view.

Step 7: Look at the currentTarget property of the event object.

Drill-down into the event object's inherited currentTarget property and then into its employee property (see Figure 8).

currentTarget is a reference to the view itself, the object listening for the event that was broadcast. Locate the employee property that you declared as a property of that view. Drill-down into its properties and see that all of its values are currently null.

Figure 8. Drill-down into the event object's inherited currentTarget property.

You can double-click the Variables tab (or any tab in Flash Builder) to have it go full-screen. 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 8: Step into your code.

Click the Step Into button (see Figure 9) several 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. Use the Step Into, Step Over, and Step Return buttons until the code after the employee object declaration is reached (see Figure 10).

Figure 9. Use the buttons in the Debug view toolbar to step through code.

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

Figure 10. Step through the code until the employee variable is set.

In the Variables view, drill-down to event > [inherited] > currentTarget > employee > [inherited] again and see that the employee object now has values for its properties (see Figure 11).

Figure 11. See the new property values for the employee object.

If you are interested in watching the value of one (or more) particular variables, instead of walking through the code and watching its values as you just did, you can also explicitly watch them instead.

PHP developers using Flash Builder 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 Mobile (PHP) Application and not as a Mobile Application. To make sure you are running as a Mobile (PHP) Application, choose Debug As from the Debug button menu or the main Run menu option or create a specific debug configuration.

Step 9: Watch the employee variable.

Select employee anywhere inside your code, right-click it, and select Create Watch Expression.

You should see the expression listed in the Expressions view (see Figure 12).

Figure 12. Create a watch expression.

You can also add watch expressions by manually typing them into the Expressions view or by right-clicking a variable in the Variables view.

Step 10: Step through code and watch the expression change value.

Click the Resume button (see Figure 9) and then return to the running application. Return to the employee list, select an employee, and click the Edit button. In Flash Builder, expand the employee variable in the Expressions view and then use the Step Into, Step Over, and Step Return buttons and see the value of the watched expression change (see Figure 13).

Figure 13. Watch the employee variable.

Stop the debugger.

Step 11: Set up debugging on a device.

Connect the device to the computer with the USB cable. Make sure your project is set up to use your public sever (and not the local server). Make sure the computer and the device are on the same Wi-Fi network.

For more details about setting up the project to use your public server, see the earlier tutorial, Run on a device.

The USB cable is used to install the application on the device initially. The Wi-Fi network is used for all communication between the device and Flash Builder when the application is debugged.

Step 12: Debug the application on a device.

From the drop-down menu for the Debug button, select one of the device configurations, like FlexMobileTestDrive(android) or FlexMobileTestDrive(iOS) (see Figure 14). For iOS devices, add the updated application IPA file that is created to iTunes and sync your iOS device. After the application launches on the device, select an employee and click the Edit button.

Figure 14. Debug the application on a device.

If you get a dialog box asking for the IP address of the host computer, enter it.

For Apple iOS devices, you will get a Waiting for Debugger Connection dialog box in Flash Builder (see Figure 15). The debugger will connect after you install and run the application on the device. If the debugger times out before you finish installing and running the application, when you are done installing it, just choose to debug on the iOS device again and then launch the application on the device.

Figure 15: Debug on an Apple iOS device.

The application will freeze and you will be returned to Flash Builder automatically – just like when you were debugging the desktop version of the application. You can now step through your code as you did in the previous steps.

Note: If you do not have a run configuration created for the device, see the earlier tutorial, Run on a device.

If you have trouble debugging on the device, check to see if you computer is on a VPN or using a firewall. If the computer is on a VPN and the device is not, you may need to take the computer off the VPN for debugging to work. If you have a firewall turned on, try disabling it. If you cannot or do not want to disable it, try opening port 7935, the port used by the Flash Builder debugger to communicate with the device.

In this tutorial you learned to use the Flash Builder Debugger to debug your client-side code. In the next tutorial, you learn to package your application for distribution.

Learn more

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

Documentation: Developing mobile applications with Flash Builder and Flex

More resources

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.

Tutorials and samples

Tutorials

Samples

Flex user forum

05/20/2013	RTMPE support in flex mobile on ios devices
05/20/2013	How to get all the parent of a leaf node in Tree Flex
05/17/2013	HTTP thread blocking
08/04/2011	Disabling auto-complete on Spark ComboBox

Flex Test Drive for Mobile: Debug and package the application

by Adobe

Modified

Page tools

Debug client-side code