使用 AIR HTML 内部检查器进行调试Adobe® AIR® SDK 包含 AIRIntrospector.js JavaScript 文件,您可以应用程序中包含该文件,协助调试基于 HTML 的应用程序。 关于 AIR 内部检查器Adobe AIR HTML/JavaScript 应用程序内部检查器(称为 AIR HTML 内部检查器)提供了一些有用的功能,可有助于进行基于 HTML 的应用程序的开发和调试工作:
加载 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() 方法类似。不过,当您调用这些方法时,控制台会在行的开头显示图标:
log()、warn()、info() 和 error() 方法仅发送实际对象的引用,因此可用属性是那些查看时的属性。如果要对实际对象进行序列化,请使用 dump() 方法。该方法具有两个参数:
调用 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 变量具有八个属性:
AIR 内部检查器界面在调试应用程序时,若要打开 AIR 内部检查器窗口,请按 F12 键或调用 Console 类的方法之一(请参阅在控制台选项卡中检查对象)。您可以将热键配置为 F12 键之外的键;请参阅配置 AIR 内部检查器。 AIR 内部检查器窗口具有六个选项卡:“控制台”选项卡、HTML 选项卡、DOM 选项卡、“资源”选项卡、“源”选项卡和 XHR 选项卡,如下图所示: 控制台选项卡“控制台”选项卡显示以参数形式传递给 air.Introspector.Console 类方法之一的属性的值。有关详细信息,请参阅在控制台选项卡中检查对象。
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) 可搜索该选项卡中显示的匹配文本。(仅搜索可见树节点。) 源选项卡“源”选项卡包含以下三个部分:
单击“刷新活动窗口”(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 内部检查器,但要遵循以下规则:
|
![]() |