Flex Test Drive for Mobile: Test and deploy your code
<?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 (desktop) (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.
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.
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).
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).
Step 5: Debug the application on the desktop.
From the drop-down menu for the Debug button, select FlexMobileTestDrive (140). 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).
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).
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.
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.
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).
Various files will open and close as code in other classes is executed.
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).
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).
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).
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 FlexMobileTestDrive (device) (see Figure 14). After the application launches on the device, select an employee and click the Edit button.
If you get a dialog box asking for the IP address of the host computer, enter it.
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 and/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
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.
