Learning Flex 4 | O'Reilly Media

Debugging in FlashDevelop: Stepping Through Code

with 7 comments

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

About these ads

Written by elrobis

19 June 2011 at 12:07 am

7 Responses

Subscribe to comments with RSS.

  1. Hi elrobis,
    I tried to follow the steps you explained but when i got to step 3, my flashdevelop only has a Misc folder and no other, including a shortcut folder. I still don’t understand why it’s like that, do you have any ideas?

    lutfihilfan

    25 August 2011 at 8:21 pm

    • @lutfihilfan —

      It seems my tutorial is out-of-date for FlashDevelop 4.0. Last night I installed the latest version (FlashDevelop 4.0 Beta2) on a clean Windows 7 laptop from work, and sure enough, only the ‘Misc’ options are available under the FlashDebugger category.

      There are a handful of steps to get a working, debuggable FlashDevelop setup, and I don’t yet have my 4.0 install hopping. I think I need to uninstall the version of FlashPlayer that came with this Windows 7 system, then install a debug version of FlashPlayer before it’ll work. Assuming FlashDevelop is calling a debug player when you build/launch (you should confirm that), check under Tools > Keyboard Shortcuts. Unfortunately, I don’t see what I expected to—“DebugMenu.Next Shortcut”. But I do see “DebugMenu.StepInto”, which is preset to F11.

      If FlashDevelop is launching the debug player when you build > run, I have a hunch F11 and F10 can be used to walk through your code. When you get it working, please return and note your steps for the rest of us. :)

      (Alternatively, you could uninstall 4.0, return to the FlashDevelop site and install 3.3.4 RTM, then my tutorial will apply as-is. Though, I’ll agree in advance that isn’t a very forward-leaning attitude.)

      Best, Elijah

      elrobis

      26 August 2011 at 10:24 am

    • @lutfihilfan, I finally cracked the nut and updated this post so that it’ll continue to be relevant for FlashDevelop 4. Please take a look at my revisions (the top-half of the post) and let me know if this provided a solution to your problem.

      Best, Elijah

      elrobis

      26 August 2011 at 3:42 pm

  2. Good tip, thanks.

    I managed to get FD to see the new environment variable without restarting windows too. I restarted FD and windows explorer (aka the Start Menu, desktop and file browser) and it worked fine. To restart windows explorer use the task manager (Ctrl-Alt-Del->Start Task Manager). Kill any “explorer.exe” processes, then, still in task manager, restart explorer by going File->New Task and typing “explorer.exe”. I’m on Windows 7 but I think it would work on other versions, FD picks up its environment variables from explorer and explorer only refreshes it’s variables when it starts (I think).

    joebain

    17 September 2011 at 3:52 pm

    • Hi Joe, thanks for adding your insight. Stopping and restarting explorer makes sense as a means of reloading the environment vars. I’ll have to remember that. I’m glad you found the post helpful. /E

      elrobis

      17 September 2011 at 7:01 pm

  3. nice and very helpful article! Thank u, helps me getting a fully-debbugable FlashDevelop Version to run!

    zapata

    20 January 2012 at 8:28 am

  4. That did it! Thanks

    Anonymous

    21 March 2012 at 2:48 pm


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: