给console.log加点样式
Console.log是前端开发中最简单、最强大的工具。然而它并不是我们想象的那么简单。在平常的开发过程中,你可能只会用它来在控制台里面简单的打印一点信息而已,但是你却不知道它还可以给你打印的信息定义样式。
如我们想打印一条错误信息,并且让它显眼一些,我们可以这样:
1 | console.error("%c\nid is undefined", "font-size:20pt") |
你还可以给你的log信息加一些阴影或渐变:
1 | console.log("%c有阴影的log", "text-shadow: 1px 1px 1px grey") |
你还可以只让一部分信息应用样式:
1 | console.log("部分加粗:%c加粗", "font-weight:bold") |
每遇到一个%c
都会重置样式:
1 | console.log("%c样式一%c样式二%c样式三", "color:red","","color:orange;font-weight:bold") |
使用图片:
1 | console.log("%c ", "background: url(http://blog.u.qiniudn.com/images/sponsor120.jpg) no-repeat center;padding-left:120px;padding-bottom: 200px;") |
网上还有人专门写了一个console.graph
更奇妙的是你还可以在console里面绘制canvas图形。
addition
上面代码的%s表示字符串的占位符,其他占位符还有:
%d
,%i
整数
%f
浮点数
%o
对象的链接
%c
CSS格式字符串
原文作者: bukas
原文链接: https://www.noonme.com/post/2014/09/给console.log加点样式/
许可协议: 知识共享署名-非商业性使用 4.0 国际许可协议