Debugging in FlashDevelop: Stepping Through Code

This post discusses debugging with breakpoints in FlashDevelop 4 as well as FlashDevelop 3.3.4. My original tutorial covered FlashDevelop 3.3.4 RTM, but it fell out of date with the release of FlashDevelop 4, so I added details to accomodate that release.

Debugging in FlashDevelop 4 (FlashDevelop 4 Beta2)

If you want to debug your ActionScript code in FlashDevelop 4 (FD4) and you’re wondering why your breakpoints won’t catch, you probably just need to impose a simple two-step fix:

1) Install the 32-bit Java Development Kit
2) create a JAVA_HOME environment variable.

I’ll walk you through it, but first, I’m making the following assumptions about your FlashDevelop installation:

— FD4 (I used Beta2 at the time) recognizes your Flex 4 SDK, and you can build/launch Flex 4 applications.
— FlashDevelop properly launches the Flash debug player, and trace statements appear in the output pane.

While experimenting withFlashDevelop 4 Beta2, I was vexed once again by the task of configuring the debugger. At a glance, there several obvious improvements over FD3, but none of my breakpoints were catching, and the steps I used to setup debugging in FD3 were no longer applicable. So I started poking around, and I eventually identified the problem by enabling Verbose Output (FD4 > Tools > Program Settings > FlashDebugger > Verbose Output = True). The Verbose Output setting pushes additional notifications to the FD4 output pane that revealed a sly, behind-the-scenes exception I wasn’t seeing previously. Basically the debugger wanted the JAVA_HOME environment variable, and it couldn’t find it. Googling the exception statement led me here:

http://www.flashdevelop.org/community/viewtopic.php?f=6&t=8435

To fix the problem, I downloaded JDK 7 for Windows (use the 32-bit, x86 variant, even if you have a 64-bit OS), installed it, then created a new environment variable called JAVA_HOME and set it’s value to the JDK install path (C:\Program Files (x86)\Java\jdk1.7.0).

If you’ve never created an environment variable, do this: open the Windows Start menu (lower-left), right-click on “Computer” and select “Properties”. In the new window, select “Advanced system settings” from the choices at left, and when the System Properties dialog opens, select “Environment Variables” at the bottom. The bottom-half of the Environment Variables dialog is devoted to your System variables.. select “New” and for Variable name use JAVA_HOME. For Variable value use C:\Program Files (x86)\Java\jdk1.7.0 (note that your install path may be different). Now Ok/Save your way out of the dialogs and restart Windows.

I was surprised I needed to restart Windows 7 for a new system variable to go into effect, but it was in fact necessary. [EDIT] While restarting Windows is one way to refresh the environment variables, you may find it smoother to kill and reload the explorer.exe process. For more info, see the comment provided by joebain, appearing below. –Thanks joebain.

When Windows reloads, you should be able to set a breakpoint in FlashDevelop 4 and walk through your code using the F10 key. Conveniently, FD4 provides a ready-set-go “Step Into” shortcut (among others—see the Debug menu) that just works once your system environment is properly tweaked.

Thanks to lutfihilfan (see comments) for informing me that my original tutorial discussing debugging in FlashDevelop 3 fell out of date. This has been my most popular blog post, so hopefully these updates will continue to prove useful for Flex developers wanting to use FlashDevelop. —Thanks lutfihilfan.

Debugging in FlashDevelop 3 (FlashDevelop 3.3.4 RTM)

FlashDevelop 3 [I used 3.3.4 RTM] provides some native support for debugging, but walking through your code line-by-line isn’t exposed in the menu options. Moreover, the options that are exposed do not have default keyboard shortcuts. Here’s how you fix that:

1) Open the Tools Menu and select Program Settings
–> This view gives you access to a variety of customizations

2) Select “FlashDebugger” from the categories on the left
–> This is where you configure special keyboard shortcuts

3) Left-click to the right of “Next Shortcut” to set values
–> I ultimately used Ctrl+L

Ok, step 3 proved to be tedious. First I tried good ol’ F6 so I could stay in-sync with Flash Builder. But that doesn’t work. Neither did Ctrl+F6 (which isn’t convenient anyway). In short, I tried several different key combos before I finally found Ctrl+L. Most e left-hand combos I tried already had default functionality, for instance saving the application or trying to open a new file, etc. You may come up with a better combo than Ctrl+L if you poke around–certainly a left-hand combo is better than a right-hand combo, which requires repositioning the mouse hand a lot while debugging. Basically, I’m tired so I settled.

4) If you don’t already have a project lined up to debug, here’s a simple app you can write just to demonstrate the stepping:

<?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">
 
 <fx:Script>
  <![CDATA[
  [Bindable] private var i:int = 0;
  
  private function onClick():void
  {
   do {
    i++;
    trace("now i = " + i.toString());
   } while (i <= 31)
  }
  ]]>
 </fx:Script>
 
 <s:VGroup verticalCenter="0" horizontalCenter="0">
  <s:Button id="button" label="Start Debugging!"
   click="onClick();"/>
  <s:Label id="label" text="New Count: {i}"/>
 </s:VGroup>

</s:Application>

 5) With an app ready to go, set a breakpoint by left-clicking in the gutter, just to the left of the line you want to intercept; in this case I’m at the trace() statement inside the do..Loop at line #14.

In my example, you have to click the Button in the app to trigger the function with the breakpoint, but assuming your app compiled and you launched the Debug version, it should hit your breakpoint as expected. At this point, do your thing and walk through the code using Ctrl+L.

Cheers, Elijah