Wednesday, January 7, 2009

Overview of the Debugger in Flash CS4

Using the Debugger Overview

Ok, this is not the sexiest Flash topic out there, but I've found very little on this topic when I did a search so I thought I'd make this contribution for the collective benefit of Flashinistas world-wide.

The Debugger in Flash CS4 is a window and set of related tools to help you “debug” or troubleshoot Actionscript code that is not executing properly. Typically to make full use of the Debugger you’ll need to set a breakpoint in your code that tells the Flash player to stop executing your Actionscript at the particular line in your code where the breakpoint is set. Think of it as a tool that allows you to freeze time, or at least the time during which your Actionscript code is executing.
Then using tools in the Debug Window you can very deliberately choose to execute the specific line of code in which the breakpoint is set and then observe what happens. This ability, to step through your code (among other related tools which will be described in greater detail below) line by line can be extremely useful when trying to find the fly in the ointment (or the bug in your code).

Try this simple example:

Create a new file.
Select the keyframe in frame one , open the Actions panel and add the three trace statements, one on each line:

trace(“first”);|
trace(“second ”);
trace(“third ”);

Add a breakpoint by only after before the first trace, clicking to the left of the number 1 (the line numbers that should automatically be generated as you write Actionscript code. A red circle indicating the break point should appear.

Select Debug Movie from the Debug menu to enter the debugging window.
You’ll notice a set of interrelated panels: in the upper left the Debug Console; lower left Variable Panel; The area at the top center display a line (or lines if more than one) where Actionscript was encountered in the file, below that the code for the currently selected frame or a selected external Actionscript file; and the Output panel at the bottom .
You will notice that the string “First” being evaluated from the first trace function has not yet appeared in the Output panel, the reason is the break point stopped the execution of the code just before that line was executed.

In the Debug Console panel in the upper left hand side click on the green “Continue” button which will execute all the code till another break point is encountered. . Note that the evaluation of the trace function now appears in the output panel and all three trace statements appear: “first”, “second”, “third”.

Close the Debug window by either clicking on the large red X in the Debug Console or clicking on the close button for the swf file that was generated when you first choose Debug movie.
Go back to the Flash file and execute Debug Movie again.
This time click on the Step Over button which will cause the debugger to jump to the next line of code and stop. Continue clicking on the Step Over button to step through your code line by line. If there were any variables and properties in your code you can seethem and check their values changing in the Variables panel in the lower left corner.

Note the other two buttons:
Step In will jump to any function or method reference on the current breakpoint line and then step through the code of that function or method a line at a time.
Step Out moves the debugger to the exit point of the current function or method, typically to where the function or method returns a value (if it returns a value.

Mastering the debugger just takes a little knowledge and a bit of practice, and it's on the ACE test!

1 comment:

actionman said...

Flash Debugger is almost useless for me. That's because you can't set WATCH VARIABLES (or at least, I don't know how!)...

I.e. I have a MovieClip with a variable "Cnt", and I want to be able to check this while I am in a function of this MovieClip. Unfortunately, I can see the variables of the function, but in order to see the "Cnt" variable, I have to open the "this" object and find the "Cnt" variable in there...! Totaly wasted!...

Best Debbuger I had, was in C++ MSVC6. I was setting the watches and could see anything on runtime!... In Flash.. I prefer using "trace()" commands!........

Hope in CS5 they have fix it!...