第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" />
<title>console demo</title>
<script type="text/javascript">
function errorTest()
{
//不存在的函数
notExistFunction();
}
</script>
</head>
<body>
<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所示。
·221
·
图8.4  查看错误代码
标题前面有一个“+”号的小图标，表示标题可以被展开，单击图标展开标题，如图8.5所示。
图8.5  展开标题
标题展开后，下面显示的分别是包含错误代码的函数或方法，以及当前事件的相关信息。单击函数或方法名，可以转到脚本查看器查看器代码，如图8.6所示。
图8.6  查看函数代码
单击事件的描述信息，可以转到DOM 查看器查看事件对象的详细信息，如图8.7所示。
·222·
图8.7  查看事件对象
当程序中出现错误时，通过查看Firebug控制台输出的错误信息可以让开发者快速定位分析并修复
错误。
8.1.2  完善的log功能
在调试程序时，经常需要让程序在运行过程中输出一些信息，使得开发者可以实时掌握到程序运行
的情况。Firebug的控制台提供了完整的log功能，在第五章中读者已经见过console.log的使用，下面来
向读者介绍所有的log语法。
console.log提供了在控制台中输出信息的基本方法，其语法如下所示。
console.log(message1[,message2,...,messageN]);
在代码被执行时，其参数会被连接在一起输出到Firebug的控制台中。console.log还支持5种占位
符，见表8-1所示。
表8-1  console.log占位符
占位符符说明
%s 字符串
%d,%i 整数
%f 浮点数
%o 对象
占位符只能在console.log的第一个参数中使用。当第一个参数中包含占位符时，程序会根据占位符
的数量，取从第二个参数开始的足够数量的参数替换到对应的占位符所在的位置，剩下的其他参数，则
按照默认行为被连接到输出信息的末尾。下面的示例演示了console.log的用法，其代码如下所示。
<!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" />
<title>console.log demo</title>
·223·<script type="text/javascript">
console.log('message start');
var number = 123.22;
var int = 55;
var string = '321';
var object = {name:'rob',sex:'mail'};
console.log('number = ',number);
console.log('number = %f',number);
console.log('int = %d',int); console.log('string = %s',string);
火狐安装firebug
console.log('object = %o',object);
console.log('number = %f , int = %d , string = %s , object = %o',number,int,string,object,',');
console.log('message end')
</script>
</head>
<body>
</body>
</html> 使用Firefox 访问该示例页面，可以看到在Firebug 的控制台中输出了指定的信息，如图8.8所示。
图8.8  console.log 示例
console.debug 与console.log 一样可以接受多个参数，所不同的是通过console.debug 输出的信息会被添加一个链接，单击链接时会根据参数的类型自动转换到其他视图。当参数为DOM 对象或者JavaScript 对象时，会转到DOM 查看器显示对象的详细信息。当参数为HTML 元素时，则会转到HTML 查看器并定位到该元素节点上。如果参数为一个函数或者方法，则会转到脚本查看器并定位到函数或者方法的定义所在行。如果参数只是一个数字或者字符串等基本类型的值，则不会添加任何链接。比较特殊的是当参数为数组时，Firebug 会分析其中每个元素的类型并添加相应的链接。下面的示例显示了console.debug 的用法，代码如下所示。
<!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" />
<title>console.debug demo</title>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。