firebug实用技巧.docVIP

第 8 章 调试技巧 理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同的原因而犯各种 各样的错误，以至于给所构建的系统带来不同程度的危害。有些错误浅显而低级，比如用错了大小写， 或者写错了变量名等等；而有些错误是复杂的逻辑错误，这类错误往往隐藏较深，不容易找出错误的原 因；另外一些错误可能是功能实现的方式有问题，导致程序有性能瓶颈等等。可以说，软件开发就是不 断编码和调试的过程。使用好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。 本章将向读者详细介绍使用 Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。 8.1 深入解析 Firebug 的调试功能 在本书的第五章中已经向读者介绍过了 Firefox 浏览器的优秀调试插件 Firebug 的界面和基本功能。 本节将向读者深入讲解如何利用 Firebug 的控制台输出各种自定义的信息、查看错误提示，如何利用命 令行工具在页面上执行 JavaScript 代码，以及如何使用脚本查看器进行脚本的调试。 8.1.1 检查常规错误 当 Firefox 遇到一个 JavaScript 错误时，Firebug 会在其控制台输出一个错误信息。这个错误信息包 含了错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法、以及事件对象信息。下面这 个示例中，在测试按钮的事件处理函数中调用了一个不存在的函数，代码如下所示。 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head meta http-equiv=Content-Type content=text/html; charset=utf-8 / titleconsole demo/title script type=text/javascript function errorTest() {  } /script /head body notExistFunction(); //不存在的函数 input type=button value=test button onclick=errorTest(); / /body /html 用 Firefox 打开页面，如图 8.1 所示。单击“test button”按钮，按钮的 click 事件处理函数 errorTest 会被调用，这时候 errorTest 会调用一个不存在的函数 notExistFunction，从而引发一个错误。浏览器遇到  ·220· 脚本错误时，右下角 Firebug 的绿色小图标会变成红色以提示当前页面存在脚本错误，如图 8.2 所示。  图 8.1 示例程序界面  图 8.2 错误提示 红色图标后面的数字表示错误的个数。单击红色图标或者按 F12 打开 Firebug 界面，如图 8.3 所示。 图 8.3 错误提示 错误被控制台用红色的字体，配上红色的错误图标醒目的现实了出来。错误的标题是对错误的描述， 这里“notExistFunction is not defined”指 notExistFunction 没有被定义。标题下面是发生错误的那一行代 码。标题右边是发生错误的文件名和错误代码所在的行号。单击标题后面的文件说明或者标题下面的错 误行代码提示，都可以转到脚本查看器并完整的查看该文件的脚本代码，如图 8.4 所示。  图 8.4 查看错误代码  ·221· 标题前面有一个“+”号的小图标，表示标题可以被展开，单击图标展开标题，如图 8.5 所示。 图 8.5 展开标题 标题展开后，下面显示的分别是包含错误代码的函数或方法，以及当前事件的相关信息。单击函数 或方法名，可以转到脚本查看器查看器代码，如图 8.6 所示。 图 8.6 查看函数代码 单击事件的描述信息，可以转到 DOM 查看器查看事件对象的详细信息，如图 8.7 所示。  ·222·  图 8.7 查看事件对象 当程序中出现错误时，通过查看 Firebug 控制台输出的错误信息可以让开发者快速定位分析并修复 错误。 8.1.2 完善的 log 功能 在调试程序时，经常需要让程序在运行过程中输出一些信息，使得开发者可以实时掌握到程序运行 的情况。Firebug 的控制台提供了完整的 log 功能，在第五章中读者已经见过 console.log 的使用，下面来 向读者介绍所有的 log 语法。 1.console.log console.