Many Flash developers use either the Alert class for debugging, or trace statements due to associations with Flash. Flex does have a true debugger and it’s a great tool. I’m going to demonstrate how to get to grips with it in this tutorial.

Introduction

Compiler errors are easy to spot and fix. You’re given a red dot with a X in it, telling you where and what the problem is.

Runtime errors are harder to trace. Debugger helps developers by tracing runtime errors, giving a window to see what’s going on while the application is running, what values are set to, what happens inside a loop, or why the if statement isn’t working.

OK, let’s get started – but before we begin, here are some tools you’ll need:

The Debug Version of Flash Player

Download this here. During this tutorial I’m using “the Macintosh Flash Player 10 Plugin content debugger (Intel-based Macs) (ZIP, 6.03 MB)”. To test which version of flash player you’ve installed, take a look at this handy tool by Peter deHaan, who incidentally has a great blog ;)

View Full Size

Adobe Flex Builder 3

Of course, you’ll need this. If you don’t have it you can always get a free copy:

• Free to all education customers: https://freeriatools.adobe.com/Flex/
• Free to unemployed developers: https://freeriatools.adobe.com/learnFlex/

Other Useful Goodies

Samples with code

• http://examples.adobe.com/Flex3/componentexplorer/explorer.html
• http://examples.adobe.com/Flex3/consulting/styleexplorer/Flex3StyleExplorer.html

Adobe® Flex™ 3.3 Language Reference

• http://livedocs.adobe.com/Flex/3/langref/
• http://livedocs.adobe.com/Flex/3/html/index.html

Notes

The screen captures in this tut are made on Mac, but should be ± the same on PC. My window perspective maybe different from what you see, but you can find all the tabs under the window menu.

IF you’re ready, let’s get started!

Step 1: Setup Break Points

I’ve created a new Flex project; very simple, one panel with two buttons in it. Each button will call its click function; b1_click() will run a loop, call update_Label() function. b2_click() will create a runtime error, since there is no such thing as n_error value.

/>View Full Size

What is a breakpoint? A breakpoint is set on an executable line of a program. If the breakpoint is enabled when you debug, the execution suspends before that line of code executes. In order to suspend the application while it is running, you need set a breakpoint. It’s easy to do; double-click on the empty space next to the line number. Double-click on it again to remove.

I set two breakpoints; lines 10 and 20 (two blue dots show up in the margin). If I click on button1, it will stop on line 10, click on button2 it will stop on line 20.

You can see all your breakpoints in the “Breakpoints” tab and they can be added or removed any time you wish. Additionally, you can use the check boxes to temporarily enable/disable them.

If you want to watch how the num is changed over time, highlight the value, right-click, Select “Watch ‘num’ ”.

“num” is now added to the Expressions tab.

/>View Full Size

Step 2: Start Debug Mode and Check Some Values

Now we have everything setup, let’s start the debug section. Click on the icon which looks like a bug

/>View Full Size

or select it from the menu:

/>View Full Size

Step 3: App Started

As the app starts running, you can see it in the browser but nothing happens, what to do next? The break point is set inside the function, so we need exectue the function.

/>View Full Size

Step 4: Trigger the Breakpoint

To trigger the breakpoint, click on “Button 1” to call the b1_click() function. The app then stops at line 10 and num is still 0 since the code “num += 1;” hasn’t executed yet. Look at the Debug tab; some icons light up and some values are now visible.

/>View Full Size

Step 5: Variables Tab

First let’s take a look the Variables tab; a few things to note:

• This: includes all the values in the application
• Event: current event passed in
• i: value defined in this function

/>View Full Size

Open up “this”, a long list will show up. The list will keep getting longer and longer then you’ll notice your computer slowing down ;)

Step 6: Create Watch Expression

Since I know I want to focus on “button2.label”, let’s find it and right-click to select “Create Watch Expression”.

Step 7: Expression Tab

Now take a look the Expressions tab, simple and clean, just the way I like it. Two variables we are looking at now, “num” we created earlier, and “this.button2.label”.

Step 8: Using the Step Controls

Now let’s take a look at the debug tab. In this tab, you’ll see that some icons are now enabled, a list of function names, and component names. The screenshot below shows that we’re currently in the myLoop function and that the component “button2” performed an action “click” to call this function.

/>View Full Size

Step 9: Learning the Step Controller

Those icons we noticed (you can find them under menu > run too), what are they for?

/>View Full Size

When a thread is suspended, the step controls can be used to step through the execution of the program line-by-line.

Often, you can also use shortcuts – memorize them!

• Resume – F8 key (not for Mac user) continue run application.
• Terminate – stop debug mode, application will keep running, but you can’t trace anymore.
• Step Over – F6 key, go to next line of code.
• Step Into – F5 key, if current line of code is calling other function, look into that function.
• Step Return – F7 key, get out of that function.

F6 and F8 will be your best friends, remember them!

Step 10: Using the F6 Key

Let’s press F6 a few times. Keep your eye on the Expression tab, see what the value is changing to.

/>View Full Size

Step 11: Value Changing

Keep pressing F6! The value of num is changing in the Expressions tab.

/>View Full Size

Step 12: Using the F5 Key

If your loop never ends, ends early, or never even begins, you can look into the action closely to see what’s happening. Once we’ve finished the loop, the second function update_Label() is called. Pressing F6 will step over it, but we want to see what happens within the update_Label(). Press F5 “step into”.

/>View Full Size

Now we’re in the update_Label() function.

/>View Full Size

Step 13: Using the F7 Key

You can press F7 to go back to myLoop(). The value of the “this.button2.label” has been changed.

/>View Full Size

Step 14 Using the F8 Key

Let’s press F8 to resume the app. Now the button2’s label has been updated.

/>View Full Size

Step 15: Read the Error Messages in Debug Session

OK, now let’s test the bug in the app. We know there’s a bug in the b2_click() function, so let’s see it in action. Click on “Button 2”, this will call the b2_click() function, and the app will stop at the error.

/>View Full Size

Step 16: Debug Tab

Take a close look at the Debug tab. In here it tells you what the error is, and who is calling.

/>View Full Size

Step 17: Console Tab

Here’s what is displayed in the Console tab. It gives you more information about the error and line number where the error occurred.

/>View Full Size

Step 18: Change Values of Variables

You can always change the value of variables while the application is suspended. For example, if I want to change button2.label from “num = 10” to “new label” I do the following: first find the variable “label”, right-click , select Change Value.

Step 19: Set Value Popup Window

The Set Value window pops up and displays the current value.

Step 20: Enter New Value

I’m going to change that string to “new label”, then press OK.

Step 21: Update New Value

Now in the Variables tab, the new value is set.

Step 22: Resume App

Resume the application, you’ll see the label has been updated.

/>View Full Size

Conclusion

Alright, now you know how to use the debugger! Here’s a quick summary:

• Double-click Create a breakpoint.
• Click on the bug icon to start debug mode.
• Trigger the action to suspend the application.
• Variables tab tells you what the value is.
• Console tab tells you what and where the error is (if any).
• Debug tab tells you who called who and who did wha.t
• Then waits for you to tell it what action to take.

If you think you’re ready to test your debug skills now, go try them on your own application!

One last tip for those new to Flex: remember to always export a release build, not the debug build which is much bigger. I hope you enjoyed reading along!