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
