Exploring the debugger interface

Taking a closer look at the debugger interface will help you see what you can do when evaluating ActionScript code.

The two main panels of the debugger interface display the variables and call stack in the FLA. They sit alongside the Output panel, which may be familiar to you if you have used it before to trace statements in your code.

Controlling playback

Before we examine these two panels in more detail, here's a quick note about how to control the playback of the movie as you debug it.

When you choose Debug > Debug Movie, the SWF automatically pauses at the first breakpoint it encounters so that you can take your time and read the information provided in the panels. When you wish to resume playback, click the green play icon in the Debug Console panel (see Figure 6). This causes the SWF to resume playing exactly where it stopped until it encounters the next breakpoint. Clicking the red X icon in the Debug Console panel ends your debug session.

Figure 6. Debug Console panel

The Debug Console panel also contains buttons that allow you to Step Over, Step In, and Step Out:

• Step Over makes the debugger move to the very next line of code and pause there, as though it has encountered a breakpoint. You can click this button repeatedly to slowly go line by line through your code. This is an ideal approach for finding the exact line of code in a method that is causing you problems.
• Step In is very similar to Step Over, except instead of moving ahead to the very next line of code in the script, it jumps to the definition of any function referenced on that breakpoint and then allows you to step through the code of the function line by line.
• Step Out moves the debugger ahead to the point in time where the current function returns a value, whether a breakpoint exists there or not. This allows you to check the values quickly to make sure they are correct.

Variables panel

The Variables panel is your best friend whenever you run a movie in debug mode. As you step through your code, the Variables panel shows you the exact value of every variable in your SWF at that point in time.

As you step through the breakpoints, you can see how the values change, which makes it possible to tell whether your code is behaving properly.

Even more exciting, the Variables panel doesn't only allow you to see the values at runtime. It also allows you to change the values currently assigned to each variable.

The ability to change values of variables at runtime is a tremendously powerful feature. This enables you to see how your application behaves under different conditions by simply changing some of the values.

Let's go back to the first example in this article, where an array contains the names of the four members of the Beatles. This time, run the FLA through the debugger and examine the code that loops through the array. As you step through the breakpoints, notice that the value assigned to the variable current_artist changes (see Figure 7).

Figure 7. Variables panel displaying the values assigned to each variable in the FLA

Rename the value Ringo Starr to Ozzy Osbourne and step through the code line by line until the end of the movie. You'll see that you've just changed your data at runtime. Perfect!

Call stack

The call stack is another powerful feature available as you debug your Flash project. The call stack displays references to the methods, in the order that they were called so that you can make sure they happen in the correct sequence. You can access the call stack through the Debug Console panel.

Let's return to the second example in this article. If you run the StringUtils example through the debugger, notice that the call stack is populated in the Debug Console panel. As you click the references in the panel, the ActionScript editor jumps to the corresponding method definition in the file, timeline, or frame where it is located (see Figure 8).

Figure 8. Using the call stack to jump to a method within a FLA or external file

As you click back through the call stack, you can actually follow along in the Variables panel to evaluate the values at that point in the movie. While you can't change the values of any of these variables at an earlier point in time, this is a great way to monitor what is happening in your Flash application. This strategy allows you to pinpoint any bugs in your code accurately.

Page 3 of 4

Previous Page

Next Page