admin 管理员组文章数量: 1086019
原文网址：谷歌浏览器--控制台(console)调试--使用/教程/实例_IT利刃出鞘的博客-CSDN博客
简介
说明
本文用示例介绍浏览器使用控制台（console）调试前端的方法。
Console API提供了允许开发人员执行调试任务的功能，Console对象提供了浏览器控制台调试的接口。浏览器都实现了这个接口，比如：谷歌浏览器、火狐浏览器、360浏览器、Safari浏览器、IE浏览器等等。也就是说：所有浏览器都可以用console进行调试。
官网
MDN：Console - Web API 接口参考 | MDN
谷歌浏览器：https://developer.chrome/docs/devtools/console/api/
查看所有功能
法1：运行console命令
法2：console.dir(console)
技巧
- 如果想要换行而不是直接执行命令，则按下：shift+enter
- 查看某个元素的监听器：getEventListeners(document.querySelector('.someclass'));
注意：此方法是Chrome浏览器的，在JS中无法直接使用。
console.clear
console.clear(); //清空控制台
console.log家族
用法1：基本用法
console.log ('普通信息')
console.info ('提示性信息')
console.warn ('警示信息')
console.error ('错误信息')
结果如下
用法2：输出对象
单纯对象
var myObj = {
name: 'haha',
sex: 'male',
obj: function(){
console.log("hello");
}
}
console.log(myObj);DOM对象
HTML文件：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<div>
这是个Demo
</div>
</body>
</html>
输出结果：
用法3：输出指定id的DOM节点
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is title</title>
</head>
<body>
<div id="abc">
这是个Demo
</div>
</body>
</html>
执行结果
注意：用$('#abc')可以达到同样效果。
格式化
console对象的上面4种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持下边几种。
console.log() 接收不定参数，参数间用逗号分隔，最终会输出会将它们以空白字符连接。
| 符号 | 含义 |
| %d 或%i | 数字 |
| %s | 字符串 |
| %f | 浮点数 |
| %c | css格式 |
| %o | 对象 |
示例
console.log("%d年%d月%d日",2011,3,26);
console.log("%s是%f","圆周率",3.1415926);
console.log("这个表示CSS样式%c红色","color:red", "炫酷吧")结果：
对象输出示例
var dog = {};
dog.name = "大毛";
dog.color = "黄色";
console.log("%o", dog);结果：
console.group()，console.groupEnd()
简介
console.group() ：在控制台创建一个分组，随后创建的内容都会保存在里面；
console.groupEnd() ：表示着当前分组的结束。
适合于在开发一个规模很大模块很多很复杂的Web APP时，将各自的log信息分组到以各自命名空间为名称的组里面。
示例
console.group("app.bundle");
console.warn("来自bundle模块的警告信息1");console.warn("来自bundle模块的警告信息2");
console.groupEnd();
console.group("app.bundle");
console.log("来自bundle模块的信息1");console.log("来自bundle模块的信息2");
console.groupEnd();结果如下
这样的控制台信息看上去就一目了然了，就不用再为了找这是属于那一行代码输出的再翻一遍源码了。
console.dir()
说明
输出打印对象的详细键值对信息。
若该对象为HTML元素，则该元素的DOM的表达式会按DOM树输出。 这个方法是我经常使用的，比for in方便了很多，可以详细查对象的方法。
示例1：普通对象
var myObj = {
name: 'haha',
sex: 'male',
obj: function(){
console.log("hello");
}
}
console.dir(myObj);结果
示例2：DOM对象
console.assert()
简介
对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。
当你想代码满足某些条件时才输出信息到控制台，那么你大可不必写if或者三元表达式来达到目的。console.assert()就是最好的选择。
示例
var isDebug=false;
console.assert(isDebug,'开发中的log信息');结果
console.count()
简介
统计代码被执行的次数。
示例
function fun(){
console.count('fun被执行的次数');
}
fun();
fun();
fun();执行结果
console.table()
简介
传入的对象在控制台上以表格的形式呈现。
示例
let aa = [
{
a: 1,
b: 2
}, {
c: 3,
d: 4
}
]
console.table(aa);结果：
console.time()，console.timeEnd()
简介
可以查看一段代码执行的耗时情况。
在使用的时候这两个方法需要传递同一个参数，若不传，则为“default”
示例
console.time("Array耗时");
var array= new Array(10000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("Array耗时");结果：
console.profile()，console.profileEnd()
简介
想要查看CPU使用相关的信息时，可以使用console.profile配合 console.profileEnd来完成这个需求。
示例
console.profile("Array耗时");
var array= new Array(10000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.profileEnd("Array耗时");有人说，在Profiles面板里面查看就可以看到cpu相关使用信息，但我并没有找到。他们的测试结果是：
其他功能
$_ // 上一个表达式的值
$0~$4 // 最近5个最近选中的DOM元素
$ // 对JavaScript的document.querySelector() 的封装
$$ // 对JavaScript的 document.querySelectorAll 的封装
dir // 其实就是 console.dir
keys // 取对象的键名, 返回键名组成的数组
values // 取对象的值, 返回值组成的数组
monitor，unmonitor //监听函数执行
debug，undebug //函数若执行则进入断点
$_
简介
上一个表达式的值
示例
$0~$4
简介
代表了最近5个你选择过的DOM节点。
在页面右击选择审查元素，然后在弹出来的DOM结点树上面随便点选，这些被点过的节点会被记录下来，而$0会返回最近一次点选的DOM结点，以此类推，$1返回的是上上次点选的DOM节点，最多保存了5个，如果不够5个，则返回undefined。
示例
$
简介
Chrome 控制台中原生支持类jQuery的选择器，也就是说你可以用$加上熟悉的css选择器来选择DOM节点。
$(selector)是原生JavaScript的document.querySelector() 的封装。
示例
$$
简介
$$(selector)是对ocument.querySelectorAll() 的封装。返回的是所有满足选择条件的元素的一个集合。
示例
copy
简介
可以将在控制台获取到的内容复制到剪贴板。
注意：他不依附于任何全局变量比如window，所以其实在JS代码里是访问不了这个copy方法的，所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的JS实现吧~这样我们就可以通过js代码进行复制操作而不用再依赖Flash插件了。
示例
此时就可以ctrl+v粘贴了。
keys，values
简介
keys：返回传入对象所有属性名组成的数组
values：返回所有属性值组成的数组
示例
var myObj = {
name: 'haha',
sex: 'male',
obj: function(){
console.log("hello");
}
}
keys(myObj);
values(myObj);结果
monitor，unmonitor
简介
monitor(function)，它接收一个函数名作为参数，比如function a,每次a被执行了，都会在控制台输出一条信息，里面包含了函数的名称a及执行时所传入的参数。
而unmonitor(function)便是用来停止这一监听。
示例
function sayHello(name){
console.log('hello,' + name);
}
monitor(sayHello);
sayHello('abc');
sayHello('def');
unmonitor(sayHello);结果
debug，undebug
简介
也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试，类似于在该函数的入口处打了个断点，可以通过debugger来做到，同时也可以通过在Chrome开发者工具里找到相应源码然后手动打断点。而undebug 则是解除该断点。
示例
其他
Chrome控制台实用指南 - 知乎
Chrome 控制台console的用法 - SegmentFault 思否
Chrome控制台浏览器 console用法_pw251的博客-CSDN博客
版权声明：本文标题：谷歌浏览器--控制台(console)调试--使用教程实例 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1738242024a1949012.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论