Firebug控制台调试功能详解：分组、计时与跨浏览器兼容方案

Firebug控制台日志分组与嵌套

接下来演示如何将前述的四条输出日志合并为一个分组进行展示。修改后的代码如下：

console.group('开始分组：');
console.debug('This is console.debug!');
console.info('This is console.info!');
console.warn('This is console.warn!');
console.error('This is console.error!');
console.groupEnd();

刷新页面查看效果（见图11-5）。在console.group中，可以指定一个组标题，例如“开始分组：”。此外，支持嵌套分组，即在现有组内部再创建子组。

图11-5

对象与DOM节点属性查看

当需要遍历对象的所有属性或HTML元素下的所有节点时，通常需编写for循环。借助Firebug，可直接使用console.dir(object)或console.dirxml(element)来实现，无需手动编写循环逻辑。

在测试页面中添加以下代码进行验证：

console.dir(document.getElementById('div1'));
console.dirxml(document.getElementById('div1'));

运行结果分别如图11-6和图11-7所示。

图11-6

图11-7

代码执行耗时统计

若需了解代码片段的执行耗时，可使用console.time和console.timeEnd方法。

修改test函数代码，测试执行1000次循环所需的时间：

function test(){
console.time('test');
for(var i=0;i<1000;i++){
document.getElementById('div2').innerHTML=i;
//console.log('当前的参数是：%d',i);
} 
console.timeEnd('test');
} 

刷新页面并单击“方块二”查看结果（见图11-8）。需注意，console.time和console.timeEnd接收的参数必须一致，该参数将作为计时器的标题显示在输出中。

图11-8

函数调用栈追踪与断点调试

若需追踪函数的调用来源，可使用console.trace()。在test函数末尾添加该语句：

console.trace();

刷新页面并单击“方块二”查看结果（见图11-9）。输出显示test函数由坐标（97，187）处的鼠标单击事件触发，调用脚本位于simple.html文件的第1行。由于test函数由HTML内的事件调用，故显示行号为第1行；若由脚本调用，则显示具体脚本行号，且支持单击跳转至调用位置。

图11-9

若需在脚本特定位置设置断点，可在代码中单独一行写入“debugger”。当执行流到达该行时，脚本将暂停并等待用户操作，此时可切换至“Script”标签页进行调试。

Firebug还提供其他调试函数，此处不再赘述，读者可自行测试。表4列出了所有相关函数：

IE环境下的Firebug兼容方案

Firebug是Firefox的一个扩展，但是我习惯在IE中调试我的页面怎么办？如果在页面脚本中加入console.log()将调试信息写到Friebug，在IE中肯定是提示错误的，怎么办？不用担心，Frirebug提供了Frirbug Lite脚本，可以插入页面中模仿Firebug控制台。

我们可以从一下地址下载firebug lite：

http://www.getfirebug.com/releases/firebuglite1.0-b1.zip

然后在页面中加入：

<script language="javascript" type="text/javascript" src="/路径/firebug.js"></script>

如果你不想在IE中模仿Friebug控制台，只是不希望console.log()脚本出现错误信息，那么在页面中加入一下语句：

<script language="javascript" type="text/javascript" src="/路径/firebugx.js"></script>

如果你不想安装Firebug Lite，只是想避免脚本错误，那么可以在脚本中加入以下语句：

if (!window.console || !console.firebug)

var names = ["log", "debug", "info", "warn", "error", "assert", "dir", "dirxml",

"group", "groupEnd", "time", "timeEnd", "count", "trace", "profile", "profileEnd"];

window.console = {};

for (var i = 0; i < names.length; ++i)

window.console[names[i]] = function() {}

将firebug.js加入测试页面后打开IE并加载页面。页面加载完成后，按下F12键即可打开控制台。每次刷新页面后均需按F12键打开控制台，较为繁琐。若希望简化操作，可在html标签中增加“debug='true'”属性，例如：

<html debug="true">

在Friebug Lite中也有命令行，但是功能没那么强。