我们测试一下把刚才的4个输出作为一个分组输出，修改代码为：
复制代码 代码如下:
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
有时候，我们需要写一个for循环列出一个对象的所有属性或者某个HTML Element下的所有节点，有了firebug后，我们不需要再写这个for循环了，我们只需要使用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）。结果显示是在坐标（97，187）的鼠标单击事件执行了test函数，而调用的脚本是在simple.html文件里的第1行。因为是在HTML里面的事件调用了test函数，所以显示的行号是第1行。如果是脚本，则会显示调用脚本的行号，通过单击可以直接去到调用行。

图11-9
如果想在脚本某个位置设置断点，可以在脚本中输入“debugger”作为一行。当脚本执行到这一行时会停止执行等待用户操作，这时候可以通过切换到“Script”标签对脚本进行调试。
Firebug还有其它的一些调试函数，这里就不一一做介绍，有兴趣可以自己测试。表4是所有函数的列表：

JavaScript技术：Javascript 调试利器 Firebug使用详解六，转载需保留来源！

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。