Javascript调试工具Firebug 6详细说明

让我们试着将刚才的四个输出作为一组输出。修改后的代码为：复制代码如下：console.group('开始分组：')；控制台.调试('这是控制台.调试！');控制台信息('这是控制台信息！');控制台。警告('这是控制台。警告！');控制台。错误('这是控制台。错误！');console . GroupEnd()；刷新页面以查看结果(图11-5)。在console.group中，我们还可以添加一个组标题“开始分组：”。如果有必要，我们还可以通过嵌套在组内进行分组。

图11-5有时，我们需要编写一个for循环来列出一个对象的所有属性或一个HTML元素下的所有节点。使用firebug，我们不需要为loop编写这个，我们只需要使用console.dir(对象)或console.dirxml(元素)。将代码添加到要测试的测试页：按如下方式复制代码： console . dir(document . getelementbyid(' div 1 '))；console . dirxml(document . getelementbyid(' div 1 '))；结果见图11-6和图11-7。

图11-6

图11-7想知道代码的运行速度吗？很简单，只需使用console.time和console.timeEnd.修改测试函数的代码，测试运行1000个周期需要多长时间：复制代码如下： function test(){ console . time(' test ')；for(var I=0；i1000I){ document . getelementbyid(' div 2 ')。innerHTML=I；//console.log('当前参数为：%d '，I)；} console . timeend(' test ')；}刷新页面，点击“框2”查看结果(图11-8)。这里需要注意的是，console.time和console.timeEnd中的参数必须一致才能有正确的输出，这个参数就是信息的标题。

图11-8你想知道一个函数在哪里被调用吗？安慰.追踪可以帮助我们追踪。在测试函数的末尾添加：console . trace()；刷新页面，点击“框2”查看结果(图11-9)。结果显示，测试函数是在坐标(97，187)处的鼠标点击事件上执行的，并且被调用的脚本位于simple.html文件的第一行。因为HTML中的事件调用测试函数，所以显示的行号是第一行。如果是脚本，会显示调用脚本的行号，点击可以直接转到调用行。

图11-9如果想在脚本的某个地方设置断点，可以在脚本中输入“调试器”作为一行。当脚本执行到这一行时，它将停止等待用户。此时，您可以通过切换到“脚本”选项卡来调试脚本。Firebug还有其他调试功能，这里就不介绍了。如果你感兴趣，你可以自己测试。表4是所有函数的列表：函数描述console.log(对象[，对象，])向控制台输出消息。您可以输入多个参数，输出将输出由空格分隔的每个参数。第一个参数可以包含格式化文本，如console.log('这里有%d% s '，count，apple)；字符串格式：%s:字符串。%d，%i:数字。%f:浮点数。% o-超链接对象。Console.debug(对象[，对象，])向控制台输出一条消息，其中包含指向输出位置的超链接。Console.info(对象[，对象，])向控制台输出带有信息图标和背景色的消息，该消息包含指向输出位置的超链接。Console.warn(对象[，对象，])向控制台输出带有警告图标和背景色的消息，该消息包含指向输出位置的超链接。控制台。错误(对象[，对象，])向控制台输出带有错误图标和背景色的消息，该消息包含链接到输出位置的超链接。控制台。Assert(表达式[，对象，])测试表达式是否为真，如果为假，则向控制台提交异常消息。Console.dir(对象)列出了对象的所有属性。列出了HTML或xml元素的XML源树。console.trace()输出堆栈的调用条目。组(对象[，对象，])将信息分组并输出到控制台。通过console.groupEnd()结束分组。Console.groupEnd()结束分组输出。Console.time(name)创建一个名为name的计时器，计算代码的执行时间，并调用console.timeEnd(name)停止计时器并输出执行时间。Console.timeEnd(name)停止名为name的计时器并输出执行时间。Console.profile([title])开始测试脚本的性能，title就是测试标题。Console.profileEnd()结束性能测试。Console.count([title])计算代码执行的次数。Titile作为输出标题。表412。在IE中使用Firebug Firebug是Firefox的扩展，但是我习惯在IE中调试我的页面。如果在页面脚本中加入console.log()，将调试信息写入Friebug，肯定会在IE中提示错误。我该怎么办？别担心，Frirebug提供了Frirbug Lite脚本，可以插入页面模仿Firebug控制台。我们可以从以下地址下载Firebug Lite:http://www.getfirebug.com/releases/firebuglite1.0-b1.zip并添加：脚本语言=' JavaScript ' type=' text/JavaScript ' src=' http :/path/Firebug . js '/脚本如果你不想模仿IE中的Friebug控制台，那么你就是不想在console.log()脚本中出现错误消息。然后在页面中添加一条语句：script language=' JavaScript ' type=' text/JavaScript ' src=' http :/path/Firebug . js '/script如果不想安装Firebug Lite，但只想避免脚本错误，可以在脚本中添加以下语句：if(！window.console ||！console . firebug){ var name=[' log '，' debug '，' info '，' warn '，' error '，' assert '，' dir '，' dirxml '，' group '，' groupEnd '，' time '，' timeEnd '，' count '，' trace '，' profile '，' profile end ']；window . console={ }；for(var I=0；一.姓名.长度；I)window . console[name[I]]=function(){ } }我们将firebug.js添加到测试页面，然后打开IE并加载页面。页面加载后，我们可以按F12打开控制台。每次页面刷新后，您必须按F12打开控制台。很烦吗？如果不愿意，可以在html标签中添加“debug=‘true’”，例如：html debug=‘true’Friebug Lite中也有一个命令行，但是功能没有那么强大。