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

谁践踏了优雅 2023-10-11 13:59 31阅读 0赞

前言  
作为前端工程师，我们每天都离不开用控制台调试代码，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()用来分析程序各个部分的运行时间，找出瓶颈所在。

console.count()统计代码被执行的次数  
function myFunction()\{  
console.count("myFunction 被执行的次数");  
\}  
myFunction(); //myFunction 被执行的次数: 1  
myFunction(); //myFunction 被执行的次数: 2  
myFunction(); //myFunction 被执行的次数: 3  
  
console.table表格显示方法

总结  
合理的利用console的各种方法，会使我们的调试过程更加愉悦，今天的分享就到这里了，记得右下角点好看呦！