使用 AIR HTML 内部检查器进行调试
http://help.adobe.com/zh_CN/air/build/WS5b3ccc516d4fbf351e63e3d118666ade46-7ed2.html
-
关于 AIR 内部检查器
-
加载 AIR 内部检查器代码
-
在控制台选项卡中检查对象
-
配置 AIR 内部检查器
-
AIR 内部检查器界面
-
对非应用程序沙箱中的内容使用 AIR 内部检查器
关于 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 内部检查器只能查看从其打开它的沙箱中的代码。
分享到:
相关推荐
它可以帮助我们理解如何在AIR环境中使用Socket类进行网络通信,以及如何处理局域网内的数据传输。源码中包含的文件涵盖了项目配置、ActionScript代码、资源文件等多个方面,下面将一一详解。 【标签】"AIR mac ...
综合以上信息,AirMusic是一个适合搭配苹果设备使用的无线音乐传输器,它支持高质量的音乐播放,具备Wi-Fi连接能力,并且具有良好的用户兼容性与便利性。通过其Web管理界面,用户可以自定义设备名称,并设置热点,...
总的来说,AIR游戏素材提取器RPGViewerBuild103是一个实用的工具,它为游戏开发者和爱好者提供了一种深入探究AIR游戏内部结构的途径。通过学习和使用这款软件,不仅可以提升对游戏开发的理解,也可以为创新和个性化...
此外,Air800车载定位器方案还可能包含相关的开发文档、用户手册、API接口说明等,以便开发者和集成商进行二次开发和系统集成。这些文档将详细介绍如何配置和操作Air800模块,如何对接后台服务器,以及如何实现各种...
9. **调试与测试**: 使用Adobe AIR的内置调试工具或第三方工具进行应用的调试和测试,确保应用在不同环境下的正常运行。 10. **devappshtml.pdf**: 这个文件可能是关于Adobe AIR开发HTML应用的详细指南,包含实际...
7. **调试与测试**:Adobe AIR提供了强大的调试工具,如Adobe Flash Builder的调试器,可以帮助开发者在开发过程中定位和修复问题。对于"Hello World"应用,调试可能包括确保文本正确显示,以及检查JavaScript代码的...
### 使用Adobe AIR进行Android应用开发的关键步骤 #### 1. 准备开发环境 - **安装Adobe AIR SDK**:首先,你需要从Adobe官方网站下载并安装最新版本的Adobe AIR SDK。这包括AIR运行时和SDK工具。 - **配置IDE**:...
7. **开始调试**:现在,你可以使用Eclipse、Android Studio或其他IDE,像连接USB设备一样,选择对应的设备进行无线调试了。在命令行中,你也可以执行各种ADB命令,如安装APK(`adb install`)、查看日志(`adb logcat`...
该参考还包括其他可以通过 window.runtime 对象使用的运行时类,因为它们适用于基于 SWF 的 AIR 应用程序(使用 ActionScript 3.0 显示列表 DOM 而不是 HTML DOM)开发人员。有关其他基于 SEF 的 AIR 应用程序开发的...
本文将深入探讨Air530模块的使用,以及如何通过单片机控制实现继电器的定时开关功能。 首先,Air530模块的核心是GPS接收器,它能够捕获来自天空中多个GPS卫星的信号,通过三角定位算法计算出精确的时间信息。GPS...
### 使用HTML和AJAX开发Adobe AIR 1.5应用程序知识点详解 #### 一、Adobe AIR简介 Adobe AIR(Adobe Integrated Runtime)是一种由Adobe Systems开发的跨平台运行环境,支持使用HTML、CSS、JavaScript以及Flex等...
文档会介绍如何创建新的Flex Air项目,设置项目属性,以及如何使用Builder的内置模板和调试工具。 四、ActionScript 3.0基础 ActionScript是Flex Air的核心编程语言,版本3.0带来了许多改进,包括类型检查、面向...
开发者应使用真机设备进行调试,模拟不同网络条件和使用场景。 【总结】通过将Adobe AIR与AS3结合,开发者可以为iOS用户创建支持AirPlay的交互式应用程序,提供无缝的多设备体验。尽管涉及到的技术细节复杂,但遵循...
- **调试工具**:介绍如何使用Adobe AIR提供的调试工具进行错误排查和性能优化。 - **版本控制**:推荐使用Git等版本控制系统来管理源代码。 - **应用打包与发布**:详解如何将开发完成的应用程序打包并发布到...
8. **调试与测试**:学习使用Adobe AIR的调试工具,如Flash Builder或Flex SDK的命令行工具,进行应用的调试和测试,确保在各种Android设备上能正常运行。 通过深入研究这些源代码,开发者不仅可以掌握Adobe AIR...
这个入门教程是Adobe公司的内部资料,对于想要学习如何使用Adobe AIR进行开发的初学者来说,无疑是一份宝贵的资源。 在“Adobe AIR 入门教程.pdf”中,你可能会学习到以下关键知识点: 1. **Adobe AIR概述**:了解...