Adobe AIR: Supercharged Development with Debugging

Tracking Script Execution

Aptana has created a set of sample files to demonstrate the AIR platform. Here’s what our workbench looks like at the moment:

In particular, we now have a Debug.html file (or similar, depending on your project name), complete with JavaScript examples and references to our AIR frameworks.
One of the examples uses the readLocalFile function, so let’s add some debugging notes to that. Update it to add the calls to air.trace, as shown below:

function readLocalFile(){  
 var f = air.File.applicationDirectory.resolvePath("LocalFile.txt");  
 air.trace("Opening LocalFile.txt in applicationDirectory");  
 var fs = new air.FileStream();  
 fs.open(f, air.FileMode.READ);  
 var content = fs.readUTFBytes(fs.bytesAvailable);  
 fs.close();  
 air.trace("Read contents of LocalFile.txt: " + content);  
 return content;  
}

Save the file, and launch it using the Run Debug button:

Our application window appears:

Click the Read a local file using AIR APIs button. The file is read and the alert window appears:

Click OK (or similar, depending on your OS), and head back to Aptana. The Console view should appear below your code window.

The AIR architecture closely mimics the Flash debugging approach – applications can “trace” messages, which are then sent back to the parent application, typically the AIR Debug Launcher (“ADL”). In this case, Aptana receives these debugging messages and sends them to the Console view.

Of course, dumping text to a console is useful, but what if we want to look inside the script execution, and examine objects? Bring on the AIR HTML Introspector, the Firebug of the AIR world.

Exploring at Runtime

Head back to your open Application Sandbox sample window, and hit F12. The AIR HTML/JS Application Introspector window appears:

The Introspector includes a JS console, a DOM tree and node inspector, and a look at the source (including parsed source) of files in the AIR project. There’s also an XMLHttpRequest monitor to keep an eye on AJAX requests. Most importantly, the Introspector has an API that we can use right from within our AIR application. Head back to the readLocalFile function we modified earlier, and change it to this:

function readLocalFile(){  
 var f = air.File.applicationDirectory.resolvePath("LocalFile.txt");  
 air.Introspector.Console.log("Opening LocalFile.txt in applicationDirectory");  
 var fs = new air.FileStream();  
 fs.open(f, air.FileMode.READ);  
 var content = fs.readUTFBytes(fs.bytesAvailable);  
 air.Introspector.Console.info(fs);  
 fs.close();  
 return content;  
}

Close the AIR application, save Debug.html, and click the Run button again. When the application opens, click the Read a local file button once more, but watch for the Introspector window—it might be hidden in your dock or taskbar. You might need to hit F12 to find it, and click the Read a local file button once again if the console is empty. Now, the Introspector window has two new entries:

Logging our debug messages to the console is useful, but the Introspector can go one step further: have a look at the [object FileStream] in the console window. This indicates that we’ve sent a FileStream object – sure enough, var fs = new air.FileStream() -- to the console. Click the gray plus symbol (+) on the second line to view the object.

You can inspect objects and manipulate them in real time using the >>> prompt at the bottom of the window. For example, we could choose to keep our file stream open during the script, call a few of the methods of the object from the console (by assigning the object a reference in a global variable), and then run fs.close() manually once we’re done.

So we can keep an eye on the script execution, and even have a peek inside. But what about managing code execution? What if we could simply pause our JavaScript and have a look from the inside out? Let’s have a look at the latest in this update of the Aptana plugin, the debugging platform integration.