`
flex_莫冲
  • 浏览: 1079014 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它

 
阅读更多
Console API

当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册一个叫做 console 的对象,它提供多种方法向控制台输出信息,供开发人员调试使用。下面是这些方法的一个简单介绍,适时地运用它们,对于提高开发效率很有帮助。
console.log(object[, object, ...])

使用频率最高的一条语句:向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然,也可以不使用格式化输出来达到同样的目的。下面两行代码执行的结果是相同的:

console.log("The %s jumped over %d tall buildings", animal, count);
console.log("The", animal, "jumped over", count, "tall buildings");

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

向控制台输出一条信息,它包括一个指向该行代码位置的超链接。
console.info(object[, object, ...])

向控制台输出一条信息,该信息包含一个表示“信息”的图标,和指向该行代码位置的超链接。
console.warn(object[, object, ...])

同 info。区别是图标与样式不同。
console.error(object[, object, ...])

同 info。区别是图标与样式不同。error 实际上和 throw new Error() 产生的效果相同,使用该语句时会向浏览器抛出一个 js 异常。
console.assert(expression[, object, ...])

断言,测试一条表达式是否为真,不为真时将抛出异常(断言失败)。
console.dir(object)

输出一个对象的全部属性(输出结果类似于 DOM 面板中的样式)。
console.dirxml(node)

输出一个 HTML 或者 XML 元素的结构树,点击结构树上面的节点进入到 HTML 面板。
console.trace()

输出 Javascript 执行时的堆栈追踪。
console.group(object[, object, ...])

输出消息的同时打开一个嵌套块,用以缩进输出的内容。调用 console.groupEnd() 用以结束这个块的输出。
console.groupCollapsed()

同 console.group(); 区别在于嵌套块默认是收起的。
console.time(name)

计时器,当调用 console.timeEnd(name);并传递相同的 name 为参数时,计时停止,并输出执行两条语句之间代码所消耗的时间(毫秒)。
console.profile([title])

与 profileEnd() 结合使用,用来做性能测试,与 console 面板上 profile 按钮的功能完全相同。
console.count([title])

输出该行代码被执行的次数,参数 title 将在输出时作为输出结果的前缀使用。
console.clear()

清空控制台
命令行

控制台的输出面板右边,是控制台的输入面板(Chrome 调试工具对应为下方),在这里除了可以运行常规的 javascript 代码,还内置了相当数量的命令行可以辅助我们的调试工作,下面是一些常用命令行的简单介绍:
$(id)

返回一个给定 id 的元素。
$$(selector)

返回给定的 css 选择器匹配到的一组元素。
$x(xpath)

返回给定的 XPath 表达式匹配到的一组元素。
$0

在 HTML 面板中选中的元素。
$1

上一次在 HTML 面板中选中的元素。
$n(index)

访问最近 5 个被选中过的元素,index 的范围: 0 - 4。
dir(object)

同 console.dir(object)。
dirxml(node)

同 console.dirxml(node)。
clear()

同 console.clear()。
inspect(object[, tabName])()

在合适的(或一个指定的) tab 中检视一个对象。
keys(object)

返回一个对象的所有属性的键。
values(object)

返回一个对象的所有属性的值。
debug(fn)

在函数第一行添加一个断点,使用 undebug(fn) 移除断点。
monitor(fn)

开启一个函数的调用日志,使用 unmonitor(fn) 关闭该功能。非常有用的一个命令,但是它似乎并没有很好地工作。
monitorEvents(object[, types])

开启一个元素的某个事件(或所有事件)被触发时的日志记录。用例如下:

monitorEvents($0,['click'])

上面的命令行被执行后,将开启当前在 HTML 面板中被选中元素的 click 事件监控,一旦这个元素的 click 事件被触发,事件对象将会在控制台输出。如果不指定第二个参数,将对所有事件进行记录。
profile([title])

同 console.profile([title])
参考资料

    Firebug wiki --- Command Line API
    Firebug wiki --- Console API
来源:http://suliuyes.iteye.com/blog/1071388
分享到:
评论

相关推荐

    FireBug浏览器调试工具

    Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件,现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手...

    类似firebug的IE调试工具包

    1.打开IE菜单“工具”--“Internet选项”--“高级”,找到“禁用脚本调试(Internet Explorer)”和“禁用脚本调试(在Internet Explorer之外)”,将两个选项前面的对钩都去掉,然后重启IE。 2.在Ie中输入:...

    JavaScript css浏览器的调试

    1.对IE浏览器的调试 2 1.1. IE6,IE7浏览器对JS的调试方式 2 1.1.1准备工作 2 1.1.2调试脚本步骤 3 1.1.3总结 4 1.2.IE8浏览器对JS的调试方法 4 1.2.1.准备工作 4 1.2.2调试脚本步骤 5 ...5.Opera浏览器调试工具 35

    Firebug(支持chrome)v1.12.3v1.13网页开发工具英文版

    Firebug是Firefox的一个插件,Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。而且可以在线的时候修改dom非常弹大的...

    Firebug_Console命令行全集.pdf

    前端开发神奇firebug使用文档,console的各种用法大全

    Firebug | 火狐调试工具 V2.0.19 正式版

    Firebug 是网页浏览器 Mozilla Firefox 的一个扩展,是一个除错工具。用户可以利用它除错、编辑、甚至删改任何网站的 CSS、HTML、DOM、与 JavaScript 代码。Firebug 也有提供其他网页开发工具,例如 Yahoo! 的网页...

    Firebug Lite for Google Chrome

    Firebug Lite for Google Chrome

    firebug-2.0.16-是firefox下的一个扩展,能够调试所有网站语言

    Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...

    Firebug调试javascript

    Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...

    Chrome 下的 PHP 调试工具chromephp

    以前听说过FirePhp这个调试工具,可以将调试信息打印到firebug上,不过由于我不喜欢用firebug来调试,一般情况下,都是用chrome来开发,于是就找出了ChromePhp。 ChromePhp这个调试工具,总体上来说,还是挺好用的。

    JavaScript调试技巧之console.log()详解

    在具备调试功能的浏览器上,window对象中会注册一个名为console的成员变量,指代调试工具中的控制台。通过调用该console对象的log()函数,可以在控制台中打印信息。比如,以下代码将在控制台中打印”Sample log”: ...

    firebug1.45调试javascript工具

    firebug1.45调试javascript工具,带调试功能,可设断点,目前最新稳定版。

    js调试工具 firebug1.8.3

    js调试工具 firebug1.8.3,适用于firefox 6.7.8.9四个版本

    javascript调试工具firebug-1.4.0b4

    firefox附带经典js调试工具firebug,注意版本兼容。 firefox是一款对js支持程度最高的浏览器,无疑是开发人员必备调试工具,而且该调试工具可以监视各变量的值和性能

    鬼鬼JS调试工具7.0

    鬼鬼js调试工具 是一个轻量快速、功能强大的JS调试工具,鬼鬼JS调试工具官方版可以将JavaScript的语言代码进行格式化处理,... 3、另外,在鬼鬼JS调试工具浏览器中,还有一些很不错的调试器,如:Venkman、Firebug 等。

    Firebug调试工具及使用注意事项等相关文档

    Firebug调试工具,内附有使用注意事项等相关文档,希望对大家有所帮助

    火狐+firebug调试工具

    最新火狐浏览器,加上调试工具firebug,再加上httpwatchPro,绝对超值下载!

    Firefox浏览器插件Firebug和CSS减肥工具CSS Usage(清理无用CSS样式的CSS精简工具)

    第四步,在Firefox浏览器中打开我们要优化的页面(本地的页面也可以),点击右上角的firebug(有个小蜜蜂图标),打开firebug工具窗口,我们会看到在工具选项中我们有一个 CSS Usage工具的按钮。 首先我们来分析最...

    firebox浏览器+firebug-1.5

    firebox浏览器+firebug-1.5 很好用,调试javascript脚本的好工具

    类似于firebug的网页开发工具,适用于IE版本,遨游

    Firebug集成到傲游浏览器中,将提供一个良好的网页开发工具,当您浏览任何网页时,可以直接编辑,调试和监测网页中的CSS,HTML和JavaScript元素。(Firebug integrates with Mathon to put a wealth of web ...

Global site tag (gtag.js) - Google Analytics