[转]给console.log加点样式

Console.log是前端开发中最简单、最强大的工具。然而它并不是我们想象的那么简单。在平常的开发过程中，你可能只会用它来在控制台里面简单的打印一点信息而已，但是你却不知道它还可以给你打印的信息定义样式。

如我们想打印一条错误信息，并且让它显眼一些，我们可以这样：

?

1	console.error("%c\nid is undefined", "font-size:20pt")

你还可以给你的log信息加一些阴影或渐变：

 

?

1 2 3

console.log("%c有阴影的log", "text-shadow: 1px 1px 1px grey")   console.log('%c彩色文字啊 ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

 

你还可以只让一部分信息应用样式：

 

?

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表示字符串的占位符，其他占位符还有:

?

1 2 3 4 5 6 7

%d, %i 整数   %f 浮点数   %o 对象的链接   %c CSS格式字符串

　　

 

原文：https://www.noonme.com/post/2014/09/%E7%BB%99console.log%E5%8A%A0%E7%82%B9%E6%A0%B7%E5%BC%8F/