调试Flex 4程序-- 第三部分：变量视图，观察点，和定位到指定行命令

[ADC文章]调试Flex 4程序-- 第三部分：变量视图，观察点，和定位到指定行命令

  发表于 2011-7-13 19:54:12  | 只看该作者  | 倒序浏览

这是一篇来自Adobe开发者中心的文章，由RIAMeeting社区翻译小组王贺翻译，原文地址是： http://www.adobe.com/devnet/flex/articles/flashbuilder4_debugging_part3.html 在这个分为三部分的系列教程的最后一部分中，你将学习使用变量视图观察点，和跳转到某一行命令。 在系列教程的第一部分，你导入的项目在本部分中同样适用，进而学习更多的基本调试知识。 在第二部分，你学习了使用断点和单步调试代码。 在第三部分，你将会： 使用变量视图检查变量的值。 在调试过程中改变变量的值做修正测试。 使用表达式视图来观察指定的变量在表达式作用下的值变化。 使用新的观察点功能，使代码执行过程中在指定的值发生变化的时候暂停。 使用新的跳转到指定行（Run to Line）命令来跳出循环，并跳转到指定的代码行。 必要条件 要完成本教程，你需要以下东西： Flash Builder 4 beta 下载 了解更多 示例文件： Flex4Debugging_start3.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学习之路应用程序提供一如既往的想法，编程支持，和专家级的内容。 使用变量视图 在第二部分，你通过添加断点来暂停和单步执行代码。 当代码被暂停时，你可以使用变量视图来查看当前选定的堆栈帧位置的变量的值（无终端函数） 也可以使用变量视图在调试期间观察变量以及修改变量的值。 检查变量的值 当代码被一个断点停止时，你可以通过变量视图查看变量的值。 打开在第一和第二部分教程中使用过的，Flex4DebuggingTutorial_StartProject Flex项目中的Drawing.mxml 注意：如果你还没有完成第二部分教程，请下载Flex4Debugging_start3.zip，解压缩它，然后导入FXP项目到Flash Builder中。 首先，确保在Drawing.mxml代码的第34行有一个断点。 如果没有的话，就加上一个。 选择 运行 > 调试Drawing 来调试程序。 改变图形的颜色，变成出了黑色之外的颜色，然后绘制一些图形。 你将被切换回Flash Builder的调试器。 点击变量标签来打开变量视图（见图1）。 你应该可以看到三个变量：this,e和shape. 第一个变量时this,是这个Drawing程序的实例本身。 第二个是e,onMouseMove函数的句柄，是一个MouseEvent 类的实例。 第三个变量是shape，是一个onMouseMove函数中的局部变量，在函数的最开头，它是null 图1 查看变量视图。 双击变量标签，这样它可以以全屏的方式展现在Flash Builder里。 点击旁边的箭头来显示MouseEvent实例的所有属性和它们的值。 红色的方块表示私有属性。 绿色的圆圈表示公共属性。 图2 查看对象的属性和值。 点击[inherited]旁边的箭头。 默认情况下父类的元素被折叠在一个树的节点中，以便于能一次显示更多的变量。 再次双击变量标签就在Flash Builder中变回了原来的尺寸。 在变量视图中，点击树节点旁边的箭头来折叠隐藏属性。 我们看看shape的值（现在是空）。 点击单步跳入按钮，然后再点击单步跳过按钮。 你可以看到这时候shape 的值变成一个com.adobe.samples.shapes.Circle 类的实例了，（见图3） 图3 注意shape的新值。 点击shape旁边的小箭头，然后点击它的继承属性旁边的箭头查看它的继承属性。 滚动，并查看所有的属性。 在变量视图的任意位置右键点击并选中查找（见图4） 图4. 查找一个变量 在查找对话框中，输入sh然后查看变量。 你应该可以看到shapeColor 属性（见图5）. 图5 查找shapeColor变量。 选择shapeColor 并点击确认。在变量视图中，shapeColor 属性现在被选中了。 这是你在程序中使用ColorPicker选取的颜色。 个性化变量视图。 默认情况下变量视图显示属性的名字和值，当你选中一个属性时，这个属性的值被显示在变量视图的下方。 你可以个性化这个视图，改变成员来决定显示这个成员的哪些信息。 在变量视图中，点击工具栏上的查看菜单按钮，并选择布局 > 选择列。（见图6）. 图6. 修改显示在变量视图中的列。 在对话框中选中列，选中定义类型，并点击确认（见图7）. 你将会看到在变量视图中出现了一个附加的列，并显示了变量的值定义类型。 图7 选择列。 折叠其shape的树，并展开它的变量。 你会看到在ActionScript中定义的属性（例如selectedShape 和shapeColor）和在MXML 中定义的属性（例如shapeCanvas 和shapeSelector） 可是你没有看到SHAPES 常量。 再次在工具栏中点击查看菜单按钮选择Flex >显示常量（见图8）. 图8. 改变变量视图中显示的成员。 现在你可以看到SHAPES常量显示在列表中（见图9）. 图9 在变量视图中显示常量。 终止调试进程。 改变变量值。 除了能在变量视图中查看变量的值之外，你还可以在调试器中改变变量的值。 调试程序，并尝试绘制一些圆形。 然后就跳回了Flash Builder中 在变量视图中，选中selectedShape变量 现在它的值是"circle" 右键点击selectedShape 并选择改变值（见图10）。 你可以通过直接点击当前变量视图中的值来修改。 图10 改变属性的值。 在设置值的对话框中，输入star然后点击确认（见图11） 图11 将selectedShape设置为star. 查看在变量视图中的selectedShape 值。 现在它从"circle"变成了"star"。 现在看看代码编辑器中，代码暂停在第34行。 点击单步跳入按钮。 条件判断块部分的selectedShape=="circle"现在被跳过了，代码跳转到第37行（检查形状是否是方块的部分）。 点击单步跳入两次，进入到 selectedShape=="star" 的代码情况中，接着点击单步跳过。 这此不是再创建一个Circle类的示例，而是一个Star类的实例被创建。（见图12）. 图12 创建一个Star 类的对象而不是一个Circle类对象。 让程序继续悬停这，然后进行你程序的下面的步骤。 使用表达式视图。 在代码执行的时候，你也可以不查看所有属性的值，而是指观察一个，或者多个满足条件的变量。 比起在一大堆各种各样的变量中把你想观察的变量找出来，更便捷的方法是使用表达式视图把它通过条件过滤出来。 除了可以在这个视图中查看变量之外，你也可以查看表达式的值。 观察变量的值。 你可以在变量视图或者代码编辑器中指定一个被观察的变量。 在变量视图中，展开shape节点，和它的继承节点。 定位到size属性（通过滚动和查找）。 右键点击并选择观察（见图13）。 图13 从变量视图中创建一个观察表达式。 现在你可以看到在表达式视图中的属性了。（见图14） 图14 在表达式视图中选择观察点。 回到代码编辑器，并定位到引用selectedShape 属性的地方，第18行。 双击选中它，然后右键单击，并选择，创建一个观察表达式。（见图15） 现在你可以在表达式视图中看到两个属性了。 图15. 在代码编辑器中创建一个观察表达式。 点击继续按钮。 视图中的两个属性被移除了，因为你已经不在任何一个函数的代码范围内。 回到浏览器中，并移动鼠标。 然后就跳回了Flash Builder中 再次查看表达式视图。 shape的size变量在被赋值的过程中出现了错误，因为它还不存在。 就是这儿了，一个selectedShape的值。 右键点击在第43行的断点，然后选择启用断点（如果这儿还没有断点你就添加一个）。 点击继续按钮，让代码从第34行跳到这个断点的位置（第43行）在这个图形被创建之后。 你将会看到一个分配给shape.size的值（如果是圆形则这个值是10，如果你选择了星型或方形，这个值为20） 赋值表达式。 在前一节中，你添加了要在表达式视图中观察的变量。 从变量视图，和代码编辑器中你都可以选择想要观察的变量。 同样也可以在表达式视图自身内部选择想要观察的变量和表达式. 右键点击表达式视图，并选择添加观察表达式（见图16）。 在表达式视图的工具栏上也有一个新建观察表达式。 图16 在表达式视图中添加一个观察表达式。 在添加观察表达式对话框中，输入shape.shapeColor然后点击确认（见图17）。 新的表达式就被添加到表达式视图中了。 图17. 观察shape.shapeColor 终止调试进程。 禁用第43行的断点。 除了可以观察属性之外，你也可以编写一个表达式进行赋值。 大部分但不是所有的ActionScript表达式是可用的。 请查阅Flash Builder 4使用文档来了解一个完整的合法表达式列表。 使用观察点。 在第二部分中，你学习了如何使用断点暂停执行中的代码，使用单步跳入，单步跳过，和单步返回命令在代码间穿梭，并使用继续按钮来继续执行下面的代码，直到到达下一个断点。 下面，你将会学习两个控制代码执行的附加途径，都是Flash Builder4的新特性，观察点，和回到指定行命令。 观察点提供一种暂停代码的新方式，而跳转到指定行命令提供一种跳出循环的方法。 观察点提供了一种可指定的暂停代码的方式。 并不像断点一样在指定的代码行停止，而是在你指定的变量值发生变化时才暂停。 这就是观察点的特性。 因为观察点需要被设定在一个指定变量的实例上，所以它们不能在代码编辑器中被设置，而只能在调式期间的变量视图中设置。 和断点不同，观察点只存在在调试期间中。 调试程序然后绘制图形。 你回到了Flash Builder的调试器中 在表达式视图中，右键单击selectedShape 然后选择开启观察点（见图18）. 图18 创建一个观察点。 切换到断点视图。 你会看到你的观察点列在这里了（见图19）. 图19. 在断点视图中找到观察点。 禁用34行的断点，然后点击继续按钮。 回到浏览器中，然后画一些圆形。 改变颜色和并绘制一些圆形。 改变形状，这是你会马上回到Flash Builder的调试器中。 观察点的值变化了，所以代码被暂停了。 终止调试进程。 使用跳转到指定行的工具。 在你调试的某些点，会陷入到一个循环中。 如果这个循环要进行N多次，而你只是想跳过它，可眼下的情况你不得不停滞在这里等待循环执行完所有的遍历。 跳转到行命令提供了一种方法可以跳出一个循环，或者从任意一行跳转停止在之后的代码行上。 如果这个跳转你希望只跳转一次，使用跳转到行命令可以让你不必再创造一个断点。 在Drawing.mxml中，在第46行设置一个断点，在onClick函数的第一行。 调试程序。 绘制一些不同的图形，然后点击 Clear All 按钮。 你将回到Flash Builder的调试器中，代码停止在第46行。 切换到变量视图并定位到i变量。 点击三次单步跳过，观察变量i从0变成1. 你可以看到，要跳过这个循环，你需要经历很多次这个过程。 可以查出一共有多少次。 在代码编辑器中，选中在onClick函数中shapeCanvas.numElements，右键点击，然后选择创建观察表达式。 这个表达式将被添加在表达式视图中，你可以看到它当前的值（见图20）. 图20. 查看创建图形的数量。 在代码编辑器中选中变量i，右键点击，并选择创建观察表达式，同样也添加到观察列表中。 终止调试进程。 再次调试程序，绘制一条图形路径，然后点击 Clear All 按钮。 点击三次单步跳过，查看在表达式视图中的变量。 这将会消耗一段时间完成整个循环。 选择在循环之后的一行（第49行），右键单击，然后选择跳转到行（见图21）. 图21. 跳转到行。 你会得到一个RangeError 告知你数组下标过界了。 在循环中的代码某处，一个错误出现了。 终止调试进程。 检查循环中的代码。 它遍历了整个shapeCanvas容器中的元素，但是它在这里调用了整个程序的clear函数。 在循环中，改变清理shapeCanvas 中元素的代码为： (shapeCanvas.getElementAt(i) as UIComponent).graphics.clear(); 调试程序，画一些图形，然后点击Clear All按钮。 你将会回到第46行的断点处，onClick函数中。 移除第46行的断点。 选择在循环之后的一行（第49行），右键单击，然后选择跳转到行。 代码跳出循环，并停留在代码的这一行上。 终止调试进程。 就这样——你已经成功的调试了这个绘图程序。 我们还可以知道些什么呢？ 在这个三部分组成的系列教程中，你学习到如何在Flash Builder 4中调试Flex 4程序。 你学会了如何使用断点暂停代码，有条件的断点，以及观察点，并通过单步跳入，单步跳过，单步跳出，继续按钮，以及跳转到指定行命令。 使用断点视图管理断点，通过变量视图检查和修改变量的值，通过变量视图观察和指定表达式。 要学习更多的Flash Builder调试器的知识，请阅读使用Flash Builder 4调试程序文档。 实际应用一些调试工具，并看一下在Flash Builder4调试和测试代码的视频。 要调试和使用远程服务（Http请求，web services，或远程对象调用），可以使用Flash Builder 4网络监视器，它会在Flash Builder中显示出Flash Player和你的后端应用之间的数据交互。 想了解网络监视器的更多的信息，请阅读“在Flash Builder 4使用网络监视器跟踪调试网络应用程序‘教程，并查看使用Flash Builder 4监视网络应用程序文档。 要调试复杂的程序，你也许需要使用单元测试来测试和鉴别程序中的指定的问题。 要了解更过关于集成单元测试到Flash Builder 4的知识，请阅读使用Flash Builder4进行驱动开发，和FlexUnit 教程，以及FlexUnit 测试环境的内容的文档。 要学习更多创建和个性化开发Flex4程序的知识，请查看Flex 4文档，一周学习Flex 4的系列视频和练习，并访问Flex开发者中心。