console.log的炫酷用法

背景

今天使用 chrome 浏览器打开百度首页（https://www.baidu.com），打开开发者工具，windows 下的快捷键是 F12，MAC 上的快捷键通常是option+cmd+i，接着点击 console tab，看到了下面一幕。

什么，你发现了一大堆报错，那是因为笔者在 chrome 浏览器上安装了 adBlock扩展（advertisement block，即“广告阻塞”）导致的，请读者忽略这个问题哈。

除了一堆报错之外，我们应该也发现了百度的招聘广告，竟然可以产生高亮的红色字体，有点炫酷不是吗。

继续探索，按照以下步骤进行：

找到对应的代码行发现原来 console.log 可以这么玩。

深度探索

经过一番 google 之后，我们来到 google chrome 开发者工具的官网地址，文档链接（https://developers.google.com/web/tools/chrome-devtools/console/console-write），内容引用如下：

使用 CSS 设置控制台输出的样式

利用 CSS 格式说明符，您可以自定义控制台中的显示。使用说明符启动字符串，并设置为您希望的样式，作为第二个参数。

尝试使用下面的代码：

console.log("%cThis will be formatted with large, blue text",

 "color: blue; font-size: x-large");

..将您的日志输出设置为蓝色的大字体：

是不是有点炫酷，下面还有更炫酷的。

1. 输出 3D 文本

console.log("%c发送简历到 keminok@qq.com"," 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")

效果如下：

2.输出多彩背景

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")

当然，你也可以输出更多好玩的文本样式，这里就需要读者朋友自己好好探索了，尚未测试代码对浏览器的兼容性，请在发布到生产环境之前进行检查，本文旨在提供一个简单的前端代码学习思路，愿君多采撷。

参考资料：

1. https://www.w3cplus.com/css3/text-effect
2. https://www.cnblogs.com/Wayou/p/chrome_dev_tool_style_console.html
3. https://developers.google.com/web/tools/chrome-devtools/console/console-write