脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Javascript 调试利器 Firebug

Javascript 调试利器 Firebug使用详解六

 更新时间：2009年07月05日 00:55:09   作者：  
有时候，为了更清楚方便的查看输出信息，我们可能需要将一些调试信息进行分组输出，那么可以使用console.group来对信息进行分组，在组信息输出完成后用console.groupEnd结束分组。

我们测试一下把刚才的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是所有函数的列表：

函数

 说明
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中也有命令行，但是功能没那么强。

您可能感兴趣的文章:

相关文章

  • js 返回时间戳所对应的具体时间

    js 返回时间戳所对应的具体时间

    返回unix时间戳所对应的具体时间的代码
    2010-07-07
  • JavaScript函数Call、Apply原理实例解析

    JavaScript函数Call、Apply原理实例解析

    这篇文章主要介绍了JavaScript函数Call、Apply原理实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-02-02
  • JavaScript Konami Code 实现代码

    JavaScript Konami Code 实现代码

    JavaScript Konami Code 实现代码
    2009-07-07
  • 前端必会的Webpack优化技巧

    前端必会的Webpack优化技巧

    这篇文章主要为大家介绍了前端必会的Webpack优化技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • 详解javaScript中Number数字类型的使用

    详解javaScript中Number数字类型的使用

    Number和Math都属于JavaScript中的内置对象，Number数字类型作为基础数据类型，我们在开发过程中会经常用到，包括数字精度的格式化，还有字符串转换成数字等操作。本文将详细讲解其用法，感兴趣的可以了解一下
    2022-04-04
  • JS之相等操作符详解

    JS之相等操作符详解

    下面小编就为大家带来一篇JS之相等操作符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • layui表格分页 记录勾选的实例

    layui表格分页 记录勾选的实例

    今天小编就为大家分享一篇layui表格分页 记录勾选的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript blur与click冲突解决办法

    Javascript blur与click冲突解决办法

    这篇文章主要介绍了Javascript blur与click冲突解决办法的相关资料,在开发过程中经常会遇到blur与click 冲突的情况，这里举了几个例子，和解决办法，需要的朋友可以参考下
    2017-01-01
  • 史上最为详细的javascript继承（推荐）

    史上最为详细的javascript继承（推荐）

    这篇文章主要介绍了javascript继承，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript禁止微信浏览器下拉回弹效果

    JavaScript禁止微信浏览器下拉回弹效果

    这篇文章主要为大家详细介绍了JavaScript禁止微信浏览器下拉回弹效果的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论