Accessibility
Joelle Lam

Joelle Lam

aptana.com

Created:
11 March 2009
User Level:
All
Products:
Adobe AIR

Debugging JavaScript code in Adobe AIR with Aptana Studio

One of the killer features in the latest release of the Adobe AIR Development Plug-In for Aptana Studio is the JavaScript debugger. Without a debugger tracking down what's causing your code to not do what you want it to can be unpredictably time consuming. Of course, the Aptana Studio JavaScript editors can detect syntax errors and help you correct them right away as you type, but issues like undefined variables, variable scope, or just plain incorrect application logic can be trickier to pin down and fix. That's why quality debugging tools are so critical to any development beyond the simplest of scripts and thus so useful for creating increasingly sophisticated applications with Adobe AIR.


Watch the video (4:22)

The JavaScript debugger's easy-to-use consoles, windows, menus, and toolbars make it a snap to locate errors, respond to them, and debug your applications successfully. Set a breakpoint in the gutter of the editor, and then click the Debug toolbar button to invoke the debugger. Step through your code or click Pause to stop on the next line of execution. Use the Step In, Step Down, and Step Out buttons to move through the application, view current variable and argument values, and look at the currently loaded DOM.

In case you are new to AIR development with Aptana Studio, the Adobe AIR Development Plug-In for Aptana Studio offers the capabilities and tools you need to more easily create great Ajax, JavaScript, and HTML applications for Adobe AIR, including:

  • Integrated content assist for the Adobe AIR SDK
  • Preinstalled Adobe AIR runtime and SDK
  • JavaScript debugger integration with the Adobe AIR runtime
  • A project wizard that generates all files necessary for out-of-the box launching of Adobe AIR applications
  • An export wizard that bundles and deploys Adobe AIR applications
  • The ability to easily import your favorite Ajax libraries and Adobe Air frameworks into Adobe AIR projects
  • The ability to create and manage certificates for signing Adobe AIR applications
  • Support for localization, menu builders, and source viewing
  • Adobe AIR samples that can be previewed or imported as projects
  • Help and online documentation

Requirements

In order to make the most of this article, you need the following software and files:

Adobe AIR

Aptana Studio (version 1.2.5 or later)

Adobe AIR Plug-In for Aptana Studio

Prerequisite knowledge

To make the most of these features, you need to be familiar with JavaScript. The article, Getting Started with Aptana Studio Debugger, guides you through the installation process and offers a tutorial on adding a breakpoint and displaying the current values of your variables. For more generic installation options, refer to the article, Installing a Studio plugin.

Using the JavaScript debugger in Aptana Studio

After you've installed the latest Adobe AIR Plug-In for Aptana Studio (which includes the debugger), open an existing Adobe AIR project in Aptana Studio. Click Debug on the toolbar to launch a debugging session for your application (see Figure 1).

Click Run to launch your application.

Figure 1. Click Run to launch your application.

Aptana Studio creates a Debug configuration when generating your Adobe AIR application. To begin debugging, click Debug on the toolbar (see Figure 2).

Click Debug to begin debugging your application.

Figure 2. Click Debug to begin debugging your application.

In Debug view, everything you need to successfully debug your application is at your fingertips. You can create breakpoints, view variables and use the available tools to move through the application; to stop, pause, and resume; or to review the values for your variables. If errors are present, you can easily review and respond to the errors to debug your application.

Here is an example of how you might use the product to debug an existing Aptana Studio application:

  1. Choose the line in which you'd like the debugger to stop, and then double-click the left gutter. Alternatively, you can click Pause to stop on the first line of JavaScript execution. You can see the Pause button here (as well as other buttons). Also note that breakpoints can be added or removed anytime during the debug session.

    Debugging commands are easily accessible from toolbars. commands are easily accessible from toolbars.

    Figure 3. Debugging commands are easily accessible from toolbars.

  2. Click Debug on the toolbar to launch the application. Because you've created a breakpoint, the debugger stops the application's execution when it hits the line on which you inserted the breakpoint.
  3. After launching an application, the perspective automatically changes to the Debug perspective. The Debug perspective consists of a set of windows recommended for debugging. You can choose to remain in this perspective during your debug session or return to the Aptana perspective by clicking the Aptana logo button in the top-right corner of the interface. When in the Debug perspective, you can make changes to code as desired. You can also access the Threads window, which integrates your current window frames and your call stack, as well as Variables and Breakpoint windows (see Figure 4). Additionally, you may consider opening the Watch Window if you want to always monitor a specific expression.

    The Debug perspective lets you step through code, resolve errors, and run your application.

    Figure 4. The Debug perspective lets you step through code, resolve errors, and run your application.

  4. Click Step In, Step Over, Step Out, or Run on the debugging toolbar to maneuver through your source code. Errors are displayed in the Console. Fix the errors and execute the code again through the debugger. Continue debugging in this manner until all errors are resolved.
  5. End the debug session by clicking Terminate (the square red button) on the debugging toolbar.

Where to go from here

To learn more, refer to the Help page, Getting Started with Aptana Studio Debugger. Learn more about Aptana Studio at Aptana Studio Online Help.

Adobe AIR is also supported in other Aptana products including: Aptana Jaxer, the Ajax server that lets you use your JavaScript and Ajax skills to create server-side apps that can work with Adobe AIR; and Aptana Cloud, an application hosting and life-cycle management service that supports the delivery of Adobe AIR applications and the data services with which they communicate.

About the author

Joelle Lam is a member of the engineering team that produces Aptana Studio, the open source web development environment for creating Web applications and sites with Ajax, PHP, Ruby on Rails and Python. Joelle contributes to core aspects of Aptana Studio as well as its extensions – such as the Adobe AIR Development Plug-In for Aptana Studio. If you get passed by a gal on a motorbike while in Silicon Valley, there's a good chance it's Joelle.