Successful debugging hinges on the debugging skills of the developer and the debugging tools available to the developer. The former can be acquired only through experience and education while the latter is both a product of the development platform and the community and / or corporate tooling support.
Common debugging techniques include tracing (or printing), breakpoint debugging, step-through debugging and watch expressions. Each of these debugging techniques is supported by Flex Builder.
The Flex Builder Debugging perspective contains a code editor and a set of views designed to aid Flex developers in the debugging process. Flex Builder debugging views include Debug view, Console view, Variables view, Breakpoints view and Expressions view.
Flex Builder Debug View
Outlines the application call stack. Each function is displayed in order of execution (with the bottom of the list being the first function called). The Debug view serves as the control center of the Flex debugger. It allows a developer to start / stop application execution and step over lines of code and step into and out of functions.
Flex Builder Console View
Outputs the results of any trace statements added to your code. Also known as "poor man debugging", trace statements are synonymous with print statements or alert statements. Most developers are very familiar with this debugging technique.
Flex Builder Variables View
Displays variables (simple and complex), their value and data type. By selecting a function in the Debug view, you can inspect the current value of the function's local variables (variables limited in scope to the selected function). Variables outside of the function's scope are also available in the Variables view and are labeled as 'This'. Variable values are also configurable allowing developers to test alternate scenarios in hope of obtaining the desired outcome.
Flex Builder Breakpoints View
Displays a list of application breakpoints. Breakpoints allow developers to inspect the state of an application during execution. Breakpoints can be enabled, disabled or removed in the Breakpoints view.
Flex Builder Expressions View
Allows developers to "watch" specific variables through the life cycle of an application. Variables can be added to the Expressions view by selecting 'Create Watch Expression' in the Variables view for a specific variable.
A Debug session is initiated by clicking the Debug icon found on the Flex Builder toolbar and (by default) runs against the HTML wrapper of a Flex application. Therefore, a debug session requires the use of a web browser. (Change the default web browser by selecting Window > Preferences, then General > Web Browser.) Once a breakpoint is encountered, execution is halted and focus is returned to Flex Builder. At this point a developer can analyze the state of the application and make any necessary changes. Changes may include code changes in the code editor, variable changes in the Variables view, adding new breakpoints, etc. Execution is resumed by clicking 'Continue' in the Debug view. When another breakpoint is encountered, execution is halted once again. In the interim, developers may choose to step over each line of code, step into or out of a function. As this is done, variable values change accordingly. This process continues until the application has run its course or the developer terminates the Debug session.
The Flex debugger is not intended to highlight syntax or data type errors. ActionScript is a compiled language (versus interpreted) and those errors are caught by the compiler at compile time. Rather, the Flex debugger provides valuable insight into a Flex application. Debugging is part of the development process and application transparency is necessary to attain project success. The Flex Builder Application Debugger is a vital part of a successful development life cycle.