主页 » RIA文档中心 » Flex

[ADC文章]调试Flex 4程序--第二部分：断点

Posted 三月 23rd, 2010 by migsr

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

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

在这个分为三部分的系列教程的第二部分，你将学习如何使用断点。 断点允许你在程序执行过程中暂停，这样你就可以一行代码一行代码的监控代码的运行状况，看看哪些代码被执行了，并在指定的位置检查变量和表达式的值。 当你开始了一个调试进程时，程序就开始执行，直到遇到第一个断点。 这时候，Flash Builder的调试视图被激活，你可以逐步执行代码，查看变量的值，甚至修改变量的值来诊断和解决问题。

在系列教程的第一部分，你导入的项目在本部分中同样适用，进而学习更多的基本调试知识。

在这段教程中，你将会：

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

在第三部分中，你将会学习更多的高级调试特性，包括如何：

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

必要条件

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

Flash Builder 4 beta

示例文件：

  • Flex4Debugging_start2.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学习之路应用程序提供一如既往的想法，编程支持，和专家级的内容。

添加和管理断点。

你需要将断点设置在可执行的代码行旁边。 你也可以在已经注册了事件处理器的MXML 代码的旁边添加断点，不过，既然这个事件处理器已经被定义在ActionScript的某处了，不如就直接把断点加到那个位置吧。
有三种方式可以添加和移除断点：在左侧带有编号的标记栏上双击，右键点击标记栏然后使用弹出的菜单，或在调试视图中使用断点视图。

  • 打开在第一部分教程中使用过的，Flex4DebuggingTutorial_StartProject Flex项目中的Drawing.mxml

注意：如果你还没有完成第一部分教程，请下载Flex4Debugging_start2.zip（链接），解压缩它，然后导入FXP项目到Flash Builder中。

  • 在Drawing.mxml中，使用双击第27行onMouseDown函数中的代码旁边的标记栏来添加一个断点。(见图1) 你将会看到一个蓝色的小圈圈出现在那行代码旁的标记栏上。


图1 双击添加和移除断点。

  • 在标记栏中再次双击断点来移除它。
  • 在onMouseDown函数的另外一行的标记栏上使用右键点击选择切换断点来添加一个断点。


图2 使用菜单选项来添加和移除断点。

  • 再次右键点击标记栏，选择切换断点来移除断点。
  • 再次添加上这个断点（同样的方法），然后开始调试程序。
  • 点击浏览器窗口。 这将会触发鼠标点击事件，然后你将切换回Flash Builder的调试视图中。 如果你没自动切换回Flash Builder,你可以在任务栏中选中它的标签。
  • 定位在27行旁边的箭头表示代码执行到这里被暂停了（见图3）


图3 找到停止在第27行的代码。

  • 在调试视图中定位（见图4）。 调试视图中会显示一个已经被调用但尚未返回并终止的函数列表。 这通常被称为堆框，或者叫调用堆。 程序运行在Flash Player 中时，是单线程的，所以在同一时刻只有一个函数被执行。 你应该会看到onMouseDown函数被列出来，代码执行到你设置了断点的位置上就停止了。


图4. 在调试视图中查看尚未终止的函数调用。

  • 点击断点标签，打开断点视图（见图5） 你会看到有一个在第27行的断点被列出来。


图5 打开断点视图。

  • 在断点视图中，右键点击断点，可以看到弹出的选项有禁用和删除它。（见图6） 这在你的标记栏被双击时没有反应，以及锁定在其他断点的时候很有用。 你也可以取消选中断点旁边的单选框来禁用它，而不是移除它。


图6. 在断点视图中管理断点。

  • 保持断点的状态，并离开程序的暂停状态。 下一步，你将会从这个断点开始，像阅读代码一样顺序执行代码。

单步执行代码。

下面你将会一步一步的执行代码，来找出为什么没有图形被绘制出来的原因。 在调试视图工具栏中，可以找到单步跳入，单步跳过，和单步返回按钮，让你可以在代码间穿梭。（见图7）

单步跳入命令可以让你跳入一个被调用的函数中，并停止在代码的第一行。 单步跳过则不会跳入到被调用的函数中，而是继续执行到当前代码的下一行。 如果你跳入了一个函数，单步返回（有时候叫单步跳出）将会执行完这个函数并回到进入这个函数的地方。 如果你正在执行的代码中没有任何函数调用，那么单步跳入和单步跳过的效果是一样的。

图7 使用调试视图中的按钮实现单步执行代码。

  • 在正在进行的调试进程中，点击单步跳入按钮。 代码执行移动到代码的下一行，在本例中就是函数的末尾。
  • 再次点击单步跳入按钮。 一个新的文件，SystemManager.as被打开，而代码执行转移到它的stageEventHandler函数中（见图8）


图8. 单步跳入到SystemManager类的代码中。

  • 第三次点击单步跳入按钮。 代码执行到 Application.as文件的debugTickler函数中。
  • 单击单步返回按钮。 代码返回到FocusManager 类中。
  • 点击单步跳过5次。 代码执行应该回到Drawing.mxml文件中并停在onMouseMove函数的地方。

注意，如果你因为任何原因没有回到Drawing.mxml文件中，请继续尝试和点击单步跳入，单步跳过，和单步返回按钮，直到你回到Drawing.mxml文件中为止。

图9 单步执行代码，直到返回Drawing.mxml文件为止。

  • 继续狂点单步跳入，单步跳过和单步返回按钮在程序的不同部分单步执行，直到你理解每个命令之间的行为关系为止。
  • 在调试视图中点击继续按钮（见图10）。 剩余的所有代码都被执行了


图10 继续执行代码。

  • 回到浏览器运行你的程序，并再次点击界面。 你将再次回到Flash Builder的调试模式下。

注意，如果你在调试进程仍然处于运行状态，代码执行仍然处于悬停状态，有代码还在准备执行（就像在你点击上面的继续按钮之前的状态），你的浏览器很可能挂起甚至崩溃。 在某些操作系统和浏览器的组合中，你甚至都不能回到浏览器中。

  • 点击终止按钮来结束调试进程。

下面，你将会添加另外一个断点来单步调试绘图程序的剩余代码。

  • 在第33行加入一个断点，onMouseMove函数的第一行（见图11）。


图11 添加另外一个断点。

  • 在断点视图中，取消选中第27行的断点，这样代码在鼠标点下的时候就不会被停止。
  • 调试程序，然后在浏览器中点击和拖拽鼠标。 你将会返回到Flash Builder中的调试模式中。 注意，断点已经被从变量定义的33行移动到可执行的第34行。
  • 点击单步跳入两次来进入到Circle.as类文件中。
  • 继续点击单步跳入按钮，直到你进入到AShape类的构造函数中，Circle的父类（大约点击17次）

注意：如果在此期间弹出了一个对话框告诉你向驱动器插入一个光盘，不要理它，一直点击继续直到它消失为止。以后你也不会再看到它了。如果你的调试进程停止了，就按照第三步的方法再次调试。

  • 继续点击单步跳入按钮，一步步执行AShape类构造函数中的代码（最少要点击30次）。注意，draw函数在构造函数里面被多次调用：这是因为每一个赋值操作（例如，this.xPos=xPos;）实际上都是在调用设置器函数。
  • 终止调试进程。
  • 要移除这没用途的代码，改变构造函数中的赋值语句，直接将值付给私有变量。
    1.   public function AShape(xPos:int=0,yPos:int=0,
    2.  
    3. shapeColor:uint=0x000000,size:uint=20)
    4.  
    5. {
    6.  
    7. this._xPos=xPos;
    8.  
    9. this._yPos=yPos;
    10.  
    11. this._shapeColor=shapeColor;
    12.  
    13. this._size=size;
    14.  
    15. super();
    16.  

...

  • 再次调试程序，然后在浏览器中点击和拖拽鼠标。
  • 在Flash Builder中，点击单步跳入按钮（以及在适当的时候单步跳过，单步返回）直到你进入到AShape 类的构造函数代码中。
  • 继续执行代码，你会发现draw函数只被调用了一次。
  • 跳入到draw函数中，（你将跳转到Circle 类的draw函数里）然后一步步执行代码。

绘制圆形的代码确实被执行了，但是却没有圆形被绘制在舞台上。 为什么不灵呢？ 也许其他对象盖在它的上面，把它遮挡住了，或者，它根本就没被添加到显示列表中。

  • 继续点击单步跳入，直到你回到Drawing.mxml的onMouseMove函数中，代码运行结束了，但是没有代码将圆添加到显示列表。
  • 终止调试器。
  • 回到Drawing.mxml中，在onMouseMove函数的最后一行使用addElement函数添加一个新的图形到shapeCanvas 组中。图形被添加到单独的组中，这样他们就可以被独立于主程序的清除掉。
    1.   private function onMouseMove(e:MouseEvent):void{%!=6fdb7232-e539-44af-b0a4-10c6bce2b11d=!%}
    2.  
    3. var shape:AShape;
    4.  
    5. if(selectedShape=="circle"){%!=7249642c-6b5f-43a6-89c5-a74fb1772d06=!%}
    6.  
    7. shape=new Circle(mouseX,mouseY,shapeColor);
    8.  
    9. }
    10.  
    11. else
    12.  
    13. if(selectedShape=="square"){%!=ae1ace15-3dd0-4ed4-83e2-917dc9a058e8=!%}
    14.  
    15. shape=new Square(mouseX,mouseY,shapeColor);
    16.  
    17. }
    18.  
    19. else
    20.  
    21. if(selectedShape=="star"){%!=f3555fcc-c52b-4fce-a7fa-101b38ac316b=!%}
    22.  
    23. shape=new Star(mouseX,mouseY,shapeColor);
    24.  
    25. }
    26.  
    27. shapeCanvas.addElement(shape);
    28.  
    29. }
    30.  
  • 再次调试这个程序然后绘制一个图形。 代码再次在第34行停下来。
  • 在调试进程仍然运行的情况下，双击调用addElement函数的那一行旁边的标记栏，再添加一个断点。你可以在调试进程运行期间添加断点。
  • 点击继续按钮来执行两个断点之间的代码。 代码在第43行停下了。
  • 再次点击继续按钮施行剩余的代码。 在这之后，注意代码导航按钮现在都变成不可用状态了，这表示没有代码可再继续单步执行了。
  • 回到浏览器中再次绘制图形。 你马上又被切换回Flash Builder并停止在第34行了。
  • 在断点视图中，点击跳过所有断点按钮（见图12）。 断点上会被画上一条斜线，表示它们将会被跳过。


图12 跳过所有断点。

  • 再次点击继续按钮。 所有的代码都被执行了。
  • 回到浏览器中，点击和释放鼠标按钮，来停止当前的绘制，然后绘制不同颜色的图形。 程序这下好用了！
  • 点击Clear All按钮。 Clear All按钮现在没有正常执行，并且在调试器中出现了一个错误。 你将在教程的第三部分解决这个bug.
  • 终止调试进程。
  • 在断点视图中，再次点击跳过所有断点按钮来移除所有的跳过操作。
  • 移除或禁用在第43行的断点

使用条件断点

代码在每次执行到断点的时候都被停止下来。 Flash Builder 4中有个新特性，你现在可以设置断点的属性，这样代码在执行到断点时只有满足条件才会停止下来。 这个条件可以在一些指定的表达式值情况下才为真，当一个表达式变化后，或者当一个断点执行了指定的次数之后。 大多数情况下，但不是所有的情况下，表达式是合法的。 请查阅Flash Builder 4使用文档来了解一个完整的合法表达式列表。

  • 回到Drawing.mxml文件中，在代码编辑器的标记栏上，在onMouseMove函数的代码的第34行的断点处，右键点击，并选择断点属性（见图13）。


图13 选择断点属性来创建一个条件断点。

  • 在出现的对话框中，选择使用条件，输入 selectedShape=="star"，确保条件的“真”选项是被选中的，然后点击确定（见图14）。


图14 设置条件断点属性。

  • 看看标记栏中的断点。 现在它变得有点不一样了（见图15）.


图15. 查看条件断点图标。

  • 调试应用程序，并且画一些圆。 调试器没有被触发。
  • 在形状下拉列表里面把绘制图形改为星星，然后尝试绘制星星。 你将回到Flash Builder的调试器中，因为条件断点被触发了。
  • 终止调试器。
  • 在调试模式的断点视图中右键点击第34行的断点，选择断点属性。
  • 在出现的对话框中，选择起始触发次数，输入100，然后点击确定（见图16）。 这回调试器只有在你尝试绘制第101个星星的时候被触发。


图16 设置条件断点属性。

  • 调试程序并绘制一些星星（不是圆！） 持续绘制星星，直到调试器被触发。
  • 终止调试器。
  • 在断点视图中，右键点击第34行的断点，然后选择断点属性。
  • 在对话框中，去除选中起始触发次数，和启用条件断点，然后点击确认。断点将会有效，但是它将不再有任何条件。

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

在系列教程的第二部分，你学到了如何使用断点。 使用断点和条件断点暂停代码，使用单步跳入，单步跳过和单步返回控制代码的执行，以及继续命令，和使用断点视图管理断点。

在第三部分中，你将会完成绘图程序的调试，并学习使用变量视图，表达式视图，观察点，和跳转到某一行命令。

riadevID: 
瑞研社区最新地址：http://www.riadev.com/flex-thread-206-1-1.html
您给予的分值: None 平均分: 7.3 ( 6 票)
周四, 2010-04-01 20:54 — chalahaiyou

调试方便多了

调试方便多了

发表新评论

  • 网页地址和电子邮件地址将会被自动转换为链接。
  • 行和段被自动切分。
  • 您可以使用下面的标签来高亮显示您的评论内容: <code>, <blockcode>. 可以使用"[foo]".旁边显示标签样式 "<foo>" PHP代码可以用这样的区块来包含<?php ... ?> or <% ... %>

更多格式化选项信息

验证区域
系统验证：请回答下面的问题