你不知道的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