Ajax入门到高手_第3章.docVIP

???深入解析 Firebug 的调试功能 ???使用 Aptana 的集成调试功能 ???小结 调试技巧 第三章 理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同 的原因而犯各种各样的错误，以致于给所构建的系统带来不同程度的危害。有些错误浅 显而低级，例如用错了大小写，或者写错了变量名等；而有些错误是复杂的逻辑错误， 这类错误往往隐藏较深，不容易找出错误的原因；另外一些错误可能是功能实现的方式 有问题，导致程序有性能瓶颈等。可以说，软件开发就是不断编码和调试的过程。使用 好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。本章将向读 者详细介绍使用Firebug 和Aptana 调试JavaScript 程序的一些技巧。 ·216· Ajax从入门到精通 3.1 深入解析Firebug 的调试功能 在本书的第 5 章中已经向读者介绍过Firefox 浏览器的优秀调试插件Firebug 的界面和基本功能。 本节将向读者深入讲解如何利用Firebug 的控制台输出各种自定义的信息、查看错误提示，如何利用命 令行工具在页面上执行JavaScript 代码，以及如何使用脚本查看器进行脚本的调试等。 3.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() { notExistFunction(); //不存在的函数 } /script /head body input type=button value=test button onclick=errorTest(); / /body /html 用 Firefox 打开页面，如图3.1 所示。单击test button 按钮，按钮的click 事件处理函数errorTest 会 被调用，这时errorTest 会调用一个不存在的函数notExistFunction，从而引发一个错误。浏览器遇到脚 本错误时，右下角Firebug 的绿色小图标会变成红色以提示当前页面存在脚本错误，如图3.2 所示。 图3.1 示例程序界面图 3.2 错误提示 第8 章调试技巧 ·217· 红色图标后面的数字表示错误的个数。单击红色图标或者按F12 键打开Firebug 界面，如图3.3 所示。 图3.3 错误提示 错误被控制台用红色的字体，配上红色的错误图标醒目地显现出来。错误的标题是对错误的描述， 这里notExistFunction is not defined 指notExistFunction 没有被定义。标题下面是发生错误的那一行代码。 标题右边是发生错误的文件名和错误代码所在的行号。单击标题后面的文件说明或者标题下面的错误 行代码提示，都可以转到脚本查看器并完整地查看该文件的脚本代码，如图3.4 所示。 图3.4 查看错误代码 标题前面有一个“+”号的小图标，表示标题可以被展开，单击图标展开标题，如图3.5 所示。 ·218· Ajax从入门到精通 图3.5 展开标题 标题展开后，下面显示的分别是包含错误代码的函数或方法，以及当前事件的相关信息。单击函 数或方法名，可以转到脚本查看器查看代码，如图3.6 所示。 图3.6 查看函数代码 单击事件的描述信息，可以转到 DOM 查看器查看事件对象的详细信息，如图3.7 所示。 图3.7 查看事件对象 当程序中出现错误时，通过查看Firebug 控制台输出的错误信息可以让开发者快速定位分析并修复 错误。 第8 章调试技巧 ·219· 3.1.2 完善的log 功能 在调试程序时，经常需要让程序在运行过程中输出一些信息，使得开发者可以实时掌握到程序运 行的情况。Firebug 的控制台提供了完整的log 功能，在第5 章中读者已经见过console.log 的使用，下 面来向读者介绍所有的log 语法。 1．console.log console