From FDT Documentation

Revision as of 18:53, 30 September 2010

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.

Visit the Downloads page to download the source code used in this tutorial!

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 .
2. Confirm that your stand alone Flash Player (located on your hard drive) is the debug player .

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 .

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:

• Uninstall Flash Player | Windows
• Uninstall for OSX

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 . 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 trigger_breakpoint_main(event : MouseEvent) : void {
			trace(this, ' @ trigger_breakpoint', ' :: event = ', (event));
		}
		]]>
	</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="Trigger Breakpoint In Main"
				click="trigger_breakpoint_main(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>;
 
		public function trigger_breakpoint() : void {
			trace(this, ' @ trigger_breakpoint', ' :: _data = ' , (_data));
		}
 
		public function get data() : XML {
			return _data;
		}
	}
}

This project has two classes, Main.mxml and Data.as . 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. Just right click on your Main class either in the Flash Explorer or within the Editor and choose Debug As>FDT SWF Application .

If you're following along with the example files, you'll see the External SWF Viewer appear with a few buttons on the stage . 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 .

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

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 on your OS.