Debugging with the AIR HTML IntrospectorThe Adobe® AIR® SDK includes an AIRIntrospector.js JavaScript file that you can include in your application to help debug HTML-based applications. About the AIR IntrospectorThe Adobe AIR HTML/JavaScript Application Introspector (called the AIR HTML Introspector) provides useful features to assist HTML-based application development and debugging:
Loading the AIR Introspector codeThe AIR Introspector code is included in a JavaScript file, AIRIntrospector.js, that is included in the frameworks directory of the AIR SDK. To use the AIR Introspector in your application, copy the AIRIntrospector.js to your application project directory and load the file via a script tag in the main HTML file in your application: <script type="text/javascript" src="AIRIntrospector.js"></script> Also include the file in every HTML file that corresponds to different native windows in your application. Important: Include the AIRIntrospector.js file only
when developing and debugging the application. Remove it in the
packaged AIR application that you distribute.
The AIRIntrospector.js file defines a class, Console, which you can access from JavaScript code by calling air.Introspector.Console. Note: Code using the AIR Introspector must be in the
application security sandbox (in a file in the application directory).
Inspecting an object in the Console tabThe Console class defines five methods: log(), warn(), info(), error(), and dump(). The log(), warn(), info(), and error() methods all let you send an object to the Console tab. The most basic of these methods is the log() method. The following code sends a simple object, represented by the test variable, to the Console tab: var test = "hello"; air.Introspector.Console.log(test); However, it is more useful to send a complex object to the Console tab. For example, the following HTML page includes a button (btn1) that calls a function that sends the button object itself to the Console tab: <html>
<head>
<title>Source Viewer Sample</title>
<script type="text/javascript" src="scripts/AIRIntrospector.js"></script>
<script type="text/javascript">
function logBtn()
{
var button1 = document.getElementById("btn1");
air.Introspector.Console.log(button1);
}
</script>
</head>
<body>
<p>Click to view the button object in the Console.</p>
<input type="button" id="btn1"
onclick="logBtn()"
value="Log" />
</body>
</html>
When you click the button, the Console tab displays the btn1 object, and you can expand the tree view of the object to inspect its properties: You can edit a property of the object by clicking the listing to the right of the property name and modifying the text listing. The info(), error(), and warn() methods are like the log() method. However, when you call these methods, the Console displays an icon at the beginning of the line:
The log(), warn(), info(), and error() methods send a reference only to an actual object, so the properties available are the ones at the moment of viewing. If you want to serialize the actual object, use the dump() method. The method has two parameters:
Calling the dump() method serializes an object before sending it to the Console tab, so that you cannot edit the objects properties. For example, consider the following code: var testObject = new Object(); testObject.foo = "foo"; testObject.bar = 234; air.Introspector.Console.dump(testObject); When you execute this code, the Console displays the testObject object and its properties, but you cannot edit the property values in the Console. Configuring the AIR IntrospectorYou can configure the console by setting properties of the global AIRIntrospectorConfig variable. For example, the following JavaScript code configures the AIR Introspector to wrap columns at 100 characters: var AIRIntrospectorConfig = new Object(); AIRIntrospectorConfig.wrapColumns = 100; Be sure to set the properties of the AIRIntrospectorConfig variable before loading the AIRIntrospector.js file (via a script tag). There are eight properties of the AIRIntrospectorConfig variable:
AIR Introspector interfaceTo open the AIR introspector window when debugging the application, press the F12 key or call one of the methods of the Console class (see Inspecting an object in the Console tab). You can configure the hot key to be a key other than the F12 key; see Configuring the AIR Introspector. The AIR Introspector window has six tabs—Console, HTML, DOM, Assets, Source, and XHR—as shown in the following illustration: The Console tabThe Console tab displays values of properties passed as parameters to one of the methods of the air.Introspector.Console class. For details, see Inspecting an object in the Console tab.
The HTML tabThe HTML tab lets you view the entire HTML DOM in a tree structure. Click an element to view its properties on the right side of the tab. Click the + and - icons to expand and collapse a node in the tree. You can edit any attribute or text element in the HTML tab and the edited value is reflected in the application. Click the Inspect button (to the left of the list of tabs in the AIR Introspector window). You can click any element on the HTML page of the main window and the associated DOM object is displayed in the HTML tab. When the main window has focus, you can also press the keyboard shortcut to toggle the Inspect button on and off. The keyboard shortcut is F11 by default. You can configure the keyboard shortcut to be a key other than the F11 key; see Configuring the AIR Introspector. Click the Refresh Active Window button (at the top of the AIR Introspector window) to refresh the data displayed in the HTML tab. Click CTRL+F on Windows or Command+F on Mac OS to search for matching text displayed in the tab. (Tree nodes that are not visible are not searched.) The DOM tabThe DOM tab shows the window object in a tree structure. You can edit any string and numeric properties and the edited value is reflected in the application. Click the Refresh Active Window button (at the top of the AIR Introspector window) to refresh the data displayed in the DOM tab. Click CTRL+F on Windows or Command+F on Mac OS to search for matching text displayed in the tab. (Tree nodes that are not visible are not searched.) The Assets tabThe Assets tab lets you check the links, images, CSS, and JavaScript files loaded in the native window. Expanding one of these nodes shows the content of the file or displays the actual image used. Click the Refresh Active Window button (at the top of the AIR Introspector window) to refresh the data displayed in the Assets tab. Click CTRL+F on Windows or Command+F on Mac OS to search for matching text displayed in the tab. (Tree nodes that are not visible are not searched.) The Source tabThe Source tab includes three sections:
Click the Refresh Active Window button (at the top of the AIR Introspector window) to refresh the data displayed in the Source tab. Click CTRL+F on Windows or Command+F on Mac OS to search for matching text displayed in the tab. (Tree nodes that are not visible are not searched.) The XHR tabThe XHR tab intercepts all XMLHttpRequest communication in the application and logs the information. This lets you view the XMLHttpRequest properties including responseText and responseXML (when available) in a tree view. Click CTRL+F on Windows or Command+F on Mac OS to search for matching text displayed in the tab. (Tree nodes that are not visible are not searched.) Using the AIR Introspector with content in a non-application sandboxYou can load content from the application directory into an iframe or frame that is mapped to a non-application sandbox. (See HTML security in Adobe AIR for ActionScript developers or HTML security in Adobe AIR for HTML developers). You can use the AIR introspector with such content, but observe the following rules:
|
|