示例

在使用JavaScript开发时， console 的使用率是非常高的。

但往往因为熟悉而忽略了很多有趣的玩法。

比如vue的开发者，通常会在chrome浏览器装上 Vue.js devtools 这款插件。在开发过程中，这款插件会在控制台打印以下内容。

实现方法

这种输出其实并不是什么黑科技，只要懂 css 就能实现。

给 console 添加样式，需要使用到占位符：%c

console.log(
  `%c vue-devtools %c Detected Vue v2.6.11 %c`,
  'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
  'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
  'background:transparent'
)

上面的代码最终输出

代码的第二行，是输出文本内容，而其中有3个 %c ，分别对应3-5行的样式。

根据MDN的描述：

可以使用 %c 为打印内容定义样式，指令前的文本不会受到影响，但指令后的文本将会使用参数中声明的 CSS 样式。

developer.mozilla.org/zh-CN/docs/…

意思就是每个 %c 对应的样式，会影响 %c 后面的文本样式。

但后面的 %c 会覆盖前面 %c 的样式，并且不会继承前面的 %c 的样式。

如果输出的文本里面希望包含 “%c” 这个字符，可以使用 “%%c” 的方式进行转义。

存储样式多次调用

如果需要多次使用，可以使用字符串类型的变量把样式存起来。

let style1 = function () {
  return 'color: pink; font-size: 30px; text-shadow: 0 0 10px rgba(255, 255, 255, 1)'
}

let style2 = 'color: yellow; background: yellowgreen;'
console.log('%chello %cworld', style1(), style2)

以上写法都是合法的，只不过样式写得非常丑而已～

由于我的电脑进入了夜间模式，浏览器默认使用了黑暗的皮肤，所以背景色变成黑色了。

参考

console 还支持以下样式：

background 与其全写版本。
border 与其全写版本。
border-radius
box-decoration-break
box-shadow
clear 和 float
color
cursor
display
font 与其全写版本。
line-height
margin
outline 与其全写版本。
padding
text-transform 这类 text-* 属性
white-space
word-spacing 和 word-break
writing-mode

注意: 控制台信息的默认行为与行内元素相似。为了应用 padding, margin 这类效果，应当先这样设置 display: inline-block。

更多 console的玩法可以查阅 MDN 文档 - console玩法

给console来的样式

示例

实现方法

存储样式多次调用

参考