Debugging Tutorial

Watch the video version of this tutorial.

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.

previous page next page
Your Rating:
Results:
PatheticBadOKGoodOutstanding!
3 rates

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

The 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.

The 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 (plus) to put together the literal string "The value of myVar is" and the variable myVar.

10. Debug the application. Select the Console view to see the resultant trace message.

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

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 initApp function.

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.

The 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 Button component.

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 event object.

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 Button's 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.

Learn more

previous page next page


 

----------------------------------------

Resources