利用 console.log 能玩出什么厉害的花活？

你有打开控制台查看网页的习惯吗？

当然，你也可能看到一些开发者一不留神留在生产环境的调试信息（笑）。

你可能知道，console.log 支持一些基本的 css 样式，console.log 能做到的远不止这些！让我们看看 console.log 能整出哪些花活。

入门级: 给 console.log 加点颜色

这里的 %c 指令将 CSS 样式应用于控制台输出，指令前面的文本不会受到影响，但指令后面的文本将使用参数中的 CSS 声明设置样式。

你可以多次使用 %c,比如下面这段代码：

console.log(
  "Multiple styles: %cred %corange",
  "color: red",
  "color: orange",
  "Additional unformatted message",
);

显示效果如下图： 在 MDN文档 里你可以看到支持的 css 样式。

进阶级: ASCII Art

你在刷B站时见过B站的这个 console.log 么：

这种字符画被称为 ASCII Art，你可以在这种网站上尝试生成你需要的字符。

ASCII Art，又名“文字图”、“字符画”，是一种主要依靠电脑ASCII字符来表达图像的艺术形式，最早于1982年美国卡内基梅隆大学出现。我们常见的颜文字也是 ASCII Art 的一种！

╮(￣▽ ￣)╭ |

进阶级: 插入图片

在前面的文档中，你可以发现了，css 样式中支持 background，那我们借助 background 岂不是可以插入图片？试试下面这段代码：

console.log('%c ', 'padding-left: 50px; line-height: 50px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASAAAAEgCAMAAAAjXV6yAAAANlBMVEVHcEwzMjQvJjgxJDcvJDgwJThRNTmfxWgy2SbD9nmh8GaOP121TVnCPS/qRCvtXj3ym2j2tXmABwdyAAAABXRSTlMABTvE+i919boAAAMySURBVHgB7dzLTsNmFIXR+BqKYwLv/7KlUsWkZ9P+lS3H1vrIFEssHXmyFW6vVdcP47RB49B3tysECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAATqeog7Qz6mEhrmtiwJ1/RC6h95C1wUaq6b5/kfZewKarws0VQH6HWgG5IJyLsgFuSAX5IJckAtyQYBckAtyQS7IBbkgF+SCAAHq6rYDGqsC0AX2r6UVaAj13cn3r7fQew10n+uG4N91Z9+/WoHyuyZ07pfxhkCtEoAAAQIECBAgQIAAAQIECBAgQIAAAQIE6LL71/5AdWfZvxLQdK997qEANA19qDvJ/jUGn3l5lC1zaKob83B4iv1rbAeaprn4+aWx6hWBplAz0AYBAgQIECBAgAABAgQIECBAVwACBAgQIECAAHV1LwhUd5r/f7j8pfGPzzdQmDXmto7ay/L3v9bQsnNr6KC9LH//a/2oe4RaIR6hj7r1oK9q5q395YCmqkOBAAECBAgQIEAhQA0+gAAt1wRyQYAAAQIECBAgQIC6sisA1e29fy0J6Pl4Pn4+WWhzoOa9bOf9K/p8hh7fv/HfP+2172U7718R6Kvs8/lxQFvtZfllfAGgqepCQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECNAzFIFCVwWK+9dX6DP0vCzQ1yYB+g4QIECAAAECBAgQIECAAAECBAgQIECAAAECZPZZTz8cbkbxqFtMz4AA/b8AAQIECBAgQIAAAQIECBAgQIAAAQIECBCgEKC/+5f9C1AOECBAgAABAgQIECBAgAABAgQIECBAgAABAgQI0AooXEroykCAAAECBAgQIECAAAECBAgQIECAAAECBAgQoLLzA41VCSjXD6FlLWt2W0Ot+1eUCA2hVqCuDw1zXetfNofWrS6lbujruuyTjYqa300ZaMrP2fddE7pt0hWAbjsFCBAgQIAAAQIECBAgQNsHCBAgQIAAAQIEqKwdKD/n+P0rt/Velmt9ztLYENobqG0vyw1tz8ntvn/tuZfl4j6Vn5Nr3L8OqRkonPqGQFtKAAIECBAgQIAAAQIECBAgQIAAAQIECBCg4wME6E+7tQcAK80eGwAAAABJRU5ErkJggg==) 100% / contain no-repeat;');

我把一张 png 图片转成了 base64 贴在了 background 中，把它贴在控制台里看看效果！

需要注意的是：

• %c 后面必须插入一个字符，这里加了一个空格；
• console.log 中 的 css 不能支持 width 和 height，所以这里用 padding 和 line-height 设置宽度和高度。

还能插入 svg 和 html？！

按照上面插入图片的思路，我们也可以在 background-image 里插入 svg，试试下面的效果：

console.log('%c ', `
line-height:100px;
padding-left:400px;
background-repeat:no-repeat;
background-image:url("data:image/svg+xml,<svg viewBox='0 0 400 100' xmlns='http://www.w3.org/2000/svg'><style>path{stroke-dasharray: 400;animation: dash 10s linear;}@keyframes dash {to {stroke-dashoffset: 2000;}}</style><path d='M 0 50 Q 50 100 100 50 T 200 50 T 300 50 T 400 50 T 500 50' stroke='black' fill='transparent' stroke-width='10'></path></svg>")
`)

（添加了一点线条动画 🤘）

相比起 svg 动画，html 结合 css 的动画我们更为熟悉，console.log 中我们并不能直接渲染 html页面。但是利用 svg 中的 foreignObject  元素，我们可以在 svg 中插入常见的 html 标签！ 试试下面的代码：

console.log('%c ', `
line-height:100px;
padding-left:100px;
background-repeat:no-repeat;
background-image:url("data:image/svg+xml,<svg width='100' height='100' xmlns='http://www.w3.org/2000/svg'><style>@keyframes spin {0% { transform: rotate(0deg); background: green; border-radius: 5px; }50% { transform: rotate(180deg); background: red; border-radius: 20px; }100% { transform: rotate(360deg); background: green; border-radius: 5px; }}.square {width: 50px;height: 50px;position: relative;left: 25px;top: 25px;background-color: red;animation: spin 2s linear infinite;}</style><foreignObject width='100' height='100'><div xmlns='http://www.w3.org/1999/xhtml' class='square'></div></foreignObject></svg>")
`)

需要注意的是：

• svg 和我们用到的 html 元素需要带上命名空间 xmlns 属性，否则可能不能正常显示。

wrap up

感谢阅读本文，去给自己的网站控制台里偷偷埋一个彩蛋吧🤘！