玩转控制台，看看那些你不知道的Console用法

3次阅读

共计 2203 个字符，预计需要花费 6 分钟才能阅读完成。

前言
作为前端工程师，我们每天都离不开用控制台调试代码，console.log 也成了我们最常用的命令，那除了用 console.log，还有许多 console 的方法可以使用，熟练掌握它们，可以让我们在控制台看到的信息更美观准确，也会大大提高我们的开发效率哦，下面就跟小肆一起来看看吧.
Chrome 的控制台
大部分常用浏览器都有各自的控制台，不过小肆用着最习惯的还是 Chrome 的控制台，打开 chrome，win 系统按 F12，mac 系统按 command+option+ J 就可以呼出控制台了，切换到 Console 标签就能看到如下信息：我们可以看到，baidu 还在控制台给我们留了个小彩蛋，我想这个彩蛋也是为我们程序员同学留的吧。让我们先学第一个命令清除控制台来开始吧。
清除控制台
在 chorme 下清除控制台的方法有很多：

输入 console.clear()命令或 clear()命令
使用快捷键 Control + J 或 Command + K

点击控制台左上角第二个图标 ????

显示信息的命令
console.log(‘ 技术放肆聊 ’) // 输出普通信息
console.info(‘ 技术放肆聊 ’) // 输出提示信息
console.warn(‘ 技术放肆聊 ’) // 输出警告信息
console.error(‘ 技术放肆聊 ’) // 输出错误信息
console.debug(‘ 技术放肆聊 ’) // 输出调试信息
console.log、console.info、console.debug 这三个命令可以理解为一个，我们只需要用 console.log 就行，并且 chrome 还不支持 console.debug 命令。
console.warn 命令输出警告信息，信息前带有黄色警告符号。console.error 输出错误信息，信息前带有红色错误符号，表示出错，同时会显示错误发生的堆栈。上段代码在 chrome 控制台输出效果如下:
在 safari 输出效果如下:
占位符
console 上述的命令支持 printf 的占位符格式，支持的占位符有：字符（%s）、整数（%d 或 %i）、浮点数（%f）和对象（%o）:

占位符
作用

%s
字符串

%d or %i
整数

%f
浮点数

%o
可展开的 DOM

%O
列出 DOM 的属性

%c
根据提供的 css 样式格式化字符串

// 字符(%s)
console.log(“%s”,” 技术放肆聊 ”);
// 整数(%d 或 %i)
console.log(“%d 年 %d 月 %d 日 ”,2019,1,6);
// 浮点数(%f)
console.log(“PI=%f”,3.1415926);
显示效果如下：
%o、%O 都是用来输出 Object 对象的，对普通的 Object 对象，两者没区别，但是打印 dom 节点时就不一样了：
%c 占位符是最常用的。使用 %c 占位符时，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。常见的输出方式有两种：文字样式、图片输出。

信息分组
console.group()用于将显示的信息分组，可以把信息进行折叠和展开。console.groupEnd()结束内联分组
将对象以树状结构展现
console.dir()可以显示一个对象所有的属性和方法.
显示某个节点的内容
console.dirxml()用来显示网页的某个节点 (node) 所包含的 html/xml 代码
判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真，此方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为 false，才会输出第二个参数，否则不会有任何结果。
计时功能
console.time()和 console.timeEnd()，用来显示代码的运行时间
console.time(“ 控制台计时器 ”);
for(var i = 0; i < 10000; i++){
for(var j = 0; j < 10000; j++){}
}
console.timeEnd(“ 控制台计时器 ”);

性能分析 performance profile
console.profile()和 console.proileEnd()用来分析程序各个部分的运行时间，找出瓶颈所在。
function All(){
for(var i = 0; i < 10; i++){
funcA(100);
}
funcB(1000);
}
function funcA(count){
for(var i = 0; i < count; i++){};
}
function funcB(count){
for(var i = 0; i < count; i++){};
}
console.profile(“ 性能分析器 ”);
All();
console.profileEnd();
详细的信息在 chrome 控制台里的 ”profile” 选项里查看
console.count()统计代码被执行的次数
function myFunction(){
console.count(“myFunction 被执行的次数 ”);
}
myFunction(); //myFunction 被执行的次数: 1
myFunction(); //myFunction 被执行的次数: 2
myFunction(); //myFunction 被执行的次数: 3
console.table 表格显示方法