在Firebug中调试JS程序

在Firebug中使用调试工具很简单，比如可以这样：

你 首先在 FireFox 中运行你的程序，就是打开你要测试的页面，如果有错则可以直接在console窗口中所显示出来的错误文件链接处点击，这样你将跳入到相应的文件相应的 行。这里你可以看到Tab页已经在Debugger上了。如果没有错，你也可以切换到Debugger窗口，在窗口下面是一个当前文件的列表，可以看到 html文件，js文件等，这样你可以选择一个要调试的文件进行处理。

在代码窗口中，左边一列是行号。你可以使用鼠标在行号左侧单击，这样 会有一个红点，这样就加了一个断点。于是再刷新浏览器，程序将在这个地方停下来。代码窗口的右边是变量监控窗口，可以看到相关的变量信息。此时你可以使用 Firebug的所有功能来查看信息了。如在console进行代码测试，在Inspector查看元素属性，css，layout等信息，很方便。

除了这种方式，我更习惯的是加入print和日志之类的东西，方法是简单了些，不过我已经习惯了。你可能要说，浏览器怎么可能使用print的方法呢。的确是没有，一般的方法是使用alert()，但在Firebug上有这么几句话：

Web developers have suffered with "alert debugging" for centuries. If you enjoy clicking the "Ok" button 40,000 times a day, FireBug is not for you. Otherwise, you'll enjoy having the ability to log messages from JavaScript in your web page directly to the FireBug console.

翻译过来就是：

Web程序员已经忍受了"alert调试"几个世纪了。如果你乐于一天之中点击"OK"按钮4万次，FireBug不适合你。否则你将愉快地拥有记录日志的能力，它可以将你web页面上的JavaScript信息记录到FireBug的console上。

看 到了吧，我们完全可以在自已的Javascript代码中使用FireBug的命令行来输出一些日志信息，不用再使用alert了。为什么我现在才发现 它，而不是以前呢。因为我的确没有仔细看过Firebug的功能说明。今天在jQuery的邮件列表中，我偶然看到这么一行代码：

console.info("...")

我 看到很奇怪，我突然想到这会不会是FireBug提供的功能，在它的命令行上一试，果然。于是乎，找到FireBug的主页仔细研究起来，才发现这么好的 东西。那么下面介绍一下，除了前面说的断点，单步调试，Inspector功能之外，还可以使用console来做些什么。参考的文档就是Firebug 主页上的文档内容。

1. 多级别的日志输出

console.debug("message" [,objects]) - Logs a debug message.
console.info("message" [,objects]) - Logs an informative message.
console.warn("message" [,objects]) - Logs a warning.
console.error("message" [,objects]) - Logs an error.

很简单就不多说了。它可以在命令行上根据级别不同显示不同的小图标，很有趣。这样，通过它，我们可以放弃alert了。

2. 断言

Firebug还提供了许多断言(assert)。assert在通常的编程中作为一种常见的调试方法，它用来保证某些处理或处理是预期的。不过Firebug的断言不支持表达式，它通过不同的断言函数来实现一定的表达式的功能，不过内容却很多，不再作介绍了。

3. 考量(Measurement)

提供了一些辅助功能，如：

console.trace() 提供了显示调用层次的信息，可以显示几个文件的先后调用次序及相应的行号。

console.time("name")和console.timeEnd("name") 用来记录执行时间。其中name是需要自已定义，用来区分不同的时间统计。这样你可以使用它来统计代码执行的时间。

console.count("name") 它可以用来记录此行代码(就是console.count("name")这行代码)被执行了几次。原来我还想，为什么是自已，而不能指定是哪个函数呢。其实你把它放到你的函数中，与指定函数是一样的。毕竟这种方法是最简单的实现。不同的计数需要不同的name。

4. 格式化对象的功能

它可以把一个对象按指定的格式进行处理后输出。如：

console.info("%d", 5) 输出一个数值
console.info("%.o", [1,2,3]) 输出一个数组，结果是["1", "2", "3"]

等等，有许多这样的功能

5. 在命令行还提供了一些函数，如：

$()相当于document.getElementById()(不知道这一点是不是从prototype.js学来的)
$$("css") 以CSS的selector方式来选择对象(更象是prototype.js了)，返回一个数组
$x("xpath")以XPath语法来选择对象，返回一个数组(不知道是不是学jQuery的)
dir(object)可以列出对象的属性
clear()可以清除命令行的信息

还有几个其它的命令，有兴趣自已看吧。

Firebug console 文档

FireBug是一个非常好的工具，调试Ajax程序会非常方便。更多的东西自已看吧。