Debugging tools in Flash

CIS 126

Debugging• Flash provides several tools for testing ActionScript in

your SWF files.

– The Debugger, lets you find errors in a SWF file while it’s running in Flash Player.

– The Output panel, which shows error messages (including some runtime errors) and lists of variables and objects (see Using the Output panel)

– The trace statement, which sends programming notes and values of expressions to the Output panel (see Using the trace statement)

– The throw and try..catch..finally statements, which let you test and respond to runtime errors from within your script

Debugger Tool• You must view your SWF file in the Flash Debug

Player. – Installed by default

• The Debugger shows a hierarchical display list of movie clips currently loaded in Flash Player.

• Using the Debugger, you can display and modify variable and property values as the SWF file plays, and you can use breakpoints to stop the SWF file and step through ActionScript code line by line.

Debugger Tool

• You can use the Debugger in test mode with local files, or you can use it to test files on a web server in a remote location.

• The Debugger lets you set breakpoints in your ActionScript that stop Flash Player and step through the code as it runs.

• You then go back to your scripts and edit them so that they produce the correct results.

Debugger Tool

• After it’s activated, the Debugger status bar displays the URL or local path of the file,

• tells whether the file is running in test mode or from a remote location,

• shows a live view of the movie clip display list.– When movie clips are added to or removed from the

file, the display list reflects the changes immediately.

Debugger Tool

• To activate the Debugger in test mode:– Select Control > Debug Movie.

• This command exports the SWF file with debugging information (the SWD file) and enables debugging of the SWF file.

• It opens the Debugger and opens the SWF file in test mode.

Debugger Tool

Displaying and modifying variables

• The Variables tab in the Debugger shows the names and values of any global and Timeline variables in the SWF file selected in the display list.

• If you change the value of a variable on the Variables tab, you can see the change reflected in the SWF file while it runs. – For example, to test collision detection in a game, you

can enter the variable value to position a ball in the correct location next to a wall.

Locals Tab

• The Locals tab in the Debugger shows the names and values of any local variables that are available in the line of ActionScript where the SWF file is currently stopped, at a breakpoint or anywhere else within a user-defined function.

Displaying Variables

• To display a variable:1. Select the movie clip containing the variable

from the display list. To display global variables, select the _global clip in the display list.

2. Click the Variables tab.

Variables

• The display list updates automatically as the SWF file plays.

• If a movie clip is removed from the SWF file at a specific frame, that movie clip, along with its variable and variable name, is also removed from the display list in the Debugger. – However, if you mark a variable for the Watch

list the variable is removed from the Variables tab, but can still be viewed in the Watch tab.

Variable Tab

Modifying a Variable

• To modify a variable value: – Double-click the value, and enter a new value.

• The value cannot be an expression. For example, you can use "Hello", 3523, or "http://www.macromedia.com", and you cannot use x + 2 or eval("name:" +i). The value can be a string (any value surrounded by quotation marks [""]), a number, or a Boolean value (true or false).

Using the Watch List

• To monitor a set of critical variables in a manageable way, you can mark variables to appear in the Watch list.

• The Watch list shows the absolute path to the variable and the value.

• You can also enter a new variable value in the Watch list the same way as in the Variables tab.– The Watch list can show only variables and

properties that can be accessed by using an absolute target path, such as _global, _root.

Using the Watch List

• If you add a local variable to the Watch list, its value appears only when Flash Player is stopped at a line of ActionScript where that variable is in scope.

• All other variables appear while the SWF file is playing. – If the Debugger can’t find the value of the variable,

the value is listed as undefined.• The Watch list can show only variables, not

properties or functions.

Variable list vs Watch List

Adding Variables to the Watch List

• To add variables to the Watch list:– On the Variables or Locals tab, right-click (Windows)

or Control-click (Macintosh) a selected variable and then select Watch from the context menu. A blue dot appears next to the variable.

– On the Watch tab, right-click (Windows) or Control-click (Macintosh) and select Add from the context menu. Double-click in the name column, and enter the target path to the variable name in the field.

Removing variables from the Watch List

• On the Watch tab, right-click (Windows) or Control-click (Macintosh) and select Remove from the context menu.

Displaying movie clip properties and changing editable properties • The Debugger’s Properties tab shows all

the property values of any movie clip on the Stage.

• You can change a value and see its effect in the SWF file while it runs.

• Some movie clip properties are read-only and cannot be changed.

To display a movie clip’s properties in the Debugger:

• Select a movie clip from the display list. • Click the Properties tab in the Debugger.

Properties Display

To modify a property value:• Double-click the value, and enter a new

value. – The value cannot be an expression. For

example, you can enter 50 or "clearwater", but you cannot enter x + 50. The value can be a string (any value surrounded by quotation marks [""]), a number, or a Boolean value (true or false). You can’t enter object or array values (for example, {id: "rogue"} or [1, 2, 3]) in the Debugger.

Setting and removing breakpoints

• A breakpoint lets you stop a SWF file running in Flash Player at a specific line of ActionScript.

• You can use breakpoints to test possible trouble spots in your code. – For example, if you’ve written a set of if..else if

statements and can’t determine which one is executing, you can add a breakpoint before the statements and step through them one by one in the Debugger.

Setting Breakpoints

• You can set breakpoints in the Actions panel or in the Debugger. – To set breakpoints in external scripts, you must use

the Debugger while in a debugging session.• Breakpoints set in the Actions panel are saved

with the FLA file.• Breakpoints set in the Debugger are not saved

in the FLA file and are valid only for the current debugging session.

Breakpoint Caution• If you set breakpoints in the Actions panel and

press the Auto Format button, you might notice that some breakpoints are no longer in the correct location.

• ActionScript might be moved to a different line when your code is formatted because sometimes empty lines are removed.

• It might be necessary to check and modify your breakpoints after you click Auto Format, or to auto format your scripts before setting breakpoints.

To set a breakpoint in the Actions panel

• Click in the left margin. A red dot indicates a breakpoint.

• Click the Debug options button above the Script pane.

• Right-click (Windows) or Control-click (Macintosh) to display the context menu, and select Set Breakpoint, Remove Breakpoint or Remove All Breakpoints.

• Press Control+Shift+B (Windows) or Command+Shift+B (Macintosh).

To set and remove breakpoints in the Debugger:

• Click in the left margin. A red dot indicates a breakpoint.

• Click the Toggle Breakpoint or Remove All Breakpoints button above the code view.

• Right-click (Windows) or Control-click (Macintosh) to display the context menu, and select Set Breakpoint, Remove Breakpoint, or Remove All Breakpoints.

• Press Control+Shift+B (Windows) or Command+Shift+B (Macintosh).

Break points

• After Flash Player stops at a breakpoint, you can step into, over, or out of that line of code. (See Stepping through lines of code.)

• Note: Do not set breakpoints on comments or empty lines; if breakpoints are set on comments or empty lines, they are ignored.

Stepping through lines of code • When you start a debugging session, Flash

Player is paused so that you can toggle breakpoints.

• If you set breakpoints in the Actions panel, you can simply click the Continue button to play the SWF file until it reaches a breakpoint.

• If you didn’t set breakpoints in the Actions panel, you can use the jump menu in the Debugger to select any script in the SWF file.

• When you have selected a script, you can add breakpoints to it.

Starting the Process

• After adding breakpoints, you must click the Continue button to start the SWF file.

• The Debugger stops when it reaches the breakpoint.

Looking at a break Point• For example, in the following code, suppose a

breakpoint is set inside a button on the line myFunction():

on(press){ myFunction(); }

• When you click the button, the breakpoint is reached and Flash Player pauses.

• You can now step in to bring the Debugger to the first line of myFunction() wherever it is defined in the document.

• You can also step through or out of the function.

Stepping through the code• As you step through lines of code, the values of

variables and properties change in the Watch list and in the Variables, Locals, and Properties tabs.

• A yellow arrow on the left side of the Debugger’s code view indicates the line at which the Debugger stopped.

• Use the following buttons along the top of the code view:

Control Buttons

• Step In advances the Debugger (indicated by the yellow arrow) into a function. Step In works only for user-defined functions.

• Step Out advances the Debugger out of a function. • Step Over advances the Debugger over a line of code. • Continue leaves the line at which the player is stopped

and continues playing until a breakpoint is reached. • Stop Debugging makes the Debugger inactive but

continues to play the SWF file in Flash Player.

The Output panel• In test mode, the Output panel shows

information to help you troubleshoot your SWF file.

• Some information (such as syntax errors) appear automatically.

• You can show other information by using the List Objects and List Variables commands.

The Output Panel

• To display or hide the Output panel, select Window > Development Panels > Output or press F2.

Output Panel and Trace

• If you use the trace statement in your scripts, you can send specific information to the Output panel as the SWF file runs. This could include notes about the SWF file’s status or the value of an expression.

Listing a SWF file’s objects• In test mode, the List Objects command shows

the level, frame, object type (shape, movie clip, or button), target paths, and instance names of movie clips, buttons, and text fields in a hierarchical list.

• This is especially useful for finding the correct target path and instance name.

• Unlike the Debugger, the list does not update automatically as the SWF file plays; you must select the List Objects command each time you want to send the information to the Output panel.

List Objects Caution:• Selecting the List Objects command will

clear any information that currently appears in the Output panel.

• If you do not want to lose information in the Output panel, select Save to File from the Output panel Options pop-up menu or copy and paste the information to another location before selecting the List Objects command.

List Objects

• The List Objects command does not list all ActionScript data objects. In this context, an object is considered to be a shape or symbol on the Stage.

To display a list of objects in a SWF file:

• If your SWF file is not running in test mode, select Control > Test Movie.

• Select Debug > List Objects. – A list of all the objects currently on the Stage

appears in the Output panel