摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。在代码中使用的最简单的用法就是写个在控制台打印一行消息。跟的区别在于会对输出的对象进行展开。用于显示一组的控制台输出，要搭配来使用。
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输出，你一下子找不到你自己的模块的输出语句。如果给你自己的模块输入语句应用了不同的颜色，相对来说比较好定位到输出的地方，这是提高效率的一个小技巧。
其他的函数例如info,error,warn基本类似，只是在代表的意义和输出的样式有所区别。
除此之外，console还有一些比较少见但实用的api。
console.trace跟log的区别在于trace会对输出的对象进行展开。
console.group用于显示一组的控制台输出，要搭配console.groupEnd来使用。
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/78023.html
摘要：下面推荐几款插件，有些是博主亲自试用过的，希望对大家的开发调试有帮助。这有点类似前面说过的插件。类似的针对不同框架的调试工具还有最后介绍的不是的插件，而是主题。总结好的，这次的插件就推荐了这几个。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔壁的产品小哥都知道打开F12改一下页面元素的...
摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔...
摘要：在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。移动调试断点断点方法远程映射本地调试在移动上面开发调试是很复杂的，所以就有了。 在前端开发中，调试技术是必不可少的技能，本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点 debugger断点 native方法hook 远程映射本地调试 Weinre 在移动上面开...
1、Chrome控制台小技巧 打开和关闭抽屉式选项卡：按Esc键可打开和关闭 DevTools 的 Drawer（抽屉式选项卡） 在Drawer（抽屉式选项卡）中，你可以在 Console 控制台中执行命令，查看动画检查器(Animations)，配置网络条件(network conditions)和渲染(rendering)设置，搜索(search)字符串和文件等 showImg(https...
1、Chrome控制台小技巧 打开和关闭抽屉式选项卡：按Esc键可打开和关闭 DevTools 的 Drawer（抽屉式选项卡） 在Drawer（抽屉式选项卡）中，你可以在 Console 控制台中执行命令，查看动画检查器(Animations)，配置网络条件(network conditions)和渲染(rendering)设置，搜索(search)字符串和文件等 showImg(https...
阅读 2031·2023-04-25 16:42
阅读 1494·2021-11-25 09:43
阅读 1057·2021-11-22 14:45
阅读 2161·2021-10-19 13:10
阅读 2587·2021-09-29 09:34
阅读 3205·2021-09-23 11:21
阅读 1612·2021-09-03 10:29
阅读 1922·2021-08-12 13:25
