【JS】给 console 来的样式

在使用JavaScript开发时， console 的使用率是非常高的。虽然使用率高，但反而可能因此忽略了  console 的一些冷门玩法。



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





这种输出的实现方式是给 console 添加样式。



给  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 样式。



https://developer.mozilla.org/zh-CN/docs/Web/API/Console



意思就是每个 %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 文档