从console.log开始(console.log的详细介绍)

Console.log作为一个前端开发人员，可能每天都要用它来分析和调试，但是你可能不知道这个简单函数背后简单的一面.

基础

首先，简单科普的作用。前端开发人员可以调用console.log，登录js代码的任何部分，然后就可以在浏览器的开发人员控制台中看到这个函数调用时指定的变量或表达式的值。

最基本的调用方法：

console . log(' 123 ')；//123 console.log('1 '，' 2 '，' 3 ')；//1 2 3 console . log(' 1 \ N2 \ n3 \ n ')；//1//2//3我们可以按照上面的方式输出单个变量(表达式)、多个变量和新的行。这对于大多数日常开发案例来说已经足够了。

印刷格式

console.log('%d %d=%d '，1，1，2)；//1 1=2写了C的童鞋一定要熟悉以上的编写方法，这样可以保证模板和数据的分离，在复杂的输出中结构更清晰。但是，简单的输出就不那么方便了。

console.log支持的格式标志是：

不用说，前三种格式，%o和%O用于输出对象对象。对于普通对象对象，它们之间没有区别，但是在打印dom节点时，它们是不同的：

带有%o的输出与不带打印格式打印的结果相同，您可以查看该dom节点的内容和子节点。使用%O，您将看到dom节点的所有对象属性。对应于我们通常向dom节点发送数据的两种方式：

顺便说一下，打印格式也可以与普通输出混合使用：

console.log('%d %d='，1，1，2)；//1 1=2丰富风格输出

大家一直在等待的高潮来了，鼓掌，再看姐姐：

这是怎么做到的？其实看完最后一节，肯定有童鞋，就是用%c做css样式的打印格式。有两种常见的丰富样式输出：文本样式和图片输出。

文本样式

很简单，对吧？这是最简单的书写方式，其实%c可以写在任何地方，不局限于开头，然后%c之后的所有输出都会应用我们指定的样式。

如果我想在一个单独输出的句子中间设置一些单词的样式，该怎么办？一般来说，没有办法，但有灵活的手段：

附件：控制台输出的超链接。日志将被自动识别，并添加灰色字体颜色和下划线样式，但这不能被% C覆盖

图像输出

严格来说，console.log不支持直接图像输出，但是我们可以用背景图曲线救国。但是，当你真正尝试的时候，你发现并没有那么简单，你不能像往常一样输出背景图像。原因是不能直接设置宽度和高度样式。

就像上面的例子一样，为了输出一张438166的图片，我使用填充将整个区域扩展到我想要的大小，然后设置行高。每个人都应该对这些属性的价值感到困惑。我将逐一解释：

我拍图片高度背景的时候线高的值就不用多说了，但是你会发现不重复设置还没有生效。填充的左右两边的值显然是图片宽度的一半。最让人头疼的是填充顶部和底部的值。我尝试了半高的值，输出大小比我想象的要高！所以建议：用我的方法输出，稍微调整一下填充的上下值，直到达到你想要的输出

我之所以强调我的方法，是因为有其他方法可以控制背景图像输出。感兴趣的童鞋也可以参考名为console.image的插件：

说了这么多丰富的样式输出，现在我不得不提到浏览器兼容性：

个人认为，控制台丰富的风格输出看起来非常高级，但是开发人员会很难编写出来。毕竟，控制dom节点应用普通的css样式是不可能的。其中，图像输出真的是一个不桑、不辛、不兵、不旷的功能。

那些兄弟姐妹

所有这些都可以作为调试输出，不同的是：

不同的样式可以通过调试器的底部过滤出不同的输出项

因此，类似于网站重构中html的语义需求，当我们有大量的调试输出时，根据实际场景使用不同类型的输出函数可以使我们的输出更加有条理。

值得一提的是console.error，我们在调用这个函数的瞬间，不仅可以输出错误消息，还可以输出调用栈！这无疑给我们调试带来了很多便利(当然可以用js断点一步一步跟踪)，这是console.log所没有的。除了console.error，还有一个函数console.trace，也可以在调用的瞬间打印出调用栈，但是它的输出样式和位置和console.log一样：

其实这个系统里面是有功能的(类似的有这么多):

//等效的console . log(“% o”，document . body)；console . log(document . body)；//等效的console . log(“% O”，document . body)；console . dir(document . body)；他们是失散多年的兄弟姐妹。

邻居

其实除了打印调试信息，console还有很多强大有用但又低调的界面。

控制台.时间控制台.时间结束

这是性能调试的利器，知道NodeJs的童鞋就很清楚了。我相信很多童鞋都做过这样的事情：在我们代码的某一段之前添加一个类似startTime的变量，给它一个时间戳，然后在我们执行完代码之后，放一个时间戳，将两者相减，然后输出结果。现在我们可以通过使用上面的函数节省很多精力：

以上是我写的判断图片是否在可视区域的懒加载。可以看出，调用10000次大约需要160ms。使用这两个界面多方便啊！此外，我们可以使用字符串作为函数参数来区分不同的性能计时。

控制台.计数

这是一个计数器，我们可以给它传递一个名字，比如a，然后每次我们调用console . count(‘a’)(可以在不同的地方不同的函数)，它就能打印出这样的调用已经执行了多少次：

这个功能特别适合一些复杂的场景。有时候一个函数在很多地方被调用，但是我们想知道这个函数是调用的少还是重复。此时，使用计数器比js断点本身记忆和调整几次要快得多。

console.assert

断言，程序员应该熟悉这个词：Assert。使用console.assert，你可以把它理解为禁忌技能(三国杀多打孩子)。如果你猜出这个表达的真相，那么我可以输入我的信息：

不用说，使用这个函数让我们只有在满足一定条件的情况下，才可以在某些地方调试输出，这使得输出更加干净。当然也可以用if语句，但是写起来有点麻烦。

console.group

你一眼就能看出它是分组输出：

这个分组也可以嵌套：

显然，这个函数特别适合大量调试输出，有望用于大型项目。但是，有时候打开控制台看到全屏输出，也会头疼，所以可以分组输出，默认折叠：

控制台。清除

最后，最后，是时候清理场地了。

特别适合多人开发项目，如果对别人的调试输出不满意，可以用这个函数全部清除，然后输出自己的调试信息，不用对这个函数客气。

摘要

我是王大水。我从没想到控制台日志的八卦会由我来完成。我以为我能吹几万字的水。

这是“未知界面系列”的第一章。浏览器实际上为我们提供了很多有用的界面。如果我们不知道，如果我们不知道，我们觉得我们不能使用它们。本系列试图逐一挖掘它们，并给出适用场景的建议。敬请期待。

附属于康索。timestampconsole.profile是chrome调试面板的两个选项卡，可以在调试性能时使用。感兴趣的童鞋可以看看：谷歌开发者文档的控制台。