AIR HTML Introspector によるデバッグ

Adobe® AIR® SDK には、AIRIntrospector.js という JavaScript ファイルが用意されています。これをアプリケーションに含めると、HTML ベースのアプリケーションのデバッグに役立ちます。

AIR Introspector について

Adobe AIR HTML/JavaScript Application Introspector(AIR HTML Introspector)には、HTML ベースのアプリケーションの開発とデバッグに役立つ次のような機能があります。

  • イントロスペクターツールでは、アプリケーション内のユーザーインターフェイスエレメントを参照して、そのマークアップと DOM プロパティを確認できます。

  • オブジェクト参照をイントロスペクション用に送信するコンソールが用意されており、プロパティ値を調整して JavaScript コードを実行できます。また、オブジェクトをコンソールに対して直列化すると、データの編集を制限できます。コンソールからテキストをコピーしたり保存したりすることもできます。

  • DOM プロパティと関数をツリー表示できます。

  • DOM エレメントの属性とテキストノードを編集できます。

  • アプリケーションに読み込まれたリンク、CSS スタイル、イメージおよび JavaScript ファイルを一覧表示します。

  • ユーザーインターフェイスの初期 HTML ソースと現在のマークアップソースを表示できます。

  • アプリケーションディレクトリ内のファイルにアクセスできます(この機能は、アプリケーションサンドボックス用に開かれた AIR HTML Introspector コンソールでのみ使用できます。非アプリケーションサンドボックスのコンテンツ用に開かれたコンソールでは使用できません)。

  • responseText プロパティや responseXML プロパティなど(使用可能な場合)、XMLHttpRequest オブジェクトとそのプロパティのビューアが含まれています。

  • ソースコードとファイルから一致するテキストを検索できます。

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」の行の最初に次のようなアイコンが表示されます。

メソッド

アイコン

info()

error()

warn()

log()warn()info()error() の各メソッドでは、実際のオブジェクトの参照のみが送信されます。したがって、表示されるプロパティは、表示時点でのプロパティだけです。実際のオブジェクトを直列化するには、dump() メソッドを使用します。このメソッドには、次の 2 つのパラメーターがあります。

パラメーター

説明

dumpObject

直列化されるオブジェクトです。

levels

オブジェクトツリーで検査されるレベルの最大数(ルートレベルを除く)です。デフォルト値は 1 です(ツリーのルートレベルに 1 レベル加えて表示されます)。このパラメーターはオプションです。

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 種類があります。

プロパティ

デフォルト値

説明

closeIntrospectorOnExit

true

アプリケーションの他のすべてのウィンドウを閉じたときに Inspector ウィンドウも閉じるように設定します。

debuggerKey

123(F12 キー)

AIR Introspector ウィンドウの表示と非表示を切り替えるキーボードショートカットのキーコードです。

debugRuntimeObjects

true

JavaScript で定義されたオブジェクトに加えてランタイムオブジェクトも展開するように Introspector を設定します。

flashTabLabels

true

「Console」タブと「XMLHttpRequest」タブ内で変更(テキストの登録など)が発生したときにタブが点滅するように設定します。

introspectorKey

122(F11 キー)

Inspect パネルを開くキーボードショートカットのキーコードです。

showTimestamp

true

各行の先頭にタイムスタンプを表示するように「Console」タブを設定します。

showSender

true

メッセージの送信元オブジェクトに関する情報を、各行の先頭に表示するように「Console」タブを設定します。

wrapColumns

2000

ソースファイルを折り返す列数です。

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」タブによるオブジェクトの検査を参照してください。

  • コンソールをクリアするには、テキストを右クリックして「Clear Console」を選択します。

  • 「Console」タブ内のテキストをファイルに保存するには、「Console」タブを右クリックして「Save Console To File」を選択します。

  • 「Console」タブ内のテキストをクリップボードに保存するには、「Console」タブを右クリックして「Save Console To Clipboard」を選択します。選択したテキストのみをクリップボードにコピーするには、テキストを右クリックして「コピー」を選択します。

  • Console クラス内のテキストをファイルに保存するには、「Console」タブを右クリックして「Save Console To File」を選択します。

  • タブ内に表示されているテキストを検索するには、Ctrl + F キー(Windows)または Command + F キー(Mac OS)を押します(非表示のツリーノードは検索されません)。

「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 つのセクションがあります。

  • Actual source - アプリケーション開始時にルートコンテンツとして読み込まれるページの HTML ソースが表示されます。

  • Parsed source - アプリケーション UI を構成する現在のマークアップが表示されます。アプリケーション実行中に Ajax 技術を使用してマークアップコードが生成されるので、実際のソースとは異なる場合があります。

  • Application files - アプリケーションディレクトリ内のファイルが一覧表示されます。この一覧は、アプリケーションセキュリティサンドボックス内のコンテンツから AIR Introspector が起動された場合にのみ表示されます。このセクションには、テキストファイルの内容やイメージを表示できます。

「Source」タブに表示されているデータを最新の情報に更新するには、AIR Introspector ウィンドウ上部にある「Refresh Active Window」ボタンをクリックします。

タブ内に表示されているテキストを検索するには、Ctrl + F キー(Windows)または Command + F キー(Mac OS)を押します(非表示のツリーノードは検索されません)。

「XHR」タブ

「XHR」タブには、アプリケーション内のすべての XMLHttpRequest 通信がインターセプトされ、その情報が記録されます。これを使用すると、responseTextresponseXML などの XMLHttpRequest プロパティ(使用可能な場合)をツリー表示で確認できます。

タブ内に表示されているテキストを検索するには、Ctrl + F キー(Windows)または Command + F キー(Mac OS)を押します(非表示のツリーノードは検索されません)。

非アプリケーションサンドボックスのコンテンツに対する AIR Introspector の使用

アプリケーションディレクトリのコンテンツを、非アプリケーションサンドボックスにマップされるインラインフレームまたはフレームに読み込むことができます(「AIR のセキュリティ」(ActionScript 開発者用)または「Adobe AIR の HTML セキュリティ」(HTML 開発者用)を参照してください)。AIR Introspector はこのようなコンテンツにも使用できますが、次の規則に従ってください。

  • アプリケーションサンドボックスと非アプリケーションサンドボックス(インラインフレーム)の両方のコンテンツに、AIRIntrospector.js ファイルを含める必要があります。

  • parentSandboxBridge プロパティを上書きしないでください。AIR Introspector コードでこのプロパティを使用します。プロパティは必要に応じて追加してください。例えば、次のように記述しないでください。

    parentSandboxBridge = mytrace: function(str) {runtime.trace(str)}} ;

    次のようなシンタックスを使用してください。

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • 非アプリケーションサンドボックスのコンテンツからは、F12 キーを押して AIR Introspector を開くことができません。また、air.Introspector.Console クラスのいずれかのメソッドを呼び出して AIR Introspector を開くこともできません。「Open Introspector」ボタンをクリックすることによってのみ、Introspector ウィンドウを開くことができます。デフォルトでは、このボタンがインラインフレームまたはフレームの右上に追加されます(非アプリケーションサンドボックスのコンテンツに課せられるセキュリティ制限により、ボタンのクリックなど、ユーザー操作の結果としてのみ新しいウィンドウを開くことができます)。

  • アプリケーションサンドボックスと非アプリケーションサンドボックスのそれぞれに対して、別個の AIR Introspector ウィンドウを開くことができます。AIR Introspector ウィンドウに表示されるタイトルで両者を区別できます。

  • AIR Introspector が非アプリケーションサンドボックスから実行されている場合は、「Source」タブにアプリケーションファイルが表示されません。

  • AIR Introspector で確認できるのは、起動元のサンドボックス内にあるコードだけです。