您的位置：首页 > 其它

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

2012-09-04 15:05 155 查看

[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开发者中心。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航