你不知道的Chrome DevTools（1）：神奇的console

Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的标签代码就能看到页面效果，这年头谁不会用Chrome开发者工具呀。

但是Chrome能做的远不止你平常用的那么简单，这一个小小的开发工具集成了很多高级的功能你未必知道。我打算把一些Chrome DevTools上使用的高级技巧写成《你不知道的Chrome DevTools》这一系列的博文，希望大家一起学习学习。

---

console简介

这一篇主要介绍我们常用的console这个浏览器api。在Javascript代码中使用console的最简单的用法就是写个console.log()在控制台打印一行消息。然而你知道吗？console除了用log这个方法来打印消息外，还error、warn、assert、dir、info、trace等高级方法，每个方法对应不用的用途，在下文将一一叙述。

多彩的console.log

其实console.log()方法里可以传入多个参数，控制台会根据参数的设置把多个消息打印到同一行的。比如这样：

    console.log("test", 123);

这样在控制台就会这样显示：

如果log方法里第一个参数是带有特别标识符的字符串的话，控制台会根据不同的标识符来把后面的参数填充到前面的字符串中去。常见的标识符有以下：

• %s 表示输出字符串
• %d 表示输出数字（也可以用%i）
• %f 表示输出浮点数值
• %o 表示输出Dom元素
• %O 表示输出JavaScript对象
• %c 表示对输出的文字应用特殊的样式

从下面几个截图可以看得出这些标识符的用法了。

最特别的还是%c的用法，使用了%c你就可以让控制台输出的内容包含你自己定制的样式。例如这样：

可以看出%c应用的样式是CSS的语法，所以基本上CSS支持的样式语句都可以支持。当然，Chrome是有过滤一些CSS语法的，比如对元素定位的CSS语法就不支持（ps：貌似定位啥的也没用，除非是想捣乱的程序员，呵呵）

彩色的输出语句貌似看起来中看不中用，其实不然。大型的web开发项目，特别是多人分模块开发的时候，控制台一大堆console.log输出，你一下子找不到你自己的模块的输出语句。如果给你自己的模块输入语句应用了不同的颜色，相对来说比较好定位到输出的地方，这是提高效率的一个小技巧。

console的其他API

其他的函数例如info,error,warn基本类似，只是在代表的意义和输出的样式有所区别。

除此之外，console还有一些比较少见但实用的api。

console.trace

console.trace跟log的区别在于trace会对输出的对象进行展开。

console.group

console.group用于显示一组的控制台输出，要搭配console.groupEnd来使用。

console.time

console.time用于显示代码执行的时间，要搭配console.timeEnd来使用。

其他

其他的console方法我将简单列举一下，就不一一详细说明了，详细可以参考Google的开发文档。

• console.assert() 用于判断表达式，满足表达式时才输出语句；
• console.debug() 用于输出输出debug的信息；
• console.dir() 用于展开输出一个dom元素的JavaScript对象；
• console.profile() 用于记录代码消耗CPU的信息；
• console.timeStamp() 用于标记运行时的timeline信息；
• console.count() 用于记录代码执行的次数；
• console.memory 用于显示此刻使用的内存信息（这是一个属性而不是方法）；
• console.table() 用表格的形式来输出信息；
• console.clear() 清空控制台的内容（当然你可以用快捷键ctrl+L）；

另外，再来优惠大派送，介绍几个在Chrome控制台上比较有趣的命令。

• $0 可以在控制台输出在Elements面板选中的页面元素；
• $_ 表示上一次在控制台键入的命令，你也可以用快捷键“上方向键”来达到同样的效果；
• $x 可以用xPath的语法来获取页面上的元素；

结语

Chrome的console语法确实很强大很方便，多点使用不同的方法可以提高咱们前端的开发效率。写在最后的话：本文基本上是在参考了Google的DevTools文档之后，结合自己的经验来写的，目的是把文档中说到的一些特别的方法介绍给大家，如果想多点了解，可以到Google的DevTools文档看看。致谢！

参考文献

https://developers.google.com/chrome-developer-tools/?hl=zh-cn