使用 AIR HTML 内部检查器进行调试

Adobe® AIR® SDK 包含 AIRIntrospector.js JavaScript 文件,您可以应用程序中包含该文件,协助调试基于 HTML 的应用程序。

关于 AIR 内部检查器

Adobe AIR HTML/JavaScript 应用程序内部检查器(称为 AIR HTML 内部检查器)提供了一些有用的功能,可有助于进行基于 HTML 的应用程序的开发和调试工作:

  • 它包含一个内部检查器工具,借助此工具,您可以指向应用程序中的用户界面元素,并且可以查看元素的标记和 DOM 属性。

  • 它包含用来发送对象引用以进行内部检查的控制台,并且您可以调整属性值和执行 JavaScript 代码。您还可以针对控制台为对象进行序列化,这将对数据编辑加以限制。您还可以从该控制台复制并保存文本。

  • 它包含 DOM 属性和函数的树视图。

  • 可用于编辑 DOM 元素的属性和文本节点。

  • 它列出了应用程序中加载的链接、CSS 样式、图像和 JavaScript 文件。

  • 可用于查看用户界面的初始 HTML 源代码和当前标记源代码。

  • 可用于访问应用程序目录中的文件。(此功能仅当为应用程序沙箱打开 AIR HTML 内部检查器控制台时才可用。当为非应用程序沙箱内容打开控制台时不可用。)

  • 它包含 XMLHttpRequest 对象及其属性(包括 responseText responseXML 属性(如果可用))的查看器。

  • 您可以在源代码和文件中搜索匹配文本。

加载 AIR 内部检查器代码

AIR 内部检查器代码包含在 AIRIntrospector.js JavaScript 文件中,该文件包含在 AIR SDK 的框架目录中。若要在应用程序中使用 AIR 内部检查器,请将 AIRIntrospector.js 复制到应用程序的项目目录中,并在应用程序的 HTML 主文件中通过脚本标签加载该文件:

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

此外,还要在与应用程序中不同本机窗口相对应的每个 HTML 文件中包含该文件。

重要说明: 仅当在开发和调试应用程序时才包含 AIRIntrospector.js 文件。在分发的打包 AIR 应用程序中删除该文件。

AIRIntrospector.js 文件定义一个 Console 类,您可以通过从 JavaScript 代码调用 air.Introspector.Console 来访问该类。

注: 使用 AIR 内部检查器的代码必须位于应用程序安全沙箱(在应用程序目录的文件中)中。

在控制台选项卡中检查对象

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 内部检查器

您可以通过设置 AIRIntrospectorConfig 全局变量的属性来配置控制台。例如,以下 JavaScript 代码将 AIR 内部检查器配置为按照 100 个字符换行:

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

请务必先设置 AIRIntrospectorConfig 变量的属性,然后再加载 AIRIntrospector.js 文件(通过 script 标签)。

AIRIntrospectorConfig 变量具有八个属性:

属性

默认值

说明

closeIntrospectorOnExit

true

将检查器窗口设置为在应用程序的所有其他窗口都关闭后关闭。

debuggerKey

123(F12 键)

用于显示和隐藏 AIR 内部检查器窗口的键盘快捷键的键控代码。

debugRuntimeObjects

true

将内部检查器设置为除了展开在 JavaScript 中定义的对象之外,还展开运行时对象。

flashTabLabels

true

将“控制台”选项卡和 XMLHttpRequest 选项卡设置为闪烁,以在它们的内容发生变化时(例如,当在这些选项卡中记录文本时)进行指示。

introspectorKey

122(F11 键)

用于打开“检查”(Inspect) 面板的键盘快捷键的键控代码。

showTimestamp

true

将“控制台”选项卡设置为在每行的开头显示时间戳。

showSender

true

将“控制台”选项卡设置为在每行的开头显示有关发送消息的对象的信息。

wrapColumns

2000

对源文件换行时的列数。

AIR 内部检查器界面

在调试应用程序时,若要打开 AIR 内部检查器窗口,请按 F12 键或调用 Console 类的方法之一(请参阅 在控制台选项卡中检查对象 )。您可以将热键配置为 F12 键之外的键;请参阅 配置 AIR 内部检查器

AIR 内部检查器窗口具有六个选项卡:“控制台”选项卡、HTML 选项卡、DOM 选项卡、“资源”选项卡、“源”选项卡和 XHR 选项卡,如下图所示:

控制台选项卡

“控制台”选项卡显示以参数形式传递给 air.Introspector.Console 类方法之一的属性的值。有关详细信息,请参阅 在控制台选项卡中检查对象

  • 若要清除控制台,请右键单击文本并选择“清除控制台”(Clear Console)。

  • 若要将“控制台”选项卡中的文本保存到文件,请右键单击“控制台”选项卡并选择“将控制台保存到文件”(Save Console To File)。

  • 若要将“控制台”选项卡中的文本保存到剪贴板,请右键单击“控制台”选项卡并选择“将控制台保存到剪贴板”(Save Console To Clipboard)。若仅将选定的文本复制到剪贴板,请右键单击相应文本并选择“复制”。

  • 若要将 Console 类中的文本保存到文件,请右键单击“控制台”选项卡并选择“将控制台保存到文件”(Save Console To File)。

  • 若要搜索该选项卡中显示的匹配文本,请单击 Ctrl+F (Windows) 或 Command+F (Mac OS)。(仅搜索可见树节点。)

HTML 选项卡

HTML 选项卡可用于以树结构查看整个 HTML DOM。单击某个元素可在该选项卡的右侧查看其属性。单击 + 和 - 图标可展开和折叠树中的节点。

您可以在 HTML 选项卡中编辑任何属性或文本元素,编辑的值会在应用程序中反映出来。

单击“检查”(Inspect) 按钮(在 AIR 内部检查器窗口中选项卡列表的左侧)。您可以单击主窗口的 HTML 页面中的任何元素,关联的 DOM 对象会显示在 HTML 选项卡中。如果主窗口具有焦点,则您还可以通过按键盘快捷键打开或关闭“检查”(Inspect) 按钮。默认情况下,F11 为键盘快捷键。您可以将键盘快捷键配置为 F11 键之外的键;请参阅 配置 AIR 内部检查器

单击“刷新活动窗口”(Refresh Active Window) 按钮(在 AIR 内部检查器窗口的顶部)可刷新 HTML 选项卡中显示的数据。

单击 Ctrl+F (Windows) 或 Command+F (Mac OS) 可搜索该选项卡中显示的匹配文本。(仅搜索可见树节点。)

DOM 选项卡

DOM 选项卡以树结构显示窗口对象。您可以编辑任何字符串和数值属性,编辑的值会在应用程序中反映出来。

单击“刷新活动窗口”(Refresh Active Window) 按钮(在 AIR 内部检查器窗口的顶部)可刷新 DOM 选项卡中显示的数据。

单击 Ctrl+F (Windows) 或 Command+F (Mac OS) 可搜索该选项卡中显示的匹配文本。(仅搜索可见树节点。)

资源选项卡

“资源”选项卡可用于检查本机窗口中加载的链接、图像、CSS 和 JavaScript 文件。展开这些节点之一将显示文件的内容或显示所使用的实际图像。

单击“刷新活动窗口”(Refresh Active Window) 按钮(在 AIR 内部检查器窗口的顶部)可刷新“资源”选项卡中显示的数据。

单击 Ctrl+F (Windows) 或 Command+F (Mac OS) 可搜索该选项卡中显示的匹配文本。(仅搜索可见树节点。)

源选项卡

“源”选项卡包含以下三个部分:

  • 实际源代码 - 显示应用程序启动时作为根内容加载的页面的 HTML 源代码。

  • 已解析源代码 - 显示构成应用程序 UI 的当前标记,它可能与实际源代码不同,因为应用程序采用 Ajax 技术动态生成标记代码。

  • 应用程序文件 - 列出应用程序目录中的文件。此列表仅当从应用程序安全沙箱中的内容启动 AIR 内部检查器时才可供 AIR 内部检查器使用。在本部分中,您既可以查看文本文件的内容,也可以查看图像。

单击“刷新活动窗口”(Refresh Active Window) 按钮(在 AIR 内部检查器窗口的顶部)可刷新“源”选项卡中显示的数据。

单击 Ctrl+F (Windows) 或 Command+F (Mac OS) 可搜索该选项卡中显示的匹配文本。(仅搜索可见树节点。)

XHR 选项卡

XHR 选项卡截获应用程序中的所有 XMLHttpRequest 通信并记录相关信息。这样,您即可在树视图中查看 XMLHttpRequest 属性(包括 responseText responseXML (如果可用))。

单击 Ctrl+F (Windows) 或 Command+F (Mac OS) 可搜索该选项卡中显示的匹配文本。(仅搜索可见树节点。)

对非应用程序沙箱中的内容使用 AIR 内部检查器

可以将内容从应用程序目录加载到映射到非应用程序沙箱的 iframe 或 frame。(请参阅 Adobe AIR 中的 HTML 安全性 (针对 ActionScript 开发人员)或 Adobe AIR 中的 HTML 安全性 (针对 HTML 开发人员))。您可以对此类内容使用 AIR 内部检查器,但要遵循以下规则:

  • AIRIntrospector.js 文件必须同时包含在应用程序沙箱和非应用程序沙箱 (iframe) 内容中。

  • 请勿覆盖 parentSandboxBridge 属性;AIR 内部检查器代码将使用此属性。根据需要添加属性。因此,请不要按如下方式编写代码:

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

    使用如下语法:

    parentSandboxBridge.mytrace = function(str) {runtime.trace(str)}; 
  • 从非应用程序沙箱内容,您无法通过按 F12 键或调用 air.Introspector.Console 类中的方法之一打开 AIR 内部检查器。您只能通过单击“打开内部检查器”(Open Introspector) 按钮来打开内部检查器窗口。默认情况下,该按钮添加在 iframe 或帧的右上角。(由于对非应用程序沙箱内容施加安全限制,因此只能通过用户执行一定的手势来打开新窗口,如单击按钮。)

  • 您可以为应用程序沙箱和非应用程序沙箱打开单独的 AIR 内部检查器窗口。您可以通过 AIR 内部检查器窗口中显示的标题来区分二者。

  • 当从非应用程序沙箱运行 AIR 内部检查器时,“源”选项卡不显示应用程序文件。

  • AIR 内部检查器只能查看从其打开它的沙箱中的代码。