Using FDT's Debugger

From FDT Documentation

(Difference between revisions)
Jump to: navigation, search
(Source Files)
 
(28 intermediate revisions not shown)
Line 1: Line 1:
 +
[[File:013_046.png|600px|center|FDT's Debugger In Action]]
Powerflasher first introduced a debugger with version 3 of FDT. Since then, many improvements have been made. Now that version 4 also includes a profiler, Flash developers are now more armed than ever to take on buggy applications.
Powerflasher first introduced a debugger with version 3 of FDT. Since then, many improvements have been made. Now that version 4 also includes a profiler, Flash developers are now more armed than ever to take on buggy applications.
-
[[File:Download_arrow.png|30px|]] Visit the [[Downloads]] page to download the source code used in this tutorial!
+
= <center>Source Files</center> =
 +
[[File:Download_soruce_files.png|center|link=https://github.com/TeamFDT/Examples/blob/master/sample-projects/debugging_start.zip?raw=true]]
-
 
+
=<center>Getting Started</center>=
-
=Getting Started=
+
==<center>Check For Debug Version of Flash Player</center>==
-
==Check For Debug Version of Flash Player==
+
Before venturing into using FDT's debugger, you'll need to make sure you have the debug version of the Flash Player installed. There are two easy ways to determine if you're using the debug version:
Before venturing into using FDT's debugger, you'll need to make sure you have the debug version of the Flash Player installed. There are two easy ways to determine if you're using the debug version:
Line 14: Line 15:
If you have the debug version of Flash Player then you're ready to get started, if not you'll need to install it.
If you have the debug version of Flash Player then you're ready to get started, if not you'll need to install it.
-
==Install Debug Version of Flash Player==
+
==<center>Install Debug Version of Flash Player</center>==
If you don't have the debug version of Flash Player, getting it is easy.  Simply go to Adobe's [http://www.adobe.com/support/flashplayer/downloads.html Flash Player Support Center] and choose the appropriate installation for your operating system [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_003.png]].
If you don't have the debug version of Flash Player, getting it is easy.  Simply go to Adobe's [http://www.adobe.com/support/flashplayer/downloads.html Flash Player Support Center] and choose the appropriate installation for your operating system [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_003.png]].
-
==Problems==
+
==<center>Problems</center>==
Sometimes an OS update, a browser particularity or multiple installations of the Flash Player will still cause problems with debugging. If you're still having trouble getting FDT to connect to the Flash Debugger, check out these resources for uninstalling Flash Player, do you can then reinstall the debug version of Flash Player:
Sometimes an OS update, a browser particularity or multiple installations of the Flash Player will still cause problems with debugging. If you're still having trouble getting FDT to connect to the Flash Debugger, check out these resources for uninstalling Flash Player, do you can then reinstall the debug version of Flash Player:
Line 23: Line 24:
*[http://kb2.adobe.com/cps/865/cpsid_86551.html#prob1=uninst,os=m10.6, Uninstall for OSX]
*[http://kb2.adobe.com/cps/865/cpsid_86551.html#prob1=uninst,os=m10.6, Uninstall for OSX]
-
==Import Trace Template==
+
==<center>Import Trace Template</center>==
After you've [[Downloads|Downloaded]] and [[Sharing and Archiving Projects|Imported]] the sample project for this lesson, you'll find a template file that will adjust FDT's default Quicktrace template as well as load in a new ''trace()'' method [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_004.png]]. It's not necessary for this lesson to have these templates installed, but they can be helpful. If your're not sure how to import code templates (snippets), check out [[Creating Code Templates]].
After you've [[Downloads|Downloaded]] and [[Sharing and Archiving Projects|Imported]] the sample project for this lesson, you'll find a template file that will adjust FDT's default Quicktrace template as well as load in a new ''trace()'' method [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_004.png]]. It's not necessary for this lesson to have these templates installed, but they can be helpful. If your're not sure how to import code templates (snippets), check out [[Creating Code Templates]].
-
== Sample Project's Source Code==
+
==<center>Sample Project's Source Code</center>==
Once you have have the project imported, or have you're own setup, let's look at the example code :
Once you have have the project imported, or have you're own setup, let's look at the example code :
Line 156: Line 157:
This project has two classes, ''Main.mxml'' and ''Data.as'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_005.png]]. While this is a Flex project, the same debugging techniques can be used in an ActionScript only project.
This project has two classes, ''Main.mxml'' and ''Data.as'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_005.png]]. While this is a Flex project, the same debugging techniques can be used in an ActionScript only project.
-
=Launching An Application in Debug Mode=
+
=<center>Launching An Application in Debug Mode</center>=
Compiling and connecting to the debugger is simple.  There two quickest ways are:
Compiling and connecting to the debugger is simple.  There two quickest ways are:
Line 179: Line 180:
Then FDT has successfully began the debug session.  If not, recheck that you have the debug version of Flash Player installed and that all other ''Standard'' versions of Flash Player have been uninstalled from your OS.
Then FDT has successfully began the debug session.  If not, recheck that you have the debug version of Flash Player installed and that all other ''Standard'' versions of Flash Player have been uninstalled from your OS.
-
=Using ''Trace()'' to Output Messages=
+
=<center>Using ''Trace()'' to Output Messages</center>=
With the example project compiled and running in debug mode, we can already see the most popular and simplest technique for debugging - the ''trace()'' method. The ''trace'' method is a top level function that all Flash applications have access to. It allows developers to output text messages to whoever is listening.  In this example the console view is listening for these messages.
With the example project compiled and running in debug mode, we can already see the most popular and simplest technique for debugging - the ''trace()'' method. The ''trace'' method is a top level function that all Flash applications have access to. It allows developers to output text messages to whoever is listening.  In this example the console view is listening for these messages.
-
==Trace a String==
+
==<center>Trace a String</center>==
Already the console is picking up on a message via trace:
Already the console is picking up on a message via trace:
Line 200: Line 201:
This type of tracing is the simplest way of sending messages.
This type of tracing is the simplest way of sending messages.
-
==Trace An Object & FDT Quicktrace==
+
==<center>Trace An Object & FDT Quicktrace</center>==
If you use FDT's ''quicktrace'' keystroke (move cursor over an object and press Cmd+0) or the quicktrace methods supplied in the tutorial snippet , you will notice that within the ''trace'' method there is an Object being referenced that is not a string :
If you use FDT's ''quicktrace'' keystroke (move cursor over an object and press Cmd+0) or the quicktrace methods supplied in the tutorial snippet , you will notice that within the ''trace'' method there is an Object being referenced that is not a string :
Line 222: Line 223:
Other times we will see a ''Type'' output or a ''fully qualified name'' of the object being traced. In the case of an XML object, we'll have the entire XML object spit back at us.  WIth the example project, click on the ''Trace Data'' button and the console will show us an XML output [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_013.png]].  
Other times we will see a ''Type'' output or a ''fully qualified name'' of the object being traced. In the case of an XML object, we'll have the entire XML object spit back at us.  WIth the example project, click on the ''Trace Data'' button and the console will show us an XML output [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_013.png]].  
-
=The Debug Perspective=
+
=<center>The Debug Perspective</center>=
While the ''trace'' is very, very handy - it's really just a taste of what the debugger can do. There are numerous ways to switch to the debug perspective. Learn more about perspectives and getting to to FDT's Debug perspectives with the [[Navigating Your Code and FDT's Workspace]] tutorial.   
While the ''trace'' is very, very handy - it's really just a taste of what the debugger can do. There are numerous ways to switch to the debug perspective. Learn more about perspectives and getting to to FDT's Debug perspectives with the [[Navigating Your Code and FDT's Workspace]] tutorial.   
-
==Switch To Debug Perspective==
+
==<center>Switch To Debug Perspective</center>==
For this example, we're going to have FDT automatically switch to the Debug perspective for us when it encounters a runtime error. Initiate an error by clicking on the ''Trigger Run Time Error'' button with our .SWF [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_014.png]]. Immediately an error will occur and  FDT will ask if you want to switch to the Debug Perspective [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_015.png]]. Click ''Yes'' and FDT will then switch to the ''Debug Perspective''.
For this example, we're going to have FDT automatically switch to the Debug perspective for us when it encounters a runtime error. Initiate an error by clicking on the ''Trigger Run Time Error'' button with our .SWF [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_014.png]]. Immediately an error will occur and  FDT will ask if you want to switch to the Debug Perspective [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_015.png]]. Click ''Yes'' and FDT will then switch to the ''Debug Perspective''.
-
[[File:013_016.png|center|200px]]
+
[[File:013_016.png|center|600px]]
-
==Views And Panels==
+
==<center>Views And Panels</center>==
Views and panels can be moved around at will - just like any other perspective. If you ever need to how a view that is hidden, simply go to ''Window>Show View'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_017.png]].  
Views and panels can be moved around at will - just like any other perspective. If you ever need to how a view that is hidden, simply go to ''Window>Show View'' [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_017.png]].  
Line 239: Line 240:
-
==='''Debug'''===
+
===<center>'''Debug'''</center>===
The Debug view is perhaps the most important. It acts like the 'control center' for debugging applications [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_018.png]]. It displays two important things:
The Debug view is perhaps the most important. It acts like the 'control center' for debugging applications [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_018.png]]. It displays two important things:
Line 263: Line 264:
''* Step Into and Step Over can be confusing. The main difference is that when using Step Over, the debugger will just call the method and move to the next line.  If you were using Step Into, the debugger will go inside that method and walk through all the  code there.
''* Step Into and Step Over can be confusing. The main difference is that when using Step Over, the debugger will just call the method and move to the next line.  If you were using Step Into, the debugger will go inside that method and walk through all the  code there.
-
==='''Breakpoints'''===
+
===<center>'''Breakpoints'''</center>===
This view will show you any Breakpoints that have been set in your code.  This application only has one break point set [[File:Img_preview.png | link=File:http://fdt.powerflasher.com/docs/File:013_022.png]].  
This view will show you any Breakpoints that have been set in your code.  This application only has one break point set [[File:Img_preview.png | link=File:http://fdt.powerflasher.com/docs/File:013_022.png]].  
Line 283: Line 284:
-
==='''Variables'''===
+
===<center>'''Variables'''</center>===
-
Depending on what Object you have selected in the stack trace, FDT will analyze the objects within the current scope. It will give you the instance name as well as the value associated with it. You can even change the values of variables while the code is executing.This is a very powerful view [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_021.png]].
+
Depending on what Object you have selected in the stack trace, FDT will analyze the objects within the current scope. It will give you the instance name as well as the value associated with it. You can even change the values of variables while the code is executing.This is a very powerful view
-
=Analyzing Your Application=
+
[[File:013_021.png|400px|center]]
 +
 
 +
=<center>Analyzing Your Application</center>=
We just got done introducing the Debugger and showed what happens when Flash encounters a runtime error. Now lets take some time to use the debugger to analyze our application.
We just got done introducing the Debugger and showed what happens when Flash encounters a runtime error. Now lets take some time to use the debugger to analyze our application.
-
==Setting A Breakpoint==
+
==<center>Setting A Breakpoint</center>==
Return back to the ''Flash FDT Perspective'' and open up the ''Data.as'' class [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_023.png]]. Go to line ''33'' and double click within the margin to set a breakpoint [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_024.png]]. What a breakpoint will do is stop right before it executes the line where the break point is set. Then once again launch your application in debug mode [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_025.png]].
Return back to the ''Flash FDT Perspective'' and open up the ''Data.as'' class [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_023.png]]. Go to line ''33'' and double click within the margin to set a breakpoint [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_024.png]]. What a breakpoint will do is stop right before it executes the line where the break point is set. Then once again launch your application in debug mode [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_025.png]].
When the application runs, click on the ''Trigger Breakpoint in Nested Object'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_026.png]]. When FDT asks you to switch to the Debug perspective, do so.
When the application runs, click on the ''Trigger Breakpoint in Nested Object'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_026.png]]. When FDT asks you to switch to the Debug perspective, do so.
-
[[Image:013_027.png|200px|center]]
+
[[File:013_027.png|600px|center]]
-
==Viewing The Call Stack & Stack Frames==
+
==<center>Viewing The Call Stack & Stack Frames</center>==
Let's take another look at the ''Stack Frames'' - we can now see how we got here.  
Let's take another look at the ''Stack Frames'' - we can now see how we got here.  
-
[[Image:013_028.png|200px|center]]
+
[[Image:013_028.png|600px|center]]
Start stepping back through each frame and notice how the Editor and Variables view are being updated [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_030.png]] & [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_031.png]]. We're in effect stepping backwards through the program.
Start stepping back through each frame and notice how the Editor and Variables view are being updated [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_030.png]] & [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_031.png]]. We're in effect stepping backwards through the program.
Line 305: Line 308:
Now let's go back to the topmost ''Stack Frame'' and begin to expand the Objects within the ''Variables'' view [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_032.png]]. Here we can see the ''_data'' reference and the data it's pointing to - in this case it's XML data.  The output, as a ''toString'' method, is also visible below the object navigator.
Now let's go back to the topmost ''Stack Frame'' and begin to expand the Objects within the ''Variables'' view [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_032.png]]. Here we can see the ''_data'' reference and the data it's pointing to - in this case it's XML data.  The output, as a ''toString'' method, is also visible below the object navigator.
-
==Step Execution==
+
==<center>Step Execution</center>==
Although breakpoints are very handy in that they allow us to pause our application and take a look, breakpoints are even more useful when used in combination with the ''Step Execution'' controls.  
Although breakpoints are very handy in that they allow us to pause our application and take a look, breakpoints are even more useful when used in combination with the ''Step Execution'' controls.  
Line 316: Line 319:
Now let's give ''Step Into'' a try. Without un-pausing or terminating the session, click on the ''Step Into'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_045.png]]. The debugger will now navigate to the definition of the ''run_counter'' method - which is located in the ''Data'' class. Continue pressing ''Step Over'' until you hit line ''41'' , or the line where the ''do_count'' method is declared. Once here go to your ''Variables'' view and let's take a closer look at what we have. Start expanding the variables of this object and take note how you can inspect each variable and it's value.
Now let's give ''Step Into'' a try. Without un-pausing or terminating the session, click on the ''Step Into'' button [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_045.png]]. The debugger will now navigate to the definition of the ''run_counter'' method - which is located in the ''Data'' class. Continue pressing ''Step Over'' until you hit line ''41'' , or the line where the ''do_count'' method is declared. Once here go to your ''Variables'' view and let's take a closer look at what we have. Start expanding the variables of this object and take note how you can inspect each variable and it's value.
-
[[Image:013_046.png|200px|center]]
+
[[Image:013_046.png|600px|center]]
The first line of code is this:
The first line of code is this:
Line 338: Line 341:
...it executes both statements. This is because the debugger will not step through statements, rather it steps through lines of code.
...it executes both statements. This is because the debugger will not step through statements, rather it steps through lines of code.
-
==Changing Variables==
+
==<center>Changing Variables</center>==
Before executing the trace statement, lets change the ''_my_var'' to something else... how about 1,000,000 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_047.png]]! After changing the value of ''_my_var'', press ''Step Into'' again and watch how the trace statement then outputs ''1000000'' to the console.
Before executing the trace statement, lets change the ''_my_var'' to something else... how about 1,000,000 [[File:Img_preview.png | link=http://fdt.powerflasher.com/docs/File:013_047.png]]! After changing the value of ''_my_var'', press ''Step Into'' again and watch how the trace statement then outputs ''1000000'' to the console.
 +
 +
==<center>Using Step Return To Backtrack The Call Stack</center>==
 +
Now that we've tunnelled deep into our application, let's go backwards up the ''Call Stack''. When you begin pressing ''Step Return'' you will begin going backwards through the each stack frame until eventually you return to the top most calling method, which in our case, was that ''Button''. Keep an eye on the call stack in the Debug view to get a better understanding of where you are.
 +
 +
<gallery widths=75px heights=55px perrow=5 caption="Using Step Return">
 +
File:013_048.png
 +
File:013_049.png
 +
File:013_050.png
 +
File:013_051.png
 +
File:013_052.png
 +
</gallery>
 +
 +
=<center>FAQ</center>=
 +
 +
Q: Why doesn't FDT either switch perspectives or ask me to switch perspectives?
 +
 +
A: Check out the FAQ: [[FAQ#When_I_Debug_or_Profile_My_Application.2C_The_Perspective_Doesn.27t_Change]]
 +
=<center>Wrap Up</center>=
 +
There's a lot that can be achieved using the debugger, take the time to play with it and see just how much you can do using it.

Latest revision as of 12:13, 2 June 2012

FDT's Debugger In Action

Powerflasher first introduced a debugger with version 3 of FDT. Since then, many improvements have been made. Now that version 4 also includes a profiler, Flash developers are now more armed than ever to take on buggy applications.


Contents

Source Files

Download soruce files.png

Getting Started

Check For Debug Version of Flash Player

Before venturing into using FDT's debugger, you'll need to make sure you have the debug version of the Flash Player installed. There are two easy ways to determine if you're using the debug version:

  1. Go to Adobe's detection website Img preview.png.
  2. Confirm that your stand alone Flash Player (located on your hard drive) is the debug player Img preview.png.

If you have the debug version of Flash Player then you're ready to get started, if not you'll need to install it.

Install Debug Version of Flash Player

If you don't have the debug version of Flash Player, getting it is easy. Simply go to Adobe's Flash Player Support Center and choose the appropriate installation for your operating system Img preview.png.

Problems

Sometimes an OS update, a browser particularity or multiple installations of the Flash Player will still cause problems with debugging. If you're still having trouble getting FDT to connect to the Flash Debugger, check out these resources for uninstalling Flash Player, do you can then reinstall the debug version of Flash Player:

Import Trace Template

After you've Downloaded and Imported the sample project for this lesson, you'll find a template file that will adjust FDT's default Quicktrace template as well as load in a new trace() method Img preview.png. It's not necessary for this lesson to have these templates installed, but they can be helpful. If your're not sure how to import code templates (snippets), check out Creating Code Templates.

Sample Project's Source Code

Once you have have the project imported, or have you're own setup, let's look at the example code :

Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx" 
	creationComplete="trace_complete(event)">
 
	<fx:Script>
		<![CDATA[
		import flash.display.Sprite;
		import flash.events.MouseEvent;
 
		import mx.events.FlexEvent;
 
		private var null_object : Sprite = null;
		private var xml_data : Data = new Data();
 
		private function trace_complete(event : FlexEvent) : void {
     		trace('My App Is Ready');
		}
 
		private function trace_event(event : MouseEvent) : void {
     		trace(this, ' @ trace_click', ' :: event = ', (event));
		}
 
		private function trace_data(event : MouseEvent) : void {
			trace(this, ' @ trace_click', ' :: event = ', (xml_data.data));
		}
 
		private function trigger_runtime_error(event : MouseEvent) : void {
			null_object.height = 10;
		}
 
		private function trigger_breakpoint_nested(event : MouseEvent) : void {
			xml_data.trigger_breakpoint();
		}
 
		private function step_through_code(event : MouseEvent) : void {
		        xml_data.run_counter();
			xml_data.run_counter();		
                }
		]]>
	</fx:Script>
	<s:Group verticalCenter="0" horizontalCenter="0">
		<s:layout>
			<s:VerticalLayout horizontalAlign="center">
			</s:VerticalLayout>
		</s:layout>
 
	<s:Button id="trace_btn" label="Trace Event" 
				click="trace_event(event)"/>
	<s:Button id="trace_data_btn" label="Trace Data" 
				click="trace_data(event)"/>
	<s:Button id="error_btn" label="Trigger Run Time Error" 
				click="trigger_runtime_error(event)"/>
	<s:Button id="breakpoint_btn_2" label="Trigger Breakpoint In Nested Object"
				click="trigger_breakpoint_nested(event)"/>
	<s:Button id="breakpoint_btn" label="Step Through Code"
				click="step_through_code(event)"/>
	</s:Group>
</s:Application>


Data.as

package demo.debug{
 
	public class Data {
		private var _data : XML = <books>
  <book>
    <title>ActionScript Cookbook</title>
    <authors>
      <author name="Joey Lott" />
    </authors>
  </book>
  <book>
    <title>Flash Cookbook</title>
    <authors>
      <author name="Joey Lott" />
      <author name="Jeffrey Bardzell" />
    </authors>
  </book>
  <book>
    <title>Flash Remoting: The Definitive Guide</title>
    <authors>
      <author name="Tom Muck" />
    </authors>
  </book>
  <book>
    <title>ActionScript for Flash MX: The Definitive Guide</title>
    <authors>
      <author name="Colin Moock" />
    </authors>
  </book>
</books>;
		private var _my_var : int;
		public var array_of_data : Array = [1, null, '1', "one"];
 
		public function trigger_breakpoint() : void {
			trace(this, ' @ trigger_breakpoint', ' :: _data = ' , (_data));
		}
 
		public function run_counter() : void {
			do_count();
		}
 
		private function do_count() : void {
			_my_var = 0;
			_my_var++;
			_my_var++;_my_var++;
			_my_var++;
			trace(this, ' @ do_count', ' :: _my_var = ', (_my_var));
		}
 
		public function get data() : XML {
			return _data;
		}
	}
}


This project has two classes, Main.mxml and Data.as Img preview.png. While this is a Flex project, the same debugging techniques can be used in an ActionScript only project.

Launching An Application in Debug Mode

Compiling and connecting to the debugger is simple. There two quickest ways are:


  1. Just right click on your Main class either in the Flash Explorer or within the Editor and choose Debug As>FDT SWF Application Img preview.png.
  2. From the Debug Menu choose a launch configuration to run in Debug mode Img preview.png.


If you're following along with the example files, once you launch your .SWF, you'll see the External SWF Viewer appear with a few buttons on the stage Img preview.png. We'll get to what the buttons do in a little bit. For now, move the External SWF Viewer to the side and take note of the console on the bottom of the screen Img preview.png.

*If the console view isn't visible go to: Window>Show View>Console to reveal it Img preview.png.

If the console reads:

Using Flex SDK 4 Debugger Adapter.
[Info] Connection to player established.
[Loading] Loaded: ::Users:OSX:_dev:fdt:Debugging_Start:bin:Main.swf


Then FDT has successfully began the debug session. If not, recheck that you have the debug version of Flash Player installed and that all other Standard versions of Flash Player have been uninstalled from your OS.

Using Trace() to Output Messages

With the example project compiled and running in debug mode, we can already see the most popular and simplest technique for debugging - the trace() method. The trace method is a top level function that all Flash applications have access to. It allows developers to output text messages to whoever is listening. In this example the console view is listening for these messages.

Trace a String

Already the console is picking up on a message via trace:

My App Is Ready


This is a message that is being sent from a trace() statement within FDT. In our example it's coming from the trace_complete method:

private function trace_complete(event : FlexEvent) : void {
     trace('My App Is Ready');}

This type of tracing is the simplest way of sending messages.

Trace An Object & FDT Quicktrace

If you use FDT's quicktrace keystroke (move cursor over an object and press Cmd+0) or the quicktrace methods supplied in the tutorial snippet , you will notice that within the trace method there is an Object being referenced that is not a string :

private function trace_event(event : MouseEvent) : void {
     trace(this, ' @ trace_click', ' :: event = ', (event));}


In this example the event object is being sent out to the console. To see the output, click on the Trace Event button within our application Img preview.png. When this happens, another message will be sent to the console Img preview.png. This time the message is different. When this happens the console will output additional information about that object. In the case of event, we get this type of output:

Main0  @ trace_click  :: event =  [MouseEvent type="click" bubbles=true 
cancelable=false eventPhase=2 localX=81 localY=18 stageX=314 
stageY=154 relatedObject=null ctrlKey=false altKey=false 
shiftKey=false buttonDown=false delta=0]


Other times we will see a Type output or a fully qualified name of the object being traced. In the case of an XML object, we'll have the entire XML object spit back at us. WIth the example project, click on the Trace Data button and the console will show us an XML output Img preview.png.

The Debug Perspective

While the trace is very, very handy - it's really just a taste of what the debugger can do. There are numerous ways to switch to the debug perspective. Learn more about perspectives and getting to to FDT's Debug perspectives with the Navigating Your Code and FDT's Workspace tutorial.

Switch To Debug Perspective

For this example, we're going to have FDT automatically switch to the Debug perspective for us when it encounters a runtime error. Initiate an error by clicking on the Trigger Run Time Error button with our .SWF Img preview.png. Immediately an error will occur and FDT will ask if you want to switch to the Debug Perspective Img preview.png. Click Yes and FDT will then switch to the Debug Perspective.

013 016.png

Views And Panels

Views and panels can be moved around at will - just like any other perspective. If you ever need to how a view that is hidden, simply go to Window>Show View Img preview.png.

For this tutorial we'll just focus on 3 views:

  • Debug
  • Breakpoints
  • Variables


Debug

The Debug view is perhaps the most important. It acts like the 'control center' for debugging applications Img preview.png. It displays two important things:

  1. The current thread.
  2. The Call Stack of the current thread that contains Stack Frames.

Ok, so the current thread information isn't terribly relevant because Flash is single threaded - but inside that thread we have the Call Stack

The Call Stack is where you find out where the error occurred and how you got there Img preview.png. The stack frames are displayed in order from (going from to bottom) most recent frame to first frame. If you click on a stack frame, the Variables and Editor view will update with information about the Object and variables are that are present in the frame: Img preview.png & Img preview.png.

This view has a few controls as well:

Resume.png The Resume will resume the execution of the .SWF (if it was stopped via a breakpoint), this will continue until it hits the next breakpoint.

Terminate.png Terminate will stop the debugging session. The button here in the Debug panel/view is the same as the Terminate button within the Console view.

Step controls.png The Step Controls allow you to walk through the program as it executes.

  • Step Into Executes the current line. If the line is a call to a method or constructor, and there is source available for the called code, the program counter moves to the declaration of the method or constructor. Otherwise, the program counter moves to the next line in the file.
  • Step Over Executes the current line and moves the program counter to the next line of the file. If the executed line is a call to a method or constructor, the code in the method or constructor is also executed.
  • Step out of/Return Executes the rest of the code in the current method or constructor and moves the program counter to the line after the caller of the method or constructor. This command is useful if you have stepped into a method that you do not need to analyze.

* Step Into and Step Over can be confusing. The main difference is that when using Step Over, the debugger will just call the method and move to the next line. If you were using Step Into, the debugger will go inside that method and walk through all the code there.

Breakpoints

This view will show you any Breakpoints that have been set in your code. This application only has one break point set Img preview.png.

When setting breakpoints it's important not to put multiple statements on a single line because you can't step over or set breakpoints on more than one statement on the same line. So:

		private function do_count() : void {
			_my_var = 0;
			_my_var++;
			_my_var++;_my_var++;			_my_var++;
			trace(this, ' @ do_count', ' :: _my_var = ', (_my_var));
		}


In the highlighted line above, the debugger will not have any way to pause between the two statements.


Variables

Depending on what Object you have selected in the stack trace, FDT will analyze the objects within the current scope. It will give you the instance name as well as the value associated with it. You can even change the values of variables while the code is executing.This is a very powerful view

013 021.png

Analyzing Your Application

We just got done introducing the Debugger and showed what happens when Flash encounters a runtime error. Now lets take some time to use the debugger to analyze our application.

Setting A Breakpoint

Return back to the Flash FDT Perspective and open up the Data.as class Img preview.png. Go to line 33 and double click within the margin to set a breakpoint Img preview.png. What a breakpoint will do is stop right before it executes the line where the break point is set. Then once again launch your application in debug mode Img preview.png.

When the application runs, click on the Trigger Breakpoint in Nested Object button Img preview.png. When FDT asks you to switch to the Debug perspective, do so.

013 027.png

Viewing The Call Stack & Stack Frames

Let's take another look at the Stack Frames - we can now see how we got here.

013 028.png

Start stepping back through each frame and notice how the Editor and Variables view are being updated Img preview.png & Img preview.png. We're in effect stepping backwards through the program.

Now let's go back to the topmost Stack Frame and begin to expand the Objects within the Variables view Img preview.png. Here we can see the _data reference and the data it's pointing to - in this case it's XML data. The output, as a toString method, is also visible below the object navigator.

Step Execution

Although breakpoints are very handy in that they allow us to pause our application and take a look, breakpoints are even more useful when used in combination with the Step Execution controls.

If your still in a debugging session, terminate it now. Now add a breakpoint to line 36 of the example project Img preview.png and debug it again. This time, click on the Step Through Code button Img preview.png.

Once back in the Debug Perspective, click on Step Return Img preview.png and you'll see FDT automatically execute the rest of the method (check out the console to see additional trace statements added) and return to the Button component - the place where the step_through_code method was called [1].

Instead of exiting out of the debug session, let's just resume it by clicking on the Resume button Img preview.png. The debugger will un-pause the application, but still stay connected. Once again, let's trigger another breakpoint by clicking, again, clicking on the Step Through Code button Img preview.png. This time, click on the Step Over button Img preview.png and notice how FDT will execute the next line of code, the method run_counter, and then pause before it runs the next line. We can tell that the run_counter method was executed because an additional trace was added to the Console Img preview.png.

Now let's give Step Into a try. Without un-pausing or terminating the session, click on the Step Into button Img preview.png. The debugger will now navigate to the definition of the run_counter method - which is located in the Data class. Continue pressing Step Over until you hit line 41 , or the line where the do_count method is declared. Once here go to your Variables view and let's take a closer look at what we have. Start expanding the variables of this object and take note how you can inspect each variable and it's value.

013 046.png

The first line of code is this:

_my_var = 0;

In the Variables view we can see that the current value of _my_var is 4. Once more, press Step Into to have FDT move to that first line of code, but notice how the assignment hasn't taken place - _my_var still has the value 4. Now, keep an eye on _my_var and continue to Step Into. You'll notice that _my_var is reset to 0 and then incremented by one. As you're stepping though this, notice how when the debugger hits this line:

		private function do_count() : void {
			_my_var = 0;
			_my_var++;
			_my_var++;_my_var++;			_my_var++;
			trace(this, ' @ do_count', ' :: _my_var = ', (_my_var));
		}

...it executes both statements. This is because the debugger will not step through statements, rather it steps through lines of code.

Changing Variables

Before executing the trace statement, lets change the _my_var to something else... how about 1,000,000 Img preview.png! After changing the value of _my_var, press Step Into again and watch how the trace statement then outputs 1000000 to the console.

Using Step Return To Backtrack The Call Stack

Now that we've tunnelled deep into our application, let's go backwards up the Call Stack. When you begin pressing Step Return you will begin going backwards through the each stack frame until eventually you return to the top most calling method, which in our case, was that Button. Keep an eye on the call stack in the Debug view to get a better understanding of where you are.

FAQ

Q: Why doesn't FDT either switch perspectives or ask me to switch perspectives?

A: Check out the FAQ: FAQ#When_I_Debug_or_Profile_My_Application.2C_The_Perspective_Doesn.27t_Change

Wrap Up

There's a lot that can be achieved using the debugger, take the time to play with it and see just how much you can do using it.

Get FDT5