Adobe AIR: Supercharged Development with Debugging

Debugging on Wheels

With the AIR 1.5 update and the Aptana Studio 1.2.1 release, Aptana and Adobe have created an amazing debugging platform, taking advantage of the power of Eclipse to give developers more features than ever. Let’s have a look at just how this new platform can help.

Close our sample AIR application and return to the Debug.html editor. The left margin on the editor actually has two columns—one for code folding, one for breakpoints. On line 17, the second air.Introspector.Console line, double-click on the left side of the margin. A blue dot appears:

This sets a breakpoint, or a point during which script execution will suspend and allow us some breathing time. Now, save Debug.html and run your application using the Debug button instead of Run:

When the application window opens, click the Read a local file button. This time, the window freezes and Aptana Studio appears with a dialog box:

The Debug perspective is a standard feature of the Eclipse debug system, which Aptana has managed to tightly integrate with the Adobe AIR SDK. Click Yes to confirm the perspective switch; the debug perspective is well set up to enable debugging. Aptana will rearrange the workbench till it looks like this:

While the debug perspective presents quite a busy interface, you’ll appreciate having this power at your fingertips later. Let’s have a look at the different views in this perspective.

The Debug view (no relation to our project name) provides a basic stack and control panel for script execution. Here, it lists the AIR Debugger control, which manages the script execution thread, as well as the AIR Debug Launcher (ADL) server. Clicking any of the entries in the stack trace will navigate the open editor panel to the correct file and line, helping you quickly walk through code.

The Variables view will display any variables and objects in the current scope. Similar to the AIR Introspector, you can use this to inspect objects. Notice variables inside our readLocalFile function, including our FileStream object from earlier, are included. As they’re standard JavaScript objects, you can freely open them up and examine their internals.

Docking this view fails to do it justice. Right-click on the Variables title tab, click Detached, and resize the resulting window as you see fit. (Alternatively, you can dock it to the side of the workbench, in return for horizontal screen real estate.) Much better.

(You can always find this view again using Window > Show View or Alt + Shift + Q – V)

Expressions is next. Similar to Variables, Expressions allows you to watch the value of an expression in real time. This could be a simple variable, or it could be a function call. For example, I often use the Expressions view to check DOM nodes on a page matching a certain CSS selector while jQuery is loaded. To use the Expressions view, add Watch Expressions using the first button in the mini toolbar.

Let’s create a Watch Expression. But first, let’s resume the script execution: hit the Resume button back on the Debug view.

The alert box reporting This is the content of LocalFile.txt will appear, but it may be hidden under your Aptana window. Seek it out and hit the OK button, or your AIR application will object. Our AIR application is now back in action, and the Debug view will report a “Thread [main] (Running)”; we’re now ready to add an expression. Try a simple one, like window.innerHeight, and explore the result.

We have an excellent set of tools to debug our JavaScript, but what about our HTML itself? This is where the Outline view comes in. Using the Outline panel, you can inspect the structure of DOM nodes that make up your page. You can even look inside certain nodes, and inspect JavaScript objects defined or referenced in script tags. Similarly, the Loaded Scripts view shows defined functions on a file-by-file basis.

Finally, we have the usual Console view. If we use the AIR trace debugging approach instead of the Introspector, we can send output to the console. This is even exposed to the Flash Player runtime when evaluating expressions, so you can create a complex expression with an embedded function and send some output to the console. Debug while you debug!

Final Thoughts

AIR debugging has come of age. The AIR toolchain in Aptana is extremely versatile, and even serves as a fantastic debugging environment for standard web pages, courtesy of the full-fledged JavaScript engine and WebKit renderer built in to the AIR platform. The new debugging platform is just as powerful as the Flex debugging system included in Flex Builder 3; it rounds off AIR as a powerful web-based platform, a demonstration of the power of JavaScript, and a must-see for all web developers.

In the mean time, test yourself on the contents of this article by taking the quiz. The first 200 people to submit their answers will receive a print copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development, delivered to their door for free, courtesy of Adobe. Take the quiz now!