作为一个前端开发人员来讲,用得最多的大概就是 console.log 了,但是 console.log 的显示信息并不明显,以前我是采用加前缀的方式来快速找到直接想要的信息的,比如 console.log('======>>>','xxx',xxx)
这样,然后最近刚好看到 console.log 居然是支持自定义输出 css 样式的,就是测试了一下,效果还是很好的。
比如这样:
自定义样式也很简单,在 console.log
中用 %c
占位符标识,在 %c
之后的所有数据都会应用后面设置的 css 样式,大概就像这样:
// 123按原本的 console.log 样式输出,456的输出样式会变为红字
console.log(`123%c456`,`color:red;`)
// 多样式输出时,插入多个 %c 即可,后续对应样式以 ","分隔一一对应
console.log(`123%c456%c789`,`color:red`,`color:green;`)
更多花里胡哨的效果也可以自行更改 css 样式实现,比如用 background-image
插入背景图片等等