AIR HTML Introspector によるデバッグAdobe® AIR® SDK には、AIRIntrospector.js という JavaScript ファイルが用意されています。これをアプリケーションに含めると、HTML ベースのアプリケーションのデバッグに役立ちます。 AIR Introspector についてAdobe AIR HTML/JavaScript Application Introspector（AIR HTML Introspector）には、HTML ベースのアプリケーションの開発とデバッグに役立つ次のような機能があります。
AIR Introspector コードの読み込みAIR Introspector コードは、AIR SDK の frameworks ディレクトリにある AIRIntrospector.js という JavaScript ファイルに格納されています。アプリケーションで AIR Introspector を使用するには、AIRIntrospector.js をアプリケーションのプロジェクトディレクトリにコピーし、アプリケーションのメイン HTML ファイルでスクリプトタグを使用してファイルを読み込みます。 <script type="text/javascript" src="AIRIntrospector.js"></script> また、アプリケーションの各ネイティブウィンドウに対応するすべての HTML ファイルにもこのファイルを含めます。 重要： AIRIntrospector.js ファイルは、アプリケーションの開発時とデバッグ時にのみ含めてください。AIR アプリケーションをパッケージ化して配布する際は削除してください。
AIRIntrospector.js ファイルでは Console クラスを定義しています。このクラスに JavaScript コードからアクセスするには、air.Introspector.Console を呼び出します。 注意： AIR Introspector を使用するコードは、アプリケーションセキュリティサンドボックス内（アプリケーションディレクトリ内のファイル）に含まれている必要があります。
「Console」タブによるオブジェクトの検査Console クラスでは、log()、warn()、info()、error()、dump() の 5 つのメソッドを定義します。 log()、warn()、info()、error() の各メソッドを使用すると、オブジェクトを「Console」タブに送信できます。これらのうち最も基本的なメソッドは log() です。次のコードでは、test 変数で表される単純なオブジェクトを、「Console」タブに送信します。 var test = "hello"; air.Introspector.Console.log(test); しかし、複雑なオブジェクトを「Console」タブに送信したほうが便利です。例えば、次の HTML ページに含まれているボタン（btn1）は、そのボタンオブジェクト自体を「Console」タブに送信する関数を呼び出します。 <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>
ボタンをクリックすると、「Console」タブに btn1 オブジェクトが表示されます。オブジェクトのツリー表示を展開すると、そのプロパティを検査できます。 オブジェクトのプロパティを編集するには、一覧のプロパティ名の右側をクリックして、テキストを変更します。 info()、error()、warn() の各メソッドも、log() メソッドに似ています。ただし、これらのメソッドを呼び出した場合、「Console」の行の最初に次のようなアイコンが表示されます。
log()、warn()、info()、error() の各メソッドでは、実際のオブジェクトの参照のみが送信されます。したがって、表示されるプロパティは、表示時点でのプロパティだけです。実際のオブジェクトを直列化するには、dump() メソッドを使用します。このメソッドには、次の 2 つのパラメーターがあります。
dump() メソッドを呼び出すと、オブジェクトが直列化されてから「Console」タブに送信されます。したがって、オブジェクトのプロパティを編集することはできません。例えば、次のようなコードがあるとします。 var testObject = new Object(); testObject.foo = "foo"; testObject.bar = 234; air.Introspector.Console.dump(testObject); このコードを実行すると、testObject オブジェクトとそのプロパティが「Console」タブに表示されますが、このタブでプロパティ値を編集することはできません。 AIR Introspector の設定コンソールを構成するには、AIRIntrospectorConfig グローバル変数のプロパティを設定します。例えば、次の JavaScript コードでは、各列を 100 文字で折り返すように AIR Introspector を構成します。 var AIRIntrospectorConfig = new Object(); AIRIntrospectorConfig.wrapColumns = 100; AIRIntrospectorConfig 変数のプロパティ設定は、AIRIntrospector.js ファイルを（script タグを介して）読み込む前に行ってください。 AIRIntrospectorConfig 変数のプロパティには、次の 8 種類があります。
AIR Introspector のインターフェイスアプリケーションのデバッグ時に AIR Introspector ウィンドウを開くには、F12 キーを押すか、Console クラスのいずれかのメソッドを呼び出します（「Console」タブによるオブジェクトの検査を参照）。ホットキーを設定して、F12 以外のキーに変更することもできます。AIR Introspector の設定を参照してください。 次に示すように、AIR Introspector ウィンドウには、「Console」、「HTML」、「DOM」、「Assets」、「Source」、「XHR」の 6 つのタブがあります。 「Console」タブ「Console」タブには、air.Introspector.Console クラスのいずれかのメソッドにパラメーターとして渡されるプロパティの値が表示されます。詳しくは、「Console」タブによるオブジェクトの検査を参照してください。
「HTML」タブ「HTML」タブには、HTML DOM 全体がツリー構造で表示されます。エレメントをクリックすると、そのプロパティがタブの右側に表示されます。ツリーのノードを展開するには「+」アイコンを、折りたたむには「-」アイコンをクリックします。 「HTML」タブでは任意の属性やテキストエレメントを編集でき、編集した値がアプリケーションに反映されます。 AIR Introspector ウィンドウのタブ一覧の左側にある「Inspect」ボタンをクリックします。メインウィンドウの HTML ページにある任意のエレメントをクリックすると、関連付けられている DOM オブジェクトが「HTML」タブに表示されます。メインウィンドウにフォーカスがあるときは、キーボードショートカットを押して「Inspect」ボタンのオンとオフを切り替えることもできます。デフォルトでは、このキーボードショートカットは F11 です。キーボードショートカットを設定して、F11 以外のキーに変更することもできます。AIR Introspector の設定を参照してください。 「HTML」タブに表示されているデータを最新の情報に更新するには、AIR Introspector ウィンドウ上部にある「Refresh Active Window」ボタンをクリックします。 タブ内に表示されているテキストを検索するには、Ctrl + F キー（Windows）または Command + F キー（Mac OS）を押します（非表示のツリーノードは検索されません）。 「DOM」タブ「DOM」タブには、window オブジェクトがツリー構造で表示されます。ストリングおよび数値の任意のプロパティを編集でき、編集した値がアプリケーションに反映されます。 「DOM」タブに表示されているデータを最新の情報に更新するには、AIR Introspector ウィンドウ上部にある「Refresh Active Window」ボタンをクリックします。 タブ内に表示されているテキストを検索するには、Ctrl + F キー（Windows）または Command + F キー（Mac OS）を押します（非表示のツリーノードは検索されません）。 「Assets」タブ「Assets」タブでは、ネイティブウィンドウに読み込まれたリンク、イメージ、CSS および JavaScript ファイルを確認できます。これらのノードのいずれかを展開すると、ファイルの内容または実際に使用されているイメージが表示されます。 「Assets」タブに表示されているデータを最新の情報に更新するには、AIR Introspector ウィンドウ上部にある「Refresh Active Window」ボタンをクリックします。 タブ内に表示されているテキストを検索するには、Ctrl + F キー（Windows）または Command + F キー（Mac OS）を押します（非表示のツリーノードは検索されません）。 「Source」タブ「Source」タブには、次の 3 つのセクションがあります。
「Source」タブに表示されているデータを最新の情報に更新するには、AIR Introspector ウィンドウ上部にある「Refresh Active Window」ボタンをクリックします。 タブ内に表示されているテキストを検索するには、Ctrl + F キー（Windows）または Command + F キー（Mac OS）を押します（非表示のツリーノードは検索されません）。 「XHR」タブ「XHR」タブには、アプリケーション内のすべての XMLHttpRequest 通信がインターセプトされ、その情報が記録されます。これを使用すると、responseText や responseXML などの XMLHttpRequest プロパティ（使用可能な場合）をツリー表示で確認できます。 タブ内に表示されているテキストを検索するには、Ctrl + F キー（Windows）または Command + F キー（Mac OS）を押します（非表示のツリーノードは検索されません）。 非アプリケーションサンドボックスのコンテンツに対する AIR Introspector の使用アプリケーションディレクトリのコンテンツを、非アプリケーションサンドボックスにマップされるインラインフレームまたはフレームに読み込むことができます（AIR のセキュリティ（ActionScript 開発者用）またはAdobe AIR の HTML セキュリティ（HTML 開発者用）を参照してください）。AIR Introspector はこのようなコンテンツにも使用できますが、次の規則に従ってください。
|
|
