正文
Firebug & Chrome Console 控制台使用指南
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
转自：http://visionsky.blog.51cto.com/733317/543789
Console API
当打开 firebug (也包括 Chrome 等浏览器的自带调试工具)，window 下面会注册一个叫做 console 的对象，它提供多种方法向控制台输出信息，供开发人员调试使用。下面是这些方法的一个简单介绍，适时地运用它们，对于提高开发效率很有帮助。
console.log(object[, object, ...])
使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的：
var animal='frog', count=10;
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 & Chrome Console 控制台使用指南的更多相关文章- chrome console控制台引入jquery库
var jqueryJs=document.createElement('script');jqueryJs.setAttribute("type","text/Java ...
- Chrome 控制台实用指南【转】
转自伯乐在线. Chrome 控制台实用指南 前言 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台 ...
- Chrome 控制台实用指南
前言 个人博客:Damonare的个人主页 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大 ...
- firebug,chrome调试工具的使用
http://ued.taobao.org/blog/?p=5534 chrome调试 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156 ...
- 1.Google Chrome浏览器 控制台全解析
Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于 ...
- Chrome console(转)
阅读目录 写在前面 谷歌控制台Elements面板 查看元素上绑定的事情 样式操作 总况 console.log console.info console.error console.warn con ...
- 前端开发chrome console的使用 ：评估表达式 – Break易站
本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...
- chrome console的使用 ： 异常和错误的处理 – Break易站
本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站 利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试 ...
- Console控制台的正确打开方式
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象 |-- assert() 如果第一个参数断言为false,则在控制台输出错误信息 ...
随机推荐- linus上运行jar包文件增删查
package com.osplat.util; import com.alibaba.fastjson.JSON; import com.osplat.bean.Resultmodel; impor ...
- 重工单001800020505在IN表IN_SFCHEADER被过滤 TEMP_REMOVED_ID_IN_DATA
select * from SAP_AFKO WHERE AUFNR='001800020505'; ---有数据SELECT * FROM IN_SFCHEADER WHERE MO_ID ='0 ...
- 江西财经大学第一届程序设计竞赛 H题 求大数的阶乘
链接:https://www.nowcoder.com/acm/contest/115/H 来源:牛客网 晚上,小P喜欢在寝室里一个个静静的学习或者思考,享受自由自在的单身生活. 他总是能从所学的知识 ...
- WdatePicker控件Javascript取得当前时间、取得减30分钟时间
1.取得当前时间 function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var se ...
- Unity2017五子棋大战_人机_双人_UNET联网
五子棋大战源码工程基于Unity2017.2进行开发,分为人机.双人.UNET网络三种对战方式,配有案例讲解视频, 其中人机五子棋AI有三种开发难度,欢迎有兴趣的同学加入学习! . 目录 000-展示 ...
- ubuntu系列-安装google浏览器
转载:http://www.linuxidc.com/Linux/2013-10/91857.htm 对于刚刚开始使用Ubuntu并想安装谷歌Chrome浏览器的新用户来说,本文所介绍的方法是最快捷的 ...
- C# 创建WebService的简单示例
工具Visual Studio 2013 1.创建一个空的Web应用程序. 2.鼠标右击项目,添加->新建项 选择Web服务(ASMX),点击添加.一个简单的webservice就创建完成了.
- Git下的.DS_Store文件
.DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件..DS_Store(英文全称 Desktop Services Stor ...
- Activity 的启动过程深入学习
手机应用也是一个app,每一个应用的icon都罗列在Launcher上,点击icon触发onItemClick事件. 我们要启动「淘宝」这个App,首先我们要在清单文件定义默认启动的Activity信 ...
- 在 JavaScript 中 ["1","2","3"].map(parseInt) 为何返回不是 [1,2,3] 却是 [1,NaN,NaN]？
这个问题我是希望有很多人可以一起交流的: 我在 http://blog.csdn.net/justjavac/article/details/19473199#t0 上看到了比较详细的解释, 但是具体 ...
var jqueryJs=document.createElement('script');jqueryJs.setAttribute("type","text/Java ...
转自伯乐在线. Chrome 控制台实用指南 前言 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台 ...
前言 个人博客:Damonare的个人主页 Chrome浏览器我想是每一个前端er必用工具之一吧,一部分原因是它速度快,体积不大,支持的新特性也比其它浏览器多,还有一部分我想就是因为它的控制台功能强大 ...
http://ued.taobao.org/blog/?p=5534 chrome调试 http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156 ...
Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于 ...
阅读目录 写在前面 谷歌控制台Elements面板 查看元素上绑定的事情 样式操作 总况 console.log console.info console.error console.warn con ...
本文内容来自:chrome console的使用 :评估表达式 – Break易站 从 DevTools 控制台使用它的某个评估功能查看页面上任意项目的状态. DevTools 控制台让您可通过特定方 ...
本文内容来自:chrome console的使用 : 异常和错误的处理 – Break易站 利用 Chrome DevTools 提供的工具,您可以修复引发异常的网页和在 JavaScript 中调试 ...
Console控制台的正确打开方式 console对象提供了访问浏览器调试模式的信息到控制台 -- Console对象 |-- assert() 如果第一个参数断言为false,则在控制台输出错误信息 ...
- linus上运行jar包文件增删查
package com.osplat.util; import com.alibaba.fastjson.JSON; import com.osplat.bean.Resultmodel; impor ...
- 重工单001800020505在IN表IN_SFCHEADER被过滤 TEMP_REMOVED_ID_IN_DATA
select * from SAP_AFKO WHERE AUFNR='001800020505'; ---有数据SELECT * FROM IN_SFCHEADER WHERE MO_ID ='0 ...
- 江西财经大学第一届程序设计竞赛 H题 求大数的阶乘
链接:https://www.nowcoder.com/acm/contest/115/H 来源:牛客网 晚上,小P喜欢在寝室里一个个静静的学习或者思考,享受自由自在的单身生活. 他总是能从所学的知识 ...
- WdatePicker控件Javascript取得当前时间、取得减30分钟时间
1.取得当前时间 function getNowFormatDate() { var date = new Date(); var seperator1 = "-"; var se ...
- Unity2017五子棋大战_人机_双人_UNET联网
五子棋大战源码工程基于Unity2017.2进行开发,分为人机.双人.UNET网络三种对战方式,配有案例讲解视频, 其中人机五子棋AI有三种开发难度,欢迎有兴趣的同学加入学习! . 目录 000-展示 ...
- ubuntu系列-安装google浏览器
转载:http://www.linuxidc.com/Linux/2013-10/91857.htm 对于刚刚开始使用Ubuntu并想安装谷歌Chrome浏览器的新用户来说,本文所介绍的方法是最快捷的 ...
- C# 创建WebService的简单示例
工具Visual Studio 2013 1.创建一个空的Web应用程序. 2.鼠标右击项目,添加->新建项 选择Web服务(ASMX),点击添加.一个简单的webservice就创建完成了.
- Git下的.DS_Store文件
.DS_Store 是什么 使用 Mac 的用户可能会注意到,系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件..DS_Store(英文全称 Desktop Services Stor ...
- Activity 的启动过程深入学习
手机应用也是一个app,每一个应用的icon都罗列在Launcher上,点击icon触发onItemClick事件. 我们要启动「淘宝」这个App,首先我们要在清单文件定义默认启动的Activity信 ...
- 在 JavaScript 中 ["1","2","3"].map(parseInt) 为何返回不是 [1,2,3] 却是 [1,NaN,NaN]？
这个问题我是希望有很多人可以一起交流的: 我在 http://blog.csdn.net/justjavac/article/details/19473199#t0 上看到了比较详细的解释, 但是具体 ...
