This Cyber Monday Envato Tuts+ courses will be reduced to just $3. Don't miss out.
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.
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 ;)
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
Adobe® Flex™ 3.3 Language Reference
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.
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.
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
or select it from the menu:
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.
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.
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
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.
Step 9: Learning the Step Controller
Those icons we noticed (you can find them under menu > run too), what are they for?
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.
Step 11: Value Changing
Keep pressing F6! The value of num is changing in the Expressions tab.
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".
Now we're in the update_Label() function.
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.
Step 14 Using the F8 Key
Let’s press F8 to resume the app. Now the button2’s label has been updated.
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.
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.
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.
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.
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!