示例
在使用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 样式。
意思就是每个 %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玩法