Javascript的调试利器:Firebug使用详解(六)

 

      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 是所有函数的列表:

函数

说明
console.log(object[, object, ...])

向控制台输出一个信息。可以输入多个参数,输出将已空格分隔各参数输出。

第一参数可以包含格式化文本,例如:

console.log(‘ 这里有 %d  %s’,count,apple);

字符串格式:

%s :字符串。

%d, %i :数字。

%f    浮点数。

%o - 超链接对象。

console.debug(object[, object, ...])

向控制台输出一个信息,信息包含一个超链接链接到输出位置。

console.info(object[, object, ...])

向控制台输出一个带信息图标和背景颜色的信息,信息包含一个超链接链接到输出位置。

console.warn(object[, object, ...])

向控制台输出一个带警告图标和背景颜色的信息,信息包含一个超链接链接到输出位置。

console.error(object[, object, ...])

向控制台输出一个带错误图标和背景颜色的信息,信息包含一个超链接链接到输出位置。

console.assert(expression[, object, ...])

测试一个表示是否为 true ,如果为 false ,提交一个例外信息到控制台。

console.dir(object)

列出对象的所有属性。

console.dirxml(node)

列出 HTML  XML Element  XML 源树。

console.trace()

输出堆栈的调用入口。

console.group(object[, object, ...])

将信息分组再输出到控制台。通过 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 作为输出标题。

 4

 

12、               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 中也有命令行,但是功能没那么强。

 

 

你可能感兴趣的:(JavaScript,职场,Firebug,firefox,休闲)