使用 AIR HTML Introspector 除錯Adobe® AIR® SDK 包含一個名為 AIRIntrospector.js 的 JavaScript 檔案,可加至應用程式中來協助進行 HTML 類型應用程式除錯。 關於 AIR IntrospectorAdobe AIR HTML/JavaScript Application Introspector (稱為 AIR HTML Introspector) 提供實用的功能,可協助 HTML 類型應用程式的開發和除錯:
載入 AIR Introspector 程式碼AIR Introspector 程式碼包含在 JavaScript 檔案 AIRIntrospector.js 中,該檔案位於 AIR SDK 架構目錄內。若要在應用程式中使用 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 類別定義五個方法: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() 方法相同。不過,當您呼叫這些方法時,「主控台」會在列開頭顯示一個圖示:
log()、warn()、info() 和 error() 方法僅會傳送參考至實際物件,因此可用的屬性只限於檢視當時那些屬性。如果您要序列化實際物件,請使用 dump() 方法。這個方法有兩個參數:
呼叫 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 個屬性:
AIR Introspector 介面若要在進行應用程式除錯時開啟 AIR Introspector 視窗,請按 F12 鍵或呼叫 Console 類別中的其中一個方法 (請參閱檢查主控台標籤中的物件)。您可以將快速鍵設成 F12 以外的按鍵,請參閱設定 AIR Introspector。 下圖顯示 AIR Introspector 視窗包含的 6 個標籤 — 主控台、HTML、DOM、資源、來源和 XHR: 主控台標籤主控台標籤顯示當作參數傳遞至 air.Introspector.Console 類別其中一個方法的內容值。如需詳細資訊,請參閱檢查主控台標籤中的物件。
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) 可以搜尋顯示在標籤中的相符文字 (看不到的樹狀介面節點不會被搜尋)。 來源標籤「來源」標籤包含三個區段:
按一下「重新整理作用中視窗」按鈕 (位於 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,但必須遵循下列規則:
|
![]() |