1. Create a Flex Builder project. Set the Project Name to Debugging and the Server type to Other/None.
2. Click Finish. Flex Builder creates an MXML file called Debugging.mxml and opens it in the Source mode.
The Problems View
The Problems view is located below the Source mode. Whenever the Problems view shows errors, it means there are problems to be fixed before the application can be compiled.
1. Add a Button control inside the
<mx:Application> tags, and set its label property to Click Me.
Add a click event handler with the code "Alert.show('Hello from Flex');".
2. Save the changes. When you save changes, the project automatically recompiles. Any problems that are detected by the Flex compiler are displayed automatically in the Problems view.
The Problems view shows an error.
Alert is an ActionScript class that should be imported before it is used within any ActionScript code.
3. Double-click on the error in the Problems view, to move the cursor to the corresponding line of code in the Source mode.
4. To fix this problem, add an
<mx:Script> tag code block after the first Application component tag, but before the Button component.
5. Add an import statement by placing the cursor after the word
Alert in the
click event handler, and then press Ctrl+Spacebar. This shows the list of ActionScript classes that match the string
Alert. Select the Alert class from the list.
The Alert class is imported.
6. Save the file, which compiles the code - the problem should go away.
7. Run the application and click the button to see the Alert dialog box.
8. Close the browser and return to Flex Builder.
The Trace Function
trace function sends a simple string to the Console view, so you can track what is happening internally as your application is running. You can call the
trace function from anywhere in your ActionScript code.
1. In the
<mx:Script> tag and after the
import statement, create a private function named initApp that returns void.
2. In the
initAp function body call the
trace function and pass in a literal string of "Hello from Flex debugging!".
3. Call the custom
initApp function by adding a creationComplete event handler to the
mx:Application tag. The
creationComplete event is dispatched when the application is initialized and all of its properties are set. You can use the
creationComplete event handler to initialize an application.
trace function works only when you run the application in debugging mode.
4. Click the Debug button (next to the Run button), and watch as the application opens in an external browser window. If the Save and Launch dialog box appears before the application opens, click OK.
5. Keeping the browser open, switch back to Flex Builder (Alt+Tab for Windows, and Cmd+Tab for Mac OS).
6. Open the Console view located at the bottom of the interface. The trace message "Hello from Flex Debugging!" appears in the Console view.
Each time the
trace function is called, the string that is passed in is displayed in the Console view. The
trace function can accept any sort of string expression composed of literals, variables, and the concatenation operator (more on the concatenation operator later).
7. Click the terminate button in the Console view to stop the debugging session. You can also close the external browser window to stop the debugging session.
8. In the
initApp function, add a variable declaration after the first
trace section. Name the variable myVar, set its data type to Number, and set the value to 9.
9. Add another
trace statement. Use the concatenation operator to put together the literal string
"The value of myVar is" and the variable
10. Debug the application. Select the Console view to see the resultant
11. Stop the debugging session by closing the browser. Then switch back to the Console view and notice that the red terminate button is disabled. You can use the
trace function to check the value of a variable, trace the order of execution when working with complex event flows, and generally find out what is happening inside a running application.
Breakpoints are lines of code that have been marked so that the debugger stops application execution at that point. While the breakpoint is active, you can inspect the values of variables, step through code one line at a time, and add or remove breakpoints as needed.
1. Add the following lines of code to the
2. Set a breakpoint on the line that declares the
newVar variable. A breakpoint can be set or unset (toggled) by double-clicking on the line number, by right-clicking (control-clicking on Mac OS), and then selecting Toggle Breakpoint or by using the keyboard shortcut Ctrl+Shift+B (Cmd+Shift+B on Mac OS). A dot next to the line number indicates the breakpoint.
3. Save and debug the application. As the application starts up, Flex Builder should take focus. If Flex Builder doesn't immediately take focus, use Alt+Tab (Cmd + Tab on Mac OS) to switch back to Flex Builder.
A perspective in Flex Builder is a particular arrangement of views and other development tools. When the execution of an application stops at a breakpoint, Flex Builder switches to the Flex Debugging perspective so that the debugging tools available. Click Yes to confirm a switch to the Debugging perspective.
The Variables view is in the upper-right corner of Flex Builder interface. The Variables view lets you inspect variables that are local to the function being executed, or that are declared elsewhere in the application.
4. Locate the newVar variable, and check its value.
newVar variable is undefined; although the variable is declared, the breakpoint prevented it from being assigned a value of zero.
5. Look at the Debug view, which includes buttons to step through code.
6. Click the Step Over button once (it's the middle one of the enabled stepping buttons), and check the value of the
newVa variable again. Each button click causes a line of code to be stepped over.
7. Step through the code observing the value of
newVar as it changes. Continue until the
trace statement is reached.
8. Click the Resume button in the Debug view, and the application in the browser becomes active again.
9. Close the browser to terminate the debugging session and return to Flex Builder.
10. To switch to the Development perspective, click to display the list of available perspectives and select Flex Development.
The ability to inspect variables isn't restricted to simple values - complex data returned from a remote service may also be inspected.
11. After the
Script block and before the
Button component, add an
HTTPService component with the url value of http://rss.adobe.com/resources_flex.rss?locale=en_US. This is an Adobe RSS service.
Do this between the
Script component and the
12. Add a result event handler, the result event occurs when the data is returned from the RSS service. When that happens, the event calls a custom function named
resultHandler and passes the
13. At the top of the
Script, just above the
initApp function, add import statements and create a Bindable private variable named feed of type ArrayCollection.
14. In the
Script block, just below the
initApp function, create the resultHandler function. Pass an argument named event with a data type of ResultEvent. Populate the previously declared
feed ArrayCollection by assigning the service call result of event.result.rss.channel.item and casting it as an ArrayCollection.
15. Add a breakpoint on the last line of the
resultHandler function, that is, the line that contains closing brace.
16. Change the
click event handler to
service.send() to send the request to the remote service.
17. Debug the application. When the browser opens, control passes back to Flex Builder.
18. Confirm the switch to the Debug perspective, and then Resume execution of the application.
19. Switch back to the browser, and click the button to send the request to the remote service.
Control returns to Flex Builder when the result event is dispatched by the HTTPService.
20. Inspect the data that is returned. Go to the
feed variable, right-click it (control-click on Mac OS), and select Watch feed.
This adds the
feed variable to the Expressions view. The Expressions view is a part of the Debugging perspective that allows any variable to be inspected, simple or complex.
21. Go to the Expressions view and double-click on its tab to expand it to full screen.
22. Click the feed variable. The
feed variable displays a certain number of objects.
23. Click one of the object proxys to open it. You can view the data from the remote service.
24. Double-click the Expressions view tab to return the Expressions view to normal size.
25. Stop the debugging session. Notice that there is also a terminate button in the Debug view.
Read theLogging chapterin the Flex 3 documentation.
New in Flex 3! Use theProfiler