使用 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 主控台。不可用於針對非應用程式安全執行程序內容開啟的主控台。)

  • 它包含一個 XMLHttpRequest 物件及其屬性專用的檢視器,包括 responseText responseXML 屬性 (如果可用)。

  • 您可以在原始碼和檔案中搜尋相符的文字。

載入 AIR Introspector 程式碼

AIR Introspector 程式碼包含在 JavaScript 檔案 AIRIntrospector.js 中,該檔案位於 AIR SDK 架構目錄內。若要在應用程式中使用 AIR Introspector,請將 AIRIntrospector.js 複製至應用程式專案目錄,然後在應用程式的主要 HTML 檔案中使用 script 標籤載入該檔案。

<script type="text/javascript" src="AIRIntrospector.js"></script>

請同時將該檔案加至對應至應用程式中各個不同原生視窗的每一個 HTML 檔案中。

重要事項: 請在應用程式開發和除錯階段才加入 AIRIntrospector.js 檔案。請從您要發行的封裝 AIR 應用程式中將其移除。

AIRIntrospector.js 檔案定義一個 Console 類別,您可以從 JavaScript 程式碼中呼叫 air.Introspector.Console 來存取該類型。

備註: 使用 AIR Introspector 的程式碼必須位於應用程式安全執行程序中 (在應用程式目錄內的檔案中)。

檢查主控台標籤中的物件

Console 類別定義五個方法: log() warn() info() error() dump()

log() warn() info() error() 方法都可讓您傳送物件至「主控台」標籤。 log() 是這些方法中最基本的方法。下列程式碼可將 test 變數所表示的簡單物件傳送至「主控台」標籤:

var test = "hello"; 
air.Introspector.Console.log(test);

不過,它更適合用於傳送複雜物件至「主控台」標籤。例如,下列 HTML 頁面包含一個按鈕 ( btn1 ),可呼叫函數將按鈕本身傳送至「主控台」標籤:

<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>

當您按一下按鈕,「主控台」標籤會顯示 btn1 物件,您可以展開物件的樹狀檢視來檢查它的屬性:

按一下屬性名稱右邊的項目並修改文字清單,即可編輯物件的屬性。

info() error() 以及 warn() 方法與 log() 方法相同。不過,當您呼叫這些方法時,「主控台」會在列開頭顯示一個圖示:

方法

圖示

info()

error()

warn()

log() warn() info() error() 方法僅會傳送參考至實際物件,因此可用的屬性只限於檢視當時那些屬性。如果您要序列化實際物件,請使用 dump() 方法。這個方法有兩個參數:

參數

說明

dumpObject

要序列化的物件。

levels

物件樹狀結構中要檢查之最大層級數 (除了根層級以外)。預設值為 1 (表示顯示之樹狀結構根層級的後一個層級)。這個參數是選用的參數。

呼叫 dump() 方法先將物件序列化,再傳送至「主控台」標籤,這樣便無法編輯物件的屬性。例如,以下列程式碼為例:

var testObject = new Object(); 
testObject.foo = "foo"; 
testObject.bar = 234; 
air.Introspector.Console.dump(testObject);

當您執行這個程式碼時,主控台會顯示 testObject 物件及其屬性,但您無法在主控台中編輯屬性值。

設定 AIR Introspector

您可以設定全域 AIRIntrospectorConfig 變數的屬性來設定主控台。例如,下列 JavaScript 程式碼可將 AIR Introspector 設定欄每100 個字便換行:

var AIRIntrospectorConfig = new Object(); 
AIRIntrospectorConfig.wrapColumns = 100;

請務必在載入 AIRIntrospector.js 檔案之前先設定 AIRIntrospectorConfig 變數的屬性 (利用 script 標籤)。

AIRIntrospectorConfig 變數有 8 個屬性:

屬性

預設值

說明

closeIntrospectorOnExit

true

將 Inspector 視窗設定為當應用程式所有其他視窗都關閉時關閉。

debuggerKey

123 (F12 鍵)

顯示和隱藏 AIR Introspector 視窗之鍵盤快速鍵的按鍵代碼。

debugRuntimeObjects

true

將 Introspector 設定為除展開 JavaScript 中定義的物件外,還同時展開執行階段物件。

flashTabLabels

true

將 Console 和 XMLHttpRequest 標籤設定為 flash,以指示它們何時發生變更 (例如,當文字記錄至這些標籤中時)。

introspectorKey

122 (F11 鍵)

開啟檢查畫面之鍵盤快速鍵的按鍵代碼。

showTimestamp

true

將「主控台」標籤設成在每一行開頭顯示時間戳記。

showSender

true

將「主控台」標籤設定為在每一列開頭顯示傳送訊息之物件的相關資訊。

wrapColumns

2000

設定原始檔案自動換行的欄數。

AIR Introspector 介面

若要在進行應用程式除錯時開啟 AIR Introspector 視窗,請按 F12 鍵或呼叫 Console 類別中的其中一個方法 (請參閱 檢查主控台標籤中的物件 )。您可以將快速鍵設成 F12 以外的按鍵,請參閱 設定 AIR Introspector

下圖顯示 AIR Introspector 視窗包含的 6 個標籤 — 主控台、HTML、DOM、資源、來源和 XHR:

主控台標籤

主控台標籤顯示當作參數傳遞至 air.Introspector.Console 類別其中一個方法的內容值。如需詳細資訊,請參閱 檢查主控台標籤中的物件

  • 若要清除主控台,請以滑鼠右鍵按一下文字,然後選取「清除主控台」。

  • 若要將「主控台」標籤中的文字儲存到檔案,請使用滑鼠右鍵按一下「主控台」標籤,然後選取「將主控台儲存到檔案」。

  • 若要將「主控台」標籤中的文字儲存至剪貼簿,請使用滑鼠右鍵按一下「主控台」標籤,然後選取「將主控台文字儲存至剪貼簿」。若只要將選取的文字複製至剪貼簿,請以滑鼠右鍵按一下文字,然後選取「複製」。

  • 若要將 Console 類別中的文字儲存到檔案,請使用滑鼠右鍵按一下「主控台」標籤,然後選取「將主控台儲存到檔案」。

  • 按一下 CTRL+F (在 Windows) 或 Command+F (在 Mac OS) 可以在標籤中搜尋相符的文字 (看不到的樹狀介面節點不會被搜尋)。

HTML 標籤

HTML 標籤可讓您以樹狀結構檢視整個 HTML DOM。按一下元素即可在標籤右邊檢視它的屬性。按一下 + 和 - 圖示可以展開和收合樹狀介面中的節點。

您可以編輯 HTML 標籤中的任何特質或文字元素,編輯的值會反映在應用程式中。

按一下「檢查」按鈕 (AIR Introspector 視窗中標籤清單的最左邊)。您可以按一下主要視窗之 HTML 頁面上的任何元素,和顯示在 HTML 標籤中的關聯 DOM 物件。當主要視窗具有焦點時,您還可以按鍵盤快速鍵來切換開啟或關閉「檢查」按鈕。鍵盤快速鍵預設為 F11。您可以將鍵盤快速鍵設成 F11 鍵以外的按鍵,請參閱 設定 AIR Introspector

按一下「重新整理作用中視窗」按鈕 (位於 AIR Introspector 視窗頂端) 可以重新整理顯示在 HTML 標籤中的資料。

按一下 CTRL+F (在 Windows) 或 Command+F (在 Mac OS) 可以搜尋顯示在標籤中的相符文字 (看不到的樹狀介面節點不會被搜尋)。

DOM 標籤

DOM 標籤以樹狀結構顯示視窗物件。您可以編輯任何字串和數值屬性,編輯的值會反映在應用程式中。

按一下「重新整理作用中視窗」按鈕 (位於 AIR Introspector 視窗頂端),可以重新整理顯示在 DOM 標籤中的資料。

按一下 CTRL+F (在 Windows) 或 Command+F (在 Mac OS) 可以搜尋顯示在標籤中的相符文字 (看不到的樹狀介面節點不會被搜尋)。

資源標籤

「資源」標籤可讓您檢查載入至原生視窗中的連結、影像、CSS 和 JavaScript 檔案。展開這些節點中的任一個可顯示檔案的內容或使用的實際影像。

按一下「重新整理作用中視窗」按鈕 (位於 AIR Introspector 視窗頂端) 可以重新整理顯示在「資源」標籤中的資料。

按一下 CTRL+F (在 Windows) 或 Command+F (在 Mac OS) 可以搜尋顯示在標籤中的相符文字 (看不到的樹狀介面節點不會被搜尋)。

來源標籤

「來源」標籤包含三個區段:

  • 實際來源 — 顯示應用程式啟動時載入當做根內容之頁面的 HTML 來源。

  • 剖析的來源 — 顯示組成目前的應用程式 UI 的標記,可能和實際來源有所不同,因為應用程式使用 Ajax 技術來即時產生標記程式碼。

  • 應用程式檔案 — 列出應用程式目錄中的檔案。只有從應用程式安全執行程序中的內容啟動時,這個清單才可以用於 AIR Introspector。在這個區段中,您可以檢視文字檔案的內容或檢視影像。

按一下「重新整理作用中視窗」按鈕 (位於 AIR Introspector 視窗頂端) 可以重新整理顯示在「來源」標籤中的資料。

按一下 CTRL+F (在 Windows) 或 Command+F (在 Mac OS) 可以搜尋顯示在標籤中的相符文字 (看不到的樹狀介面節點不會被搜尋)。

XHR 標籤

XHR 標籤可攔截應用程式中的所有 XMLHttpRequest 通訊並記錄該資訊。您因此能夠以樹狀檢視來檢視 XMLHttpRequest 屬性,包括 responseText responseXML (如果可用) 。

按一下 CTRL+F (在 Windows) 或 Command+F (在 Mac OS) 可以搜尋顯示在標籤中的相符文字 (看不到的樹狀介面節點不會被搜尋)。

對非應用程式安全執行程序中的內容使用 AIR Introspector

您可以將應用程式目錄的內容載入至對應到非應用程式安全執行程序的 iframe 或 frame 中 (請參閱 Adobe AIR 的 HTML 安全性 (適用於 ActionScript 開發人員) 或 HTML security in Adobe AIR (適用於 HTML 開發人員))。您可以對這種內容使用 AIR Introspector,但必須遵循下列規則:

  • AIRIntrospector.js 檔案必須同時包含在應用程式安全執行程序以及非應用程式安全執行程序 (iframe) 內容中。

  • 請勿覆寫 parentSandboxBridge 屬性,因為 AIR Introspector 程式碼要使用這個屬性。請視需要新增屬性。因此,請勿撰寫下列程式碼:

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

    請使用下列語法:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • 您無法從非應用程式安全執行程序內容透過按 F12 鍵或呼叫 air.Introspector.Console 類別其中一個方法來開啟AIR Introspector。您只能透過按一下「開啟 Introspector」按鈕來開啟 Introspector 視窗。這個按鈕預設加在 iframe 或 frame 的右上角。(由於加諸非應用程式安全執行程序內容的安全性限制,新視窗只能由使用者的手勢,例如按一下按鈕來開啟。)

  • 您可以針對應用程式安全執行程序和非應用程式安全執行程序個別開啟 AIR Introspector 視窗。您可以透過顯示在 AIR Introspector 視窗中的標題來區分兩者。

  • AIR Introspector 是從非應用程式安全執行程序執行時,「來源」標籤不會顯示應用程式檔案

  • AIR Introspector 只能查看本身從安全執行程序開啟的程式碼。