Tài liệu Finding and Fixing Run-Time Bugs pptx

Imagine you want to place the following script on Frame 10 of your movie: trace "The movie is currently on Frame " + _currentframe; When the movie is played in the testing environment an

< Day Day Up >

Finding and Fixing Run-Time Bugs

You've made it through the process of exporting an application without a compile-time error So far, so good But as you begin to work with the exported application, you

discover that it's just not working properly Perhaps displayed data is not correct, text and graphics onscreen are not positioned correctly, or when you press a button that's

supposed to send information to the server, nothing (or the wrong thing) happens These kinds of bugs are known as run-time bugs because they're not obvious until the

application is run and put through the ringer

Run-time bugs typically result from spelling or logic errors, such as mistakenly referring

to a movie clip instance named miMovie_mc instead of myMovie_mc, or using a than operator (<) rather than the intended greater-than operator (>) in a conditional

less-statement Or a function might contain a script that's logically but not syntactically faulty,

so that when executed the function has a very bad effect on the rest of the application

Unfortunately, information about these kinds of bugs doesn't automatically show up in the Output window; a bit of sleuthing and logical deduction is required to find and

eliminate such errors

Fortunately, Flash provides several tools to help you perform various deductive reasoning tasks with your project while it plays The two most widely used tools are the trace() action and the Debugger We'll look at both of these tools in the following sections

Using the trace() action

The trace() action allows you to output a custom message to the Output panel in response

to a script's execution This is useful to get a behind-the-scenes look at how a script is functioning—primarily to test interactivity and to output custom messages that tell you what's happening with the data in a movie at any point in time Consider the following simple example

Imagine you want to place the following script on Frame 10 of your movie:

trace ("The movie is currently on Frame " + _currentframe);

When the movie is played in the testing environment and reaches Frame 10, the Output

panel will automatically open and display the following message:

"The movie is currently on Frame 10"

This example is not meant to demonstrate the true power of the trace() action, but simply

to illustrate its use The trace() action can be useful in finding bugs because it allows you

to track down the error by means of deduction, as the following exercise shows

1 Choose File > New From the New Document dialog box that appears, select Flash Document to start a new Flash project

Because the end result of this project is to teach how custom messages are output

in the Output panel and not so much to see the onscreen results of ActionScript,

we won't use a prebuilt project file Nevertheless, we'll need a simple movie clip

and button instance to work with Let's create those

2 Select the Oval tool and draw a small circle anywhere on the stage

The size and appearance of the circle are not important for this exercise

3 With the circle selected, press F8 on your keyboard to open the Convert to Symbol dialog box Give this symbol any name you choose, select the Button behavior, and click OK

This step converts the circle to a button

4 With the Property Inspector open, select the button instance and give it an instance name of myButton_btn

Next we'll create a movie clip instance

5 Select the Rectangle tool and draw a small square on the stage

Again, the way it looks is not important

6 With the square still selected, press F8 Give this symbol any name you choose, but select the Movie Clip behavior Click OK

This step converts the square to a movie clip

7 With the Property Inspector open, select the square movie clip instance and give it

an instance name of myClip_mc

Now we'll do some scripting

8 With the Actions panel open, select Layer 1 and add the following script:

yet to define, named myTraceTest() Let's define that function next

9 Add the following function definition at the end of the current script:

has been executed, which occurs only after the myButton_btn instance has been pressed As we mentioned, that's what this part of the script is intended to do; however, note that there's an error in our script We've intentionally misspelled myClip_mc as myClop_mc

Let's test the project

10 Choose Control > Test Movie

In the testing environment, click the myButton_btn instance The Output panel will open and display the following message:

Activation button is pressed

myTraceTest function is executed

This message indicates that the button worked, and that the function call the button made to myTraceTest() was executed So far, so good Because the function

executed, myClip_mc would have been assigned an onMouseDown event handler method, allowing the user to click anywhere on the stage to see the trace message,

"I now have POWER!" displayed in the Output panel When you click, though,

nothing happens Interesting Using our trace() actions, we can deduce that the script on the button was executed, and the function was executed, but something went wrong with the part of the script that assigns the onMouseDown event

handler to myClip_mc We know where to look for a bug!

Sure, we gave it away in Step 9, when we told you that the event handler method assignment had a spelling error But even without this help you could have quickly deduced that something was wrong with that section of code by simply realizing that everything leading up to the event handler assignment worked as designed, as indicated by the trace() messages we used trace() messages are very useful in

tracking down bugs

11 Close the test movie to return to the authoring environment Select Frame 1, open the Actions panel, and fix the spelling error in the function definition by changing myClop_mc to myClip_mc Choose Control > Test Movie

In the testing environment, click the myButton_btn instance The Output panel will open and display this message:

Activation button is pressed

myTraceTest function is executed

This indicates that the button worked, and that the function call the button made to myTraceTest() was executed

Now click anywhere on the stage The message "I now have POWER!" will

appear in the Output window, indicating that the entire project is now working as

it should

12 Close the test movie, return to the authoring environment, and save this file as Testing1.fla

We will build on this file in the next section

This has been a simple demonstration of the trace() action You can see how strategically placed trace() actions can help you to follow the execution of a script, and thus deduce where an error might exist This feature lets you focus your bug-sleuthing efforts on a particular section of code

The trace() action can be used to inform you when a function has been executed:

function myFunction(){

trace("myFunction has been called");

}

or what parameter values were passed to the function when it was called:

function myFunction(name:String, age:Number){

trace("myFunction has been called and passed values of " + name + " and " + age);

trace("age is greater than 100");

}else{

trace("age is exactly 100");

}

and so on

These little hints throughout your code can provide insight into how things are

working behind the scenes

TIP

trace() actions can be turned on or off individually by commenting the action, as in the following example:

//trace("Let me speak my peace!")

This strategy can be helpful if you're using several trace() actions in your code, but you only want to focus on the output of an individual trace() action

Using the Debugger

Normally, you can't see either the data in variables or the values associated with movie properties while your movie is playing; however, this data plays a crucial role in

determining how your interactive movie looks and works Visual bugs are easy to spot, but bugs in ActionScripts can be trickier to track down and correct Not only is the data usually invisible; it can also be changing constantly This is where Flash's Debugger comes in: with the Debugger, you can view the real-time values of variables and

properties while a movie is playing, as well as change values at will to see how such alterations will affect the flow of an individual script or the movie as a whole In addition, the Debugger allows you to control script execution line by line You can start and pause

a script at different points of its execution, which lets you slow to a crawl something that normally takes milliseconds to complete This functionality enables you to assess how a particular script is affecting the movie as it executes By taking control of the movie's logic in this manner, you can often quickly pinpoint problems in your scripts

Before learning how to use the Debugger, it's a good idea to become familiar with its interface, which is made up of the following elements:

• Display list The Display list shows the hierarchical structure of the movies in the

movie (Flash player) window, including the main movie, movie clips, and any movies that have been loaded This list is updated in real time as various clips and loaded movies are added and removed from the Player window as the movie plays Selecting a movie in the Display list causes the Properties and Variable tabs to reflect that movie's current properties and variables

• Properties tab Clicking this tab displays the names and current property values of

the movie selected in the Display list Some of the properties here are dimmed, meaning that you can view but not change them If you double-click a value that's not dimmed, you can change that value and immediately see the effect of that change in the movie while it plays Because the movie may contain scripts with conditional statements based on the current value of a specific property of a

particular movie, you can make sure that these conditional statements are working properly by changing a property value on this tab Keep in mind, however, that you can't use expressions when entering new property values from the Debugger: New values can be strings (remember to use quotes), numbers, or a Boolean (true

or false)

• Variables tab Clicking this tab displays the names and current values of the

variables included in the movie that's selected in the Display list Double-clicking

a value allows you to change it and view the immediate results of that change in the movie Because variables provide the foundation of most ActionScripts, using the Debugger to change individual values can help you track down the problems that might occur when a movie is fed a certain piece of data Although you can see the values of Object and Array variables on this tab, you can't change them, nor can you use expressions when entering new variable values from the Debugger New values can be strings (remember to use quotes), numbers, or a Boolean (true

or false)

• Locals tab This tab contains a list of local (temporary) variables that are used

within a function when that function block is being stepped through using

breakpoints Breakpoints are explained in greater detail in the exercise for this section

• Watch list tab The Watch list tab contains a list of variables that you've

designated to be "watched," meaning that their values are constantly monitored on this tab You can add variables from multiple movies to this list so that you can manage all of them from a single tab

• Call Stack When a script calls a function—and even when a function calls another function that may call yet another function (enough already!)—this pane displays

a hierarchical list of those calls This list helps you determine the path the project takes to perform a certain task, enabling you to possibly optimize your code a bit

so that it requires fewer steps to perform a task, with the end goal of helping it run faster

• Breakpoint controls These buttons control the execution of scripts when using

breakpoints (markers in a script that indicate a pause in the script's execution) These buttons are discussed in more detail in the exercise for this section

• Code window This window displays individual scripts within your project, similar

to the code window in the Actions panel The window is updated to display a script when a breakpoint is encountered within that script, although you can

specifically select a script to display by using the drop-down menu above the code window

• Debugger Options button Clicking this button displays a menu of commands pertaining to the Debugger The menu also contains commands for controlling playback and view quality of the movie being debugged

Because each project is totally unique, it would be impossible to address every

conceivable way in which the Debugger could be used to track down and eliminate bugs

In the following exercise, we'll attempt to give you an overall feel for the process, so that you know how to insert and use breakpoints, see and work with your project's invisible data, and understand the usefulness of the Debugger's features

1 Open Testing1.fla

This is the file you created in the preceding exercise We'll add a movie clip

instance as well as a few additional scripts to test the features of the Debugger

2 While pressing the Control key (Windows) or Command key (Macintosh), click and drag the square movie clip instance (named myClip_mc) to create a duplicate

Place this duplicate anywhere on the stage

3 Select the duplicate and give it an instance name of myOtherClip_mc

Next we'll add event handlers to the two square movie clip instances

4 With the Actions panel open, select Frame 1 of Layer 1 and add the following script:

A variable named myVariable is created on the myClip_mc timeline and assigned

a value of 100 Then an onEnterFrame event handler is set up to constantly check the value of that variable The if statement specifies that if the variable's value ever drops below 100, the clip will start rotating Let's add a similar script to the

exceptions The name of the variable is myOtherVariable, and the variable is assigned to the myOtherClip_mc timeline with an initial value of 50 When this variable's value drops below 50, myOtherClip_mc will start rotating

Let's test this new functionality and see how the Debugger can help control these

values to affect the movie as it plays

6 Choose Control > Debug Movie

This step opens the movie in the testing environment, with the Debugger panel open Initially, the movie is paused because Flash assumes that you want absolute control over when the movie begins playing and the debugging process begins—especially when using breakpoints Click the Continue button on the Debugger

The Display list contains a hierarchical structure of timelines in the current frame, including the main timeline Clicking one of the movie clip icons makes that movie's properties and variables the focus of the Properties and Variables tabs, respectively Let's look at some properties

NOTE

Although _global is shown as a timeline in the Display list, it's actually a global object within the movie, which is available to all timelines It's shown as a timelinefor the sake of congruency

7 Click the myClip_mc instance in the Display list; then click the Properties tab to view the various properties of myClip_mc

Notice that some properties (and their values) are dimmed This is because they're read-only properties; their values cannot be set, only viewed All other property