这是一篇来自Adobe开发者中心的文章，由RIAMeeting社区翻译小组王贺翻译，原文地址是：

http://www.adobe.com/devnet/flex/articles/flashbuilder4_debugging_part1.html

调试是在你的程序中查找和解决错误和问题的过程。 调试通常是一个艰难的令人沮丧的任务，但是在调试器的帮助下，它会变得很容易。调试器是一个软件工具，允许你监控和控制程序的执行，一步步的运行代码，并显示变量的变化情况。

FlashBulider 4中内建了调试器，和调试视图，你将在这个三部分的系列教程中学习如何使用。

在第一部分，你将会：

• 进入后面的项目看看程序是如何运行的。
• 导入前面的那个项目，查看这个初始的，有问题的绘图程序的代码。
• 在Flash Builder的控制台视图中观察调试版本的Flash Player的运行时错误信息。
• 使用trace()打印调试信息到控制台视图中。

在第二部分中，你将会：

• 使用断点使程序运行到你指定的代码行时暂停。
• 使用新增的条件断点。
• 使用断点视图来管理断点。
• 通过暂停，恢复和终止来控制代码的执行。
• 使用进入，跳过，和返回命令来实现代码之间的跳转。

在第三部分，你将会：

• 使用变量视图检查变量的值。
• 在调试过程中改变变量的值做修正测试。
• 使用表达式视图来观察指定的变量在表达式作用下的值变化。
• 使用新的观察点功能，使代码执行过程中在指定的值发生变化的时候暂停。
• 使用新的跳转到指定行（Run to Line）命令来跳出循环，并跳转到指定的代码行。

教程必备

要完成本教程，你需要以下东西：

Flash Builder 4 beta

• 下载
• 了解更多

示例文件：

• Flex4Debugging_start.zip (ZIP 25 KB)
• Flex4Debugging_solution.zip (ZIP 25 KB)

预备知识

具备基本的创建Flex 4程序的知识将会很有帮助。 想要了解更多关于创建和个性化Flex 4应用程序的内容，请查阅Flex 4文档，一周入门Flex 4系列视频和联系，以及访问Flex开发者中心。

关于作者

Jeanette Stallons是一个独立的Flex培训师及顾问，她已经在很多家公司做过了培训，包括Adobe，Oracle，Boeing，Wachovia，Morgan Stanley，和Charles Schwab。 在这之前，Jeanette供职于Allaire，Macromedia以及Adobe的培训部门，构建，编写，教授和创建Flash和Flex程序，以及其他产品。 她最近的项目是为Adobe Flex学习之路应用程序提供一如既往的想法，编程支持，和专家级的内容。

引入前后两个Flex项目。

在这个部分里，你将在Flash Builder中引入属于同一个程序的两个Flex项目，用于根据鼠标点击和移动操作绘制多边形。 前面的这个项目现在不能正常工作，后面的这个项目可以正常工作。 后面的这个项目用于作为参考。 你将会在前面的这个程序中进行这个系列教程中的调试。

1. 如果你还没有准备好，请先下载和安装Flash Builder 4 beta
2. 如果你准备好了，下载示例文件和解决文件并解压缩。
3. 打开Flash Builder
4. 选择文件 > 导入Flex项目（FXP）。
5. 在弹出的导入项目对话框里，点击文件旁边的浏览按钮。
6. 在弹出的对话框中，找到你保存在本地的Flex4DebuggingTutorial_EndProject.fxp文件，选中，并点击打开。

• 回到导入Flex项目的对话框，点击完成（见图1）。

图1 导入一个Flex项目。

• 在包资源管理器中，点击箭头展开Flex4DebuggingTutorial_EndProject这个项目，src,（默认包），一直到你找到Drawing.mxml文件（见图2）。

图2 定位到程序主文件。

9. 双击打开Drawing.mxml文件。
10. 要编译和测试程序，请点击主工具栏上的绿色运行按钮，或者选择运行 > 运行Drawing 一个浏览器窗口将会被打开，你会看到你的应用程序。
11. 点击并拖拽你的鼠标进行绘图。

• 使用右上角的控制面板开变换绘制形状和颜色，然后再画画看（见图3）。

图3 使用绘图程序

13. 在包资源管理器中右键点击Flex4DebuggingTutorial_EndProject,然后选择关闭项目。 关闭这个项目将会避免你在用另外的项目工作时意外的被未关闭的项目干扰。
14. 重复4-9的步骤导入Flex4DebuggingTutorial_StartProject.fxp。

• 运行程序。 你将会得到一个运行时错误（见图4）

注意：如果你只看到了图4中的弹出错误信息，请检查你是否安装了调试版本的Flash Player. 通常只有Flash和Flex开发者使用这个版本。 使用普通版本Flash Player的用户看不到这些信息；他们的应用程序只是不能工作了而已。

图4。 获得一个运行时错误。

16. 点击取消所有按钮。
17. 回到Drawing.mxml中（在starting项目中！）并检查代码。

这个程序是基于监听和响应鼠标的按下，移动和鼠标释放事件的。 当用户按下了鼠标按钮时，一个鼠标移动的监听器就被添加了。 在这个onMouseMove监听器中，创建了一个Shape类的实例（com.adobe.samples.shapes包中的一个圆，方形，或者一个星形），使用绘图API在用户鼠标所在的位置绘制一个图形。 当使用释放了鼠标按钮后，onMouseMove监听器就被移除了，所以不再有图形被绘制出来。 这个程序在右上角有个控制面板，允许用户选择不同的画笔形状，改变颜色，以及清空画板。

注意：这个程序是在重构Flex 4程序教程的基础上将代码全部放置在一个文件中重构而成的。

调试一个程序。

要在Flash Builder里面调试一个程序，你需要两样东西：调试版的Flash Player，和调试版的你的swf文件。

当你安装了Flash Builder后，适用于不同浏览器的调试版的Flash Player也同时被安装在你的系统中了。 你也许会需要手工的安装一个调试版的Flash Player,例如你想在安装Flash Bulider之后为你的浏览器安装一个更新发布的非调试版的Flash Player，或者你只是想安装一个比FlashBuilder捆绑的版本更新的版本。 在Flash Builder中，如果你在尝试调试一个程序的时候被发现没有安装调试版的Flash Player时，会得到一个错误提示信息。 你也可以通过右键点击一个运行在浏览器中的swf文件，然后查看弹出的菜单（你会看到菜单选项中有调试器）或者使用flash.system.Capabilities.isDebugger()函数在代码中获得做出。 要安装最新的调试版Flash Player，请访问Flash Player下载页面，运行反安装程序，随后选择适合你浏览器的版本进行安装。

当你使用Flash Builder运行，调试或者只是编译了一个程序后，Flash Builder就会创建一个调试版本的程序的SWF文件，并将它存放在项目的bin-debug文件夹中。 这个swf文件比非调试版的要大一些，因为其中包含了一些用于调试的附加的代码和元数据。 这是你在调试程序时要使用的SWF文件。 当你完成了调试，并准备发布你的程序时，别忘了通过选择，项目 > 导出发行版，来创建一个更小的，非调试版本的swf文件。

要调试一个程序，请点击主控制栏上的调试工具取代运行工具，或者选择运行 > 调试。 当你运行这个程序的时候，它在一个浏览器窗口中被打开，不过现在当Flash Player遭遇任何错误和警告时，都被显示在Flash Builder的控制台中。

• 点击主工具栏上的调试按钮（见图5），或者选择调试 > Drawing.

图5 调试程序。

一个浏览器窗口将被打开，你可以回到Flash Builder中，你会看到一个弹出对话框询问你是否要切换到调试视图（见图6）。 如果你没有马上切换回Flash Builder,你可以在任务栏中选中它的标签。

图6。 切换到调试视图。

• 如果你看到了一个询问是否切换到调试视图的对话框时，记得选中“记住我的决定”，这样你就不必每次都在切换到调试视图的时候都看到这个对话框并点击“是”了。Flash Bulider切换到调试视图比在开发视图时多了一些不同的面板。（见图7）

图7。 观察调试视图。

注意：你的面板们也许和图示排列的有些许不同。 你可以通过拖拽并将面板放置在不同的位置来重新排列它们。 你可以通过窗口 > 透视图 >复位透视图来恢复到默认的布局。

• 可以点击右上角的Flash标签切换回开发视图。（见图8）。

图8. 在开发和调试视图之间切换。

4. 再点击右上角的Flash Debug标签切换回调试视图。（见图8）。

• 如果你没看到这两个标签，在标签的左边缘点击，并向左拖拽它。（见图9）。

图9 确认两个视图标签都显示出来。

• 我们来看看控制台视图。 你将会看到在你运行程序时出现在浏览器中的错误信息此刻出现在这里。 从错误信息中，你会发现有对象在尚未被创建的时候被引用了。

图10 在控制台视图中查看错误信息。

• 在编辑视图中查看代码。 第18行被高亮显示标明这里是错误发生的地方。 标记栏中的箭头指向这一行，表示代码执行到这里的时候被停止了。 当使用ColorPicker的实例的selectedColor 属性为指定的shapeColor 赋值时出现了问题。

图11 在代码中定位错误发生的地方。

• 定位到定义ColorPicker 的第66行，colorSelector 是ColorPicker对象的名称。

出现在第18行的问题是因为在ColorPicker被初始化之前就执行了，所以colorSelector根本就还不存在，你也无从引用它的属性。

9. 可以通过点击红色的终止按钮，或者选择 运行 > 终止，来结束调试进程。

• 修改第18行代码，给shapeColor 一个初始值，黑色：

private var shapeColor:uint=0x000000;

11. 再次调试程序。 你将不会再在浏览器或者Flash Builder 的控制台视图中看到运行时错误了。

• 试试画一些图形看看。

没有任何图形被画出来。 你解决了一个问题，但是还有更多的问题等待查找和解决。

13. 终止调试进程。

跟踪变量和表达式。

下面，你需要确认剩下的代码是否被正确的执行了。 有一种检查函数中的代码是否被执行，显示变量和表达式的值的方法是使用trace函数，在这里你将会用到它。 在过去没有调试器ide(集成开发环境)的日子里，这是在基于Flash平台的开发中能使用的唯一的调试方法。 现在，有了调试器，你也可以检查这个函数是不是被调用了，在指定的函数位置设置断点查看变量的值，实现在程序内部做调试。 你将会在系列教程的下一个部分用到断点。
要使用trace函数，你需要传递给它一个字符串，一个变量，或者一个需要判断的表达式。 结果在调试程序时被显示在控制台视图中。

• 在init函数中，打印字符串“in init”,插入到下面加粗的代码处：

private function init():void{%!=5c83137c-b441-4054-be25-038dc149a7e0=!%}trace("in init");addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);...

• 调试程序，并查看控制台视图（见图12）。 根本没看到你的字符串…… 在init()函数中的代码没有被执行。

图12 在控制台视图中查看你输出的字符串。

6. 查看Application 标签 init()函数并没有被调用。

• 将Application标签的creationComplete 时间的处理器设置成init函数。

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()" >

• 停止调试进程，然后再次调试这个程序，并查看控制台视图（见图13） 你会看到你的字符串被打印出来了，init函数这次被成功的调用了。

图13 在控制台视图中找到输出的字符串。

13. 回到浏览器中，试试画一些图形。 你仍然画不出任何图形；仍然有bug需要修复。
14. 回到FlashBuilder中，并终止调试进程。

我们还可以知道些什么呢？

在这第一段教程中，你学习到了使用Flash Builder 4调试Flex 4程序的基本知识。 使用调试器，调试视图，控制台视图，和trace函数。

在第二部分中，你将会学习如何使用断点暂停运行中的代码，和如何通过单步跳入，单步跳过，单步返回和继续来控制代码的执行。

在第三部分，你将会使用观察点，变量视图来查看和修改变量的值，以及利用表达式视图来查看指定的变量和表达式。