Three Ways to debug an Adobe Air Javascript Application

Without a debug console a programmer is flying blind. When programming an Air Application with Javascript you´ll pretty soon miss the good old firebug(damn i love it). So here are three simple ways, to look into your running engine.

1. Adobe commandline tool ADL

Adobe has a command line tool which enables you to run and test your Air software. It´s called ADL and resides in the /bin folder of the SDK. To start a program under Windows you need to go into the command line (Win+R -> cmd) and type something like this:

C:\air\bin> adl c:\my_air_test\application.xml

The adl needs to know the applications xml definition to start your program. After the launch you can follow the debug output in the open command window. Inside the Javascript you use: air.trace(‘my debug output’); . Air mostly takes care of converting arrays and objects to a visible form (comma separated). Here is the link to Adobe Documentation.

2. Firebug Lite

Firebug Lite is a piece of Javascript simulating the console.log output for InternetExplorer and other non “Real Firebug” compatible Browsers. It appends a “log console div” to your website and even has an interactive command line.

To use it you just have to include the firebug lite js in your head section and hit F12 in your app:

<script src=”js/debug/firebug.js” type=”text/javascript”></script>

In the javascript code you can use console.log(‘my debug output’);

Using firebug lite enables you to also debug your software in other browsers than air, if you are not using air specific javascript API functions like read/write files.

3. build your own debug output

I actually started with this method. I made a <div id=”debug”> in the html and used a simple (jQuery powered) function to append the debug output into the div container:

function debug(data){
if(debug_on == true)
{
$(‘#debug’).append(data); //append(‘whatever’) comes from jQuery lib
}
}

The debug div is hidden via css and only shows up when the debug_on flag is set. Using jQuery it is pretty simple to add more functions like clear log.

All three methods have pro´s and con´s which could be discussed further. For now i hope i could save you some time in getting an overview.