Updated: October 19th, 2010

Debugging ActionScript and JavaScript simultaneously with Flash Builder 4 and Aptana Studio.

iconOctober 19th, 2010

Flash or Flex applications commonly interact with JavaScript to enable browser specific functionality. Debugging a single application’s ActionScript and JavaScript is often done within different debugging environments. Different environments often make it difficult to setup and run simultaneous debug sessions for the AVM and JavaScript VM. This post shows how to debug an application’s ActionScript and JavaScript simultaneously within Flash Builder using Aptana’s JavaScript debugger. Post details will include where to get and install Aptana Studio, how to configure a Flex project for JavaScript debugging, and steps for launching a simultaneous ActionScript/JavaScript debugging session.

As ActionScript developers spend a large amount of time within Flash Builder, a JavaScript debugging solution that has similar features, user interface, and workflow is an ideal solution. Aptana Studio is a great web development environment that is built on the same Eclipse base that Flash Builder uses. Because of the common base debugging JavaScript with Aptana’s debugger is nearly identical to debugging ActionScript with Flash Builder’s debugger. To follow the steps in this post, Flash Builder must have Aptana Studio installed as an Eclipse plug-in. Aptana Studio can be found on Aptana’s download page. The Eclipse Plug-In Version should be installed. Steps to install the version will appear after clicking the “Download Aptana Studio 2″ link on the download page.

Before going into the steps to set up a simultaneous debugging session, a few details should be mentioned.

  • Aptana Studio 2.0.5 is the installed version of Aptana referenced in this post.
  • Debugging is done on a page served from a web server on localhost. The technique described here should also work when debugging pages read directly from the file system.
  • A simple Flex project created by the new Flex project wizard is used as the SampleProject illustrated in the screenshots.

Simultaneous ActionScript/JavaScript debugging can be broken down into the following steps.

  1. Flash debugger configuration. To configure the ActionScript debugger select Run > Debug > Other… from the menu bar. Under the Web Application icon select the Flash project that requires simultaneous debugging. In the URL or path to launch field, ensure the Use default check box is deselected and enter “/” into the field. This ensures that the Flash debugger won’t automatically launch the Flash instance when a Flash debugging session is initialized. This is opposite to the normal technique of Flash debugging, but becomes important later on and is key to the technique described here.

    Flash debugger configurationFlash debugger configuration within Flash Builder.

  2. JavaScript debugger configuration. To configure the JavaScript debugger select Run > Debug > Other… from the menu bar. Under the Web Browser icon select the Firefox – Internal Server configuration. Under the Start Action section ensure the Specific page radio button is selected and the value of the Specific page field contains a relative path to the application entry point. The root of the path should be based on the root of the project being debugged. Under the Server section ensure the Use base URL radio button is selected and the value of the Use base URL field is an absolute path to the folder on the web server that is hosting the project files.

    JavaScript debugger configurationJavaScript debugger configuration from Aptana Studio.

  3. Launch Flash debug session. Open the Debug Configurations panel of Flash Builder, select the debug configuration specified in step 1, and press the Debug button. As there is a nonexistent path to launch specified in step 1, the debugger will wait until a Flash instance has been started before creating a connection to the debugger. There is a time out set by Flash Builder that closes the Flash debug session if a Flash instance isn’t started quickly enough. This is important information for the next step.

  4. Launch JavaScript debug session. In the Debug Configurations panel, select the debug configuration specified in step 2, and press the Debug button. The time out mentioned in the previous step is important. Launching the JavaScript debug session also initializes the Flash instance that connects to the Flash debugger that was started in step 3. Time spent launching the JavaScript debug session, or time spent inspecting JavaScript breakpoints before the Flash instance is started should be minimized to avoid triggering the Flash debugger time out.

    JavaScript debugging sessionJavaScript debugging session with simultaneous ActionScript debugging session running.

  5. Success! Successful completion of steps 1 through 4 should yield a simultaneous ActionScript/JavaScript debugging session. Clicking on the [Web Application] and [Web Browser] threads will determine the log visible in the console panel. Variables are specific to the breakpoint that is activated. If an ActionScript breakpoint is set, the variables are specific to the AVM. JavaScript breakpoints list JavaScript variables in the variable panel. Breakpoints for both ActionScript and JavaScript files are listed in the breakpoints panel. Closing the browser window will terminate both the ActionScript and JavaScript debugging sessions.

    ActionScript breakpointActionScript breakpoint with stack trace and variable list.

    JavaScript breakpointJavaScript breakpoint with stack trace and variable list.

  6. Troubleshooting. Due to the number of steps, it can be difficult to setup a simultaneous AVM and JavaScript VM debugging session. It’s good practice to test both ActionScript and JavaScript debugging sessions on their own to ensure they work individually before attempting to run them simultaneously. The time sensitivity of step 4 can cause problems. If the Flash debugger time out has been triggered, restart at step 2. Finally, the Aptana debugger often won’t connect if Firefox is already open when launching a new debug session. For this reason it’s smart to quit Firefox completely before starting a new debugging session.

    Debug session terminatedBoth ActionScript and JavaScript debug sessions terminate after the browser window is closed.

3 Responses to “Debugging ActionScript and JavaScript simultaneously with Flash Builder 4 and Aptana Studio.”

  1. [...] This post was mentioned on Twitter by reda makhchan, Eric Snowden, karannnnnnnnnnn3, fmchicago, FMC Washington DC and others. FMC Washington DC said: Debugging ActionScript and JavaScript simultaneously with Flash Builder 4 and Aptana Studio.: Flash or Flex applic… http://bit.ly/ddclmb [...]

  2. Nice!

    One more thing: It also works with Internet Explorer. Even better in my case since Firefox often crashes when opening the debug session.

  3. Glad to hear it works with IE, I haven’t had a chance to try yet. Aptana supports IE debugging in addition to Firefox debugging, so it’s good to know the technique works with both browsers. Thanks for the confirmation!

Leave a Reply

The Author

Johannes Tacskovics
ECMAScript Developer

Portrait of Johannes Tacskovics

On front-end software engineering this is the blog of Johannes Tacskovics, a Los Angeles based ECMAScript Developer. This blog is focused on object oriented software development for the web.

Article Categories

Article Archives

Meta