javaScript的console

console

第一印象便是console.log，通过它在浏览器控制台进行调试输出。但除此之外还有许多方法。
比如在访问百度首页时候的控制台，会有以下的内容。但是仔细一看，你会发现，它有颜色。怎么做到的呢？

其实不难发现，输入console，可知它是一个对象，里面有着高达14个方法，而我们最常用只有一个log()，可怕。

Console - Web API 接口参考 | MDN

JavaScript Console 对象 | 菜鸟教程

通过文档我们清晰的知道各个方法的作用，以及使用方法。

通过占位符，可以改变输出的内容和样式。其中%c被称为 CSS占位符。

详解

console.log()

首先，除了console.log(object)这种语法，还有console.log(object, otherObject, string)将所有东西都整齐的打印出来。另外，还有console.log(msg, value)，通过占位符来输出，执行方式与 C 语言的输出类似。

对于%c，输出样式。

一个%c是将此后所有内容都进行渲染

console.log('I am a %cbutton', 'color: white; background-color: orange; padding:2px 5px; border-radius: 2px');

两个%c则是对其中间内容渲染。

console.log('I am a %cbutton%c not a div', 'color: white; background-color:orange; padding: 2px 5px; border-radius: 2px','color: "auto"');

当然渲染的只是样式，没有实质性的功能（按钮，点击事件等）

如果想%c展示出来呢? 与\类似，写两个即可，比如将上述的语句展示出来。

console.log('I am a %cbutton%%c not a div', 'color: white; background-color:orange; padding: 2px 5px; border-radius: 2px','color: "auto"');

console.dir()

通常看，它与log()的功能非常类似，但也有略微不同，主要在对文档结构的输出方面。

展开来看，log只是输出了文档结构的内容，怎么写的怎么输出。清晰展示DOM节点，当我们选中时候，还可以跳转子DOM节点。

而dir却是一种更对象化的输出方式观察元素节点，在监测元素节点方面，这种结果无疑是最好的。

console.warn()

它可能是log()最直接明显的替换产生的方法，它的级别是warn级别而不是一个info级别，你可以将所有的console.log()过滤掉只留下console.warn()。

在Vue的部分源码中也是使用console.warn()来操作的。

//vue.js
tip = function (msg, vm) {if (hasConsole && (!config.silent)) {console.warn("[Vue tip]: " + msg + (vm ? generateComponentTrace(vm) : ''));}
};

console.table()

这个，就是将对象数组展示为列表的数据方法，变得更加简洁可观。例如对一个对象数组使用此方法。

对于log()输出结果是一个小箭头的省略形式，展开来看，可以清晰的查看对象。

而table()的输出更加简洁，更直观展示。并且值得一提的是，可以通过第一行的右上角箭头可以进行排序。table()最多只处理1000行的数据能力，不适用所有数据集合。

当然如果只想要某一列展示，可以通过第二个参数进行传递

console.table(transactions,["id","price"])

console.assert()

它的第一个参数是falsey时，与log()函数无异。当第一个参数是真值的时候什么都不做。

牢记，它的作用是判断，而不是过滤。

它的使用场景与循环时候要显示特殊的数据相似。

if(obj.num === 3){console.log(obj)
}

假设我们上面的值在时间戳里有一个 null 或者 0，这会破坏代码日期格式。

当和任何有效的事物对象一起使用时会跳过。但是有一个触发了我们的日志记录，因为时间戳在 0 和 null 时为假值。

有时候，想实现更加复杂的场景，举例，对于上述表格中看到了关于用户WAL2025的数据，并想展示来自它们的事务。

console.assert(transactions.buyer === 'WAL2025', transactions);

看起来没毛病，但是并没有用，牢记，场景必须是否定态，它的作用是判断，而不是过滤。

console.assert(transactions.buyer !== 'WAL2025', transactions);

结语

剩下的方法，演示过于困难或者简单，还是看文档理解比较好。

Console - Web API 接口参考 | MDN

JavaScript Console 对象 | 菜鸟教程

其他方法的存在，让我们可以得到比log()的信息更多一些，并且不需要调试器的情况下，这些工具还是很有用的。

附图

简洁直观的理解使用 console

[图片来源：B站Zhangyaing]