深入解析 Firebug 的调试功能
使用 Aptana 的集成调试功能
小结
调试技巧
第
章
理想的软件开发是不需要调试的，但在现实开发过程中，开发人员总是会因为不同
的原因而犯各种各样的错误，以致于给所构建的系统带来不同程度的危害。有些错误浅
显而低级，例如用错了大小写，或者写错了变量名等；而有些错误是复杂的逻辑错误，
这类错误往往隐藏较深，不容易找出错误的原因；另外一些错误可能是功能实现的方式
有问题，导致程序有性能瓶颈等。可以说，软件开发就是不断编码和调试的过程。使用
好的调试工具并掌握好的调试技巧能够加快软件开发进程，提高产品质量。本章将向读
者详细介绍使用 Firebug 和 Aptana 调试 JavaScript 程序的一些技巧。
Ajax 从入门到精通
·216·
3.1 深入解析 Firebug 的调试功能
在本书的第 5 章中已经向读者介绍过 Firefox 浏览器的优秀调试插件 Firebug 的界面和基本功能。
本节将向读者深入讲解如何利用 Firebug 的控制台输出各种自定义的信息、查看错误提示，如何利用命
令行工具在页面上执行 JavaScript 代码，以及如何使用脚本查看器进行脚本的调试等。
3.1.1 检查常规错误
当 Firefox 遇到一个 JavaScript 错误时，Firebug 会在其控制台输出一个错误信息。这个错误信息包
含错误的描述、发生错误的代码片断、包含该代码片断的函数或者方法以及事件对象信息。下面这个
示例中，在测试按钮的事件处理函数中调用了一个不存在的函数，代码如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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 打开页面，如图 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 所示。
Ajax 从入门到精通
·218·
图 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.log 提供了在控制台中输出信息的基本方法，其语法如下所示。
console.log(message1[,message2,...,messageN]);
在代码被执行时，其参数会被连接在一起输出到 Firebug 的控制台中。console.log 还支持 4 种占位
符，如表 3.1 所示。
表 3.1 console.log 支持 4 种占位符
占 位 符 说 明
%s
字符串
%d,%i
整数
%f
浮点数
%o
对象
占位符只能在 console.log 的第一个参数中使用。当第一个参数中包含占位符时，程序会根据占位
符的数量，取从第二个参数开始的足够数量的参数替换到对应的占位符所在的位置，剩下的其他参数
则按照默认行为被连接到输出信息的末尾。下面的示例演示了 console.log 的用法，其代码如下所示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>console.log demo</title>
<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);
console.log('object = %o',object);
console.log('number = %f , int = %d , string = %s , object = %o',number,int,string,object,',others...');
console.log('message end')
</script>
