[Tutorial] Debugging AS3 from the browser using FDT

If you’re an Actionscript programmer, you should probably at least know of FDT. If you don’t, travel over to their site, and download a copy of the software (free trial for 30 days). I’m assuming in this post you already have it installed, and you know how to compile files, and maybe even know how write your own ANT scripts.Watch Full Movie Online Streaming Online and Download

One of the nicest features of FDT is its debugger, it is full of features you would never find in the IDE’s (CS3/4/5), and if you’re used to debugging in Eclipse it follows that same route.

Quite often I’ll be brought onto a project in the middle of its development cycle, so I don’t have an option on how it’s setup. Quite often in Flash, I end up dealing with a bunch of FLA files and I’m forced to use the IDE for compiling. Same thing with Flex, but luckily FDT can run MXML, so that’s not much of an issue, it might just take a little extra time to setup your Flex project in FDT. What I’m trying to say here is don’t worry how you’re getting your original project (Flash, Flex, in case of a miracle its already FDT), with a little bit of configuration time, you can get just about any Actionscript project to run in FDT.

So How DO I debug in the Browser using FDT?

Regardless of your project you have to do the following to Eclipse:

  1. Goto Eclipse Preferences
  2. General -> Web Browser
  3. Click on RadioBox “Use External Web Browser”
  4. Pick your browser of choice… that has the Flash Debug Player installed (Firefox for me)
    1. If you need to install the debug player: Flash Download Center and scroll down to “Adobe Flash Player 10 — Debugger Versions…” and pick the appropriate one for your environment.

Now Eclipse and FDT are ready for some remote debugging.

Now there are a few different cases you will probably end up doing a remote debug with. Sometimes you might be running a local html file, and sometimes you will be accessing a local running server. Both of these cases apply regardless of whether you are doing Flash (IDE) or a Flex project, or even if you don’t have either and all you have is a running swf that has debugging enabled.
*important note, if you’re not compiling with FDT, you have to make sure whatever swf you intend to target was compiled with a -debug flag. In the Flash IDE you can find this in the Profile settings of the FLA. Under Flex you have to add it to the compiler arguments.

(case: Flash IDE compilation)
Now you have a project setup in FDT, and you’re running the IDE to get your swf published. In FDT:

  1. Create a new Class:
    1. name: DebugInBrowser
    2. package: doesn’t matter
    3. extends: flash.display.Sprite
  2. You can leave it empty.
  3. Click the little ARROR NEXT TO THE BUG – > Debug Configurations…debug icon

  4. Once you create a new debug configuration under FDT AS3 Application, you can leaver pretty much everything the same, except for the start tab, change it to reflect the following… edit to match your project:

    Debug in Browser Configuration

    Change for your setup.
  5. That’s it. In case you want to target localhost, just change the “Open URI after compilation” to = http://localhost/mysite/index.html or somespecialpage.php or .asp or .py or .jsp it doesn’t matter as long as you know the swf you want to debug is there, and it has debugging enabled.

Comments

  1. Lots of excellent reading here, thank you! I was browsing on yahoo when I observed your article, I’m going to add your feed to Google Reader, I look forward to additional from you.