adobe air 工程师

The AIR 1.5 update to Adobe’s flagship RIA platform is here, and with it a host of new features to supercharge your development. In this article we’ll look at the fantastic new debugging system, available in the Aptana IDE. Once again there will be a quiz at the end, so pay attention! The first 200 people to submit their answers will receive a copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development (that’s the print version) delivered to their door for free, thanks to Adobe.

AIR 1.5是Adobe旗舰RIA平台的更新版本，它具有许多新功能来增强您的开发能力。 在本文中，我们将介绍Aptana IDE中提供的出色的新调试系统。 再次将有一个测验结束，所以请注意！ 由于 Adobe 的帮助，前200名提交答案的人员将免费免费获得《 用于富Internet应用程序开发的Adobe Flash Platform ActionScript参考 (印刷版)》的副本。

入门 (Getting Started)

Before we begin, make sure you have the latest update to Aptana and to the AIR plugin. You can install these using the instructions in our previous AIR article, under the section, A Powerful Tool for Building AIR Apps.

在开始之前，请确保您具有Aptana和AIR插件的最新更新。 您可以按照以前的AIR文章“用于构建AIR应用程序的强大工具”部分下的说明进行安装。

The latest updates are critical for this tutorial; if in doubt, restart Aptana and check for updates using Help > Check for Aptana Updates Now. You should have at least Aptana Studio 1.2.1 and the Apollo/AIR plugin 1.2.1. Use Help > About Aptana Studio to check your Aptana version, and click on the brown box to check your Aptana AIR version.

最新更新对于本教程至关重要。 如有疑问，请重新启动Aptana并使用“ 帮助”>“立即检查Aptana更新”检查更新 。 您至少应具有Aptana Studio 1.2.1和Apollo / AIR插件1.2.1。 使用“ 帮助”>“关于Aptana Studio”检查您的Aptana版本，然后单击棕色框以检查您的Aptana AIR版本。

Everything we need to take the debugger for a spin is included. We’ll be using the Adobe AIR 1.5 application template, the AIR Introspector framework, and the jQuery framework.

其中包括调试调试器所需的一切。 我们将使用Adobe AIR 1.5应用程序模板，AIR Introspector框架和jQuery框架。

什么是新的？ (What’s New?)

The AIR 1.0 release included a useful but limited debugging tool in the AIR HTML Introspector. With the new tools in the AIR 1.5 debug launcher, Aptana has managed to recreate the debugging workflow in Aptana Studio, and provide step-by-step debugging, breakpoints, watches, and more. In this tutorial, we’ll run through how to debug AIR projects from start to finish. Veteran AIR developers can skip ahead to the Debugging on Wheels section.

AIR 1.0版本在AIR HTML Introspector中包含了一个有用但有限的调试工具。 借助AIR 1.5调试启动器中的新工具，Aptana设法在Aptana Studio中重新创建调试工作流，并提供分步调试，断点，监视等等。 在本教程中，我们将从头到尾介绍如何调试AIR项目。 经验丰富的AIR开发人员可以跳至“车轮调试”部分。

创建一个调试项目 (Creating a Project for Debugging)

Once Aptana is set up, close it, and fire it up again. You should see the opening screen:

Aptana设置完成后，将其关闭，然后再次启动。 您应该看到打开屏幕：

Most of this workbench is irrelevant to AIR debugging, so we can simplify the perspective by closing all the views except Project.

该工作台大部分与AIR调试无关，因此我们可以通过关闭除Project之外的所有视图来简化透视图。

Let’s create a new AIR project; open File > New > Project under Aptana Projects, and select Adobe AIR Project.

让我们创建一个新的AIR项目； 打开Aptana Projects下的File> New> Project ，然后选择Adobe AIR Project 。

Click Next and give your project a name – I’ve chosen “Debug”.

单击下一步 ，为您的项目命名-我选择了“调试”。

Click Next, accept the default Application Properties, and click Next again. The default Window Options should be fine so click Next once more, and the Import AIR Frameworks dialog appears.

单击“ 下一步” ，接受默认的“应用程序属性”， 然后再次单击“ 下一步” 。 默认的“窗口选项”应该很好，因此再次单击“ 下一步” ，将出现“导入AIR框架”对话框。

We’ll need AIRAliases and AIR HTML Introspector for this project. The latter remains unselected by default so add it and click Next.

对于该项目，我们将需要AIRAliases和AIR HTML Introspector。 默认情况下，后者保持未选中状态，因此添加它并单击Next 。

Adobe AIR’s debugging system plays nicely with JavaScript frameworks. Add your framework of choice in the Import JavaScript Library dialog. Hit Finish, and we’re ready to roll!

Adobe AIR的调试系统可与JavaScript框架完美配合。 在“导入JavaScript库”对话框中添加您选择的框架。 点击完成 ，我们准备开始了！

跟踪脚本执行 (Tracking Script Execution)

Aptana has created a set of sample files to demonstrate the AIR platform. Here’s what our workbench looks like at the moment:

Aptana已创建了一组示例文件来演示AIR平台。 这是我们当前的工作台外观：

In particular, we now have a Debug.html file (or similar, depending on your project name), complete with JavaScript examples and references to our AIR frameworks. One of the examples uses the readLocalFile function, so let’s add some debugging notes to that. Update it to add the calls to air.trace, as shown below:

特别是，我们现在有了一个Debug.html文件(或类似文件，具体取决于您的项目名称)，其中包含JavaScript示例和对我们AIR框架的引用。 其中一个示例使用readLocalFile函数，因此让我们readLocalFile添加一些调试说明。 更新它以将调用添加到air.trace ，如下所示：

function readLocalFile(){var f = air.File.applicationDirectory.resolvePath("LocalFile.txt");  air.trace("Opening LocalFile.txt in applicationDirectory");  var fs = new air.FileStream();  fs.open(f, air.FileMode.READ);  var content = fs.readUTFBytes(fs.bytesAvailable);  fs.close();  air.trace("Read contents of LocalFile.txt: " + content);  return content;  
}

Save the file, and launch it using the Run Debug button:

保存文件，然后使用“运行调试”按钮启动它：

Our application window appears:

出现我们的应用程序窗口：

Click the Read a local file using AIR APIs button. The file is read and the alert window appears:

单击“使用AIR API读取本地文件”按钮。 读取文件并显示警告窗口：

Click OK (or similar, depending on your OS), and head back to Aptana. The Console view should appear below your code window.

单击确定 (或类似操作，具体取决于您的操作系统)，然后返回Aptana。 控制台视图应出现在您的代码窗口下方。

The AIR architecture closely mimics the Flash debugging approach – applications can “trace” messages, which are then sent back to the parent application, typically the AIR Debug Launcher (“ADL”). In this case, Aptana receives these debugging messages and sends them to the Console view.

AIR体系结构非常类似于Flash调试方法-应用程序可以“跟踪”消息，然后将消息发送回父应用程序，通常是AIR Debug Launcher(“ ADL”)。 在这种情况下，Aptana会收到这些调试消息，并将它们发送到控制台视图。

Of course, dumping text to a console is useful, but what if we want to look inside the script execution, and examine objects? Bring on the AIR HTML Introspector, the Firebug of the AIR world.

当然，将文本转储到控制台很有用，但是如果我们想查看脚本执行内部并检查对象怎么办？ 引入AIR HTML Introspector，这是AIR世界的Firebug。

在运行时探索 (Exploring at Runtime)

Head back to your open Application Sandbox sample window, and hit F12. The AIR HTML/JS Application Introspector window appears:

回到您打开的“应用程序沙箱”示例窗口，然后单击F12。 出现AIR HTML / JS Application Introspector窗口：

The Introspector includes a JS console, a DOM tree and node inspector, and a look at the source (including parsed source) of files in the AIR project. There’s also an XMLHttpRequest monitor to keep an eye on AJAX requests. Most importantly, the Introspector has an API that we can use right from within our AIR application. Head back to the readLocalFile function we modified earlier, and change it to this:

Introspector包括一个JS控制台，一个DOM树和节点检查器，以及对AIR项目中文件的源(包括解析后的源)的查看。 还有一个XMLHttpRequest监视器来监视AJAX请求。 最重要的是，Introspector拥有一个可以在AIR应用程序中直接使用的API。 回到我们之前修改的readLocalFile函数，并将其更改为：

function readLocalFile(){var f = air.File.applicationDirectory.resolvePath("LocalFile.txt");  air.Introspector.Console.log("Opening LocalFile.txt in applicationDirectory");  var fs = new air.FileStream();  fs.open(f, air.FileMode.READ);  var content = fs.readUTFBytes(fs.bytesAvailable);  air.Introspector.Console.info(fs);  fs.close();  return content;  
}

Close the AIR application, save Debug.html, and click the Run button again. When the application opens, click the Read a local file button once more, but watch for the Introspector window – it might be hidden in your dock or taskbar. You might need to hit F12 to find it, and click the Read a local file button once again if the console is empty. Now, the Introspector window has two new entries:

关闭AIR应用程序，保存Debug.html ，然后再次单击“ 运行”按钮。 当应用程序打开时，再次单击“ 读取本地文件”按钮，但请注意Introspector窗口-它可能隐藏在扩展坞或任务栏中。 您可能需要按F12键才能找到它，如果控制台为空，请再次单击“ 读取本地文件”按钮。 现在，“ Introspector”窗口具有两个新条目：

Logging our debug messages to the console is useful, but the Introspector can go one step further: have a look at the [object FileStream] in the console window. This indicates that we’ve sent a FileStream object – sure enough, var fs = new air.FileStream() — to the console. Click the gray plus symbol (+) on the second line to view the object.

将调试消息记录到控制台很有用，但是Introspector可以更进一步：在控制台窗口中查看[object FileStream] 。 这表明我们已经向控制台发送了一个FileStream对象-足够肯定， var fs = new air.FileStream() 。 单击第二行上的灰色加号(+)以查看该对象。

You can inspect objects and manipulate them in real time using the >>> prompt at the bottom of the window. For example, we could choose to keep our file stream open during the script, call a few of the methods of the object from the console (by assigning the object a reference in a global variable), and then run fs.close() manually once we’re done.

您可以使用窗口底部的>>>提示来检查并实时操作对象。 例如，我们可以选择在脚本运行期间保持文件流打开，从控制台调用对象的一些方法(通过在全局变量中为对象分配引用)，然后手动运行fs.close()一旦完成。

So we can keep an eye on the script execution, and even have a peek inside. But what about managing code execution? What if we could simply pause our JavaScript and have a look from the inside out? Let’s have a look at the latest in this update of the Aptana plugin, the debugging platform integration.

因此，我们可以密切注意脚本的执行，甚至可以一窥内部。 但是如何管理代码执行呢？ 如果我们可以简单地暂停JavaScript并从内到外看一下该怎么办？ 让我们来看看Aptana插件的最新更新，即调试平台集成。

车轮调试 (Debugging on Wheels)

With the AIR 1.5 update and the Aptana Studio 1.2.1 release, Aptana and Adobe have created an amazing debugging platform, taking advantage of the power of Eclipse to give developers more features than ever. Let’s have a look at just how this new platform can help.

通过AIR 1.5更新和Aptana Studio 1.2.1版本，Aptana和Adobe创建了一个了不起的调试平台，利用Eclipse的功能为开发人员提供了前所未有的功能。 让我们看看这个新平台如何提供帮助。

Close our sample AIR application and return to the Debug.html editor. The left margin on the editor actually has two columns – one for code folding, one for breakpoints. On line 17, the second air.Introspector.Console line, double-click on the left side of the margin. A blue dot appears:

关闭示例AIR应用程序，然后返回Debug.html编辑器。 编辑器的左边距实际上有两列-一列用于代码折叠，一列用于断点。 在第17行上，第二个air.Introspector.Console行，双击页边距的左侧。 出现一个蓝点：

This sets a breakpoint, or a point during which script execution will suspend and allow us some breathing time. Now, save Debug.html and run your application using the Debug button instead of Run:

这设置了一个断点，或脚本执行将暂停并允许我们喘口气的时间。 现在，保存Debug.html并使用Debug按钮而不是Run运行您的应用程序：

When the application window opens, click the Read a local file button. This time, the window freezes and Aptana Studio appears with a dialog box:

当应用程序窗口打开时，单击“ 读取本地文件”按钮。 这次，窗口冻结，并且Aptana Studio出现一个对话框：

The Debug perspective is a standard feature of the Eclipse debug system, which Aptana has managed to tightly integrate with the Adobe AIR SDK. Click Yes to confirm the perspective switch; the debug perspective is well set up to enable debugging. Aptana will rearrange the workbench till it looks like this:

Debug透视图是Eclipse调试系统的标准功能，Aptana设法将其与Adobe AIR SDK紧密集成。 单击“是”确认透视开关； 调试透视图已正确设置以启用调试。 Aptana将重新布置工作台，直到它看起来像这样：

While the debug perspective presents quite a busy interface, you’ll appreciate having this power at your fingertips later. Let’s have a look at the different views in this perspective.

尽管调试透视图提供了一个非常繁忙的界面，但是您稍后将可以使用此功能。 让我们看看这种观点的不同观点。

The Debug view (no relation to our project name) provides a basic stack and control panel for script execution. Here, it lists the AIR Debugger control, which manages the script execution thread, as well as the AIR Debug Launcher (ADL) server. Clicking any of the entries in the stack trace will navigate the open editor panel to the correct file and line, helping you quickly walk through code.

Debug视图(与我们的项目名称无关)为脚本执行提供了基本的堆栈和控制面板。 在这里，它列出了用于管理脚本执行线程的AIR Debugger控件以及AIR Debug Launcher(ADL)服务器。 单击堆栈跟踪中的任何条目，将在打开的编辑器面板中导航到正确的文件和行，从而帮助您快速浏览代码。

The Variables view will display any variables and objects in the current scope. Similar to the AIR Introspector, you can use this to inspect objects. Notice variables inside our readLocalFile function, including our FileStream object from earlier, are included. As they’re standard JavaScript objects, you can freely open them up and examine their internals.

“变量”视图将显示当前作用域中的所有变量和对象。 与AIR Introspector相似，您可以使用它来检查对象。 请注意，其中包括了readLocalFile函数内部的变量，包括之前的FileStream对象。 由于它们是标准JavaScript对象，因此您可以自由地打开它们并检查其内部。

Docking this view fails to do it justice. Right-click on the Variables title tab, click Detached, and resize the resulting window as you see fit. (Alternatively, you can dock it to the side of the workbench, in return for horizontal screen real estate.) Much better.

对接这种观点并不能做到公平。 右键单击“变量标题”选项卡，单击“分离”，然后根据需要调整结果窗口的大小。 (或者，您可以将其停靠在工作台的侧面，以换取卧式屏幕空间。)好得多。

(You can always find this view again using Window > Show View or Alt + Shift + Q – V)

(您始终可以使用“ 窗口”>“显示视图”或Alt + Shift + Q – V再次找到此视图)

Expressions is next. Similar to Variables, Expressions allows you to watch the value of an expression in real time. This could be a simple variable, or it could be a function call. For example, I often use the Expressions view to check DOM nodes on a page matching a certain CSS selector while jQuery is loaded. To use the Expressions view, add Watch Expressions using the first button in the mini toolbar.

接下来是表达式。 与变量类似，表达式使您可以实时观察表达式的值。 这可以是一个简单的变量，也可以是一个函数调用。 例如，当加载jQuery时，我经常使用Expressions视图检查与特定CSS选择器匹配的页面上的DOM节点。 要使用“表达式”视图，请使用迷你工具栏中的第一个按钮添加“监视表达式”。

Let’s create a Watch Expression. But first, let’s resume the script execution: hit the Resume button back on the Debug view.

让我们创建一个监视表达式。 但是首先，让我们继续执行脚本：在“调试”视图上单击“ 继续”按钮。

The alert box reporting This is the content of LocalFile.txt will appear, but it may be hidden under your Aptana window. Seek it out and hit the OK button, or your AIR application will object. Our AIR application is now back in action, and the Debug view will report a “Thread [main] (Running)“; we’re now ready to add an expression. Try a simple one, like window.innerHeight, and explore the result.

警报框报告“ 这是LocalFile.txt的内容”将出现，但可能隐藏在您的Aptana窗口下。 找出并单击“ 确定”按钮，否则您的AIR应用程序将反对。 现在，我们的AIR应用程序已恢复运行，并且Debug视图将报告“ Thread [main](Running) ”； 我们现在准备添加表达式。 尝试一个简单的window.innerHeight ，例如window.innerHeight ，然后探索结果。

We have an excellent set of tools to debug our JavaScript, but what about our HTML itself? This is where the Outline view comes in. Using the Outline panel, you can inspect the structure of DOM nodes that make up your page. You can even look inside certain nodes, and inspect JavaScript objects defined or referenced in script tags. Similarly, the Loaded Scripts view shows defined functions on a file-by-file basis.

我们有一套出色的工具来调试JavaScript，但是HTML本身呢？ 这就是“大纲”视图的所在。使用“大纲”面板，您可以检查组成页面的DOM节点的结构。 您甚至可以查看某些节点的内部，并检查在脚本标记中定义或引用JavaScript对象。 同样，“加载的脚本”视图逐个文件显示定义的功能。

Finally, we have the usual Console view. If we use the AIR trace debugging approach instead of the Introspector, we can send output to the console. This is even exposed to the Flash Player runtime when evaluating expressions, so you can create a complex expression with an embedded function and send some output to the console. Debug while you debug!

最后，我们具有通常的控制台视图。 如果我们使用AIR跟踪调试方法而不是Introspector，则可以将输出发送到控制台。 在评估表达式时，这甚至会在Flash Player运行时中公开，因此您可以创建带有嵌入式函数的复杂表达式，并将一些输出发送到控制台。 在调试时进行调试！

最后的想法 (Final Thoughts)

AIR debugging has come of age. The AIR toolchain in Aptana is extremely versatile, and even serves as a fantastic debugging environment for standard web pages, courtesy of the full-fledged JavaScript engine and WebKit renderer built in to the AIR platform. The new debugging platform is just as powerful as the Flex debugging system included in Flex Builder 3; it rounds off AIR as a powerful web-based platform, a demonstration of the power of JavaScript, and a must-see for all web developers.

AIR调试已经成熟。 Aptana中的AIR工具链功能极为丰富，甚至可以作为标准网页的绝佳调试环境，这要归功于AIR平台内置的成熟JavaScript引擎和WebKit渲染器。 新的调试平台与Flex Builder 3中包含的Flex调试系统一样强大。 它使AIR成为一个强大的基于Web的平台，JavaScript的强大功能的展示以及所有Web开发人员的必看之选。

In the mean time, test yourself on the contents of this article by taking the quiz. The first 200 people to submit their answers will receive a print copy of The Adobe Flash Platform ActionScript Reference for Rich Internet Application Development, delivered to their door for free, courtesy of Adobe. Take the quiz now!

同时，通过测验对本文的内容进行自我测试。 前200名提交答案的人员将免费获得Adobe提供的Adobe Flash Platform ActionScript参考，用于Rich Internet Application Development的印刷版。 立即参加测验！

翻译自: https://www.sitepoint.com/debugging-adobe-air-application/

adobe air 工程师