为 JavaScript 控制台添加样式

发表于 2019-04-18 分类于 Web开发 Disqus：本文字数： 324 阅读时长 ≈ 1 分钟

在常见的 JavaScript 代码中，一般会通过 console 向控制台输出简单的文字信息。为了把信息输出得更优雅更便于阅读，除了 console.log() 方法外，还可以调用 console.warn() 来输出警告信息，在输出信息前面会有一个带感叹号的黄色三角警告符号。
另外经常用到的是输出错误信息，可以通过调用 console.error() 来实现，信息前面会出现一个带叉的红色圆形图标。
在某些浏览器下，还可以按以下格式，为输出到控制台的文字进行 CSS 控制，添加样式：

1	console.log("%c需要输出的信息", "css代码");

这样可以显示缤纷的颜色，甚至图片，简直爽翻了。
下面是 Chrome 中 console.log() 的官方文档摘要，也适用于一些其它浏览器：

Format Specifier	Description
%s	Formats the value as a string.
%d or %i	Formats the value as an integer.
%f	Formats the value as a floating point value.
%o	Formats the value as an expandable DOM element (as in the Elements panel).
%O	Formats the value as an expandable JavaScript object.
%c	Formats the output string according to CSS styles you provide.

下面是一些例子：

为控制台添加样式

3D Text

1
2

console.log("%c3D Text", "text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);\
font-size: 5em;");

Colorful CSS

console.log("%cColorful CSS", "background: rgba(252, 234, 187, 1);\
background: -moz-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(175, 250, 77, 1) 12%, rgba(0, 247, 49, 1) 28%, rgba(0, 210, 247, 1) 39%, rgba(0, 189, 247, 1) 51%, rgba(133, 108, 217, 1) 64%, rgba(177, 0, 247, 1) 78%, rgba(247, 0, 189, 1) 87%, rgba(245, 22, 52, 1) 100%);\
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252, 234, 187, 1)), color-stop(12%, rgba(175, 250, 77, 1)), color-stop(28%, rgba(0, 247, 49, 1)), color-stop(39%, rgba(0, 210, 247, 1)), color-stop(51%, rgba(0, 189, 247, 1)), color-stop(64%, rgba(133, 108, 217, 1)), color-stop(78%, rgba(177, 0, 247, 1)), color-stop(87%, rgba(247, 0, 189, 1)), color-stop(100%, rgba(245, 22, 52, 1)));\
background: -webkit-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(175, 250, 77, 1) 12%, rgba(0, 247, 49, 1) 28%, rgba(0, 210, 247, 1) 39%, rgba(0, 189, 247, 1) 51%, rgba(133, 108, 217, 1) 64%, rgba(177, 0, 247, 1) 78%, rgba(247, 0, 189, 1) 87%, rgba(245, 22, 52, 1) 100%);\
background: -o-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(175, 250, 77, 1) 12%, rgba(0, 247, 49, 1) 28%, rgba(0, 210, 247, 1) 39%, rgba(0, 189, 247, 1) 51%, rgba(133, 108, 217, 1) 64%, rgba(177, 0, 247, 1) 78%, rgba(247, 0, 189, 1) 87%, rgba(245, 22, 52, 1) 100%);\
background: -ms-linear-gradient(left, rgba(252, 234, 187, 1) 0%, rgba(175, 250, 77, 1) 12%, rgba(0, 247, 49, 1) 28%, rgba(0, 210, 247, 1) 39%, rgba(0, 189, 247, 1) 51%, rgba(133, 108, 217, 1) 64%, rgba(177, 0, 247, 1) 78%, rgba(247, 0, 189, 1) 87%, rgba(245, 22, 52, 1) 100%);\
background: linear-gradient(to right, rgba(252, 234, 187, 1) 0%, rgba(175, 250, 77, 1) 12%, rgba(0, 247, 49, 1) 28%, rgba(0, 210, 247, 1) 39%, rgba(0, 189, 247, 1) 51%, rgba(133, 108, 217, 1) 64%, rgba(177, 0, 247, 1) 78%, rgba(247, 0, 189, 1) 87%, rgba(245, 22, 52, 1) 100%);\
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#f51634', GradientType=1);\
font-size: 5em;");

Rainbow Text

console.log("%cRainbow Text", "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;");

Image

设置背景图片

1	console.log("%c", "padding: 50px 300px; line-height: 120px; background: url('/images/icon.gif') no-repeat;");