console.log的炫酷用法

php基础

浏览数:148

2019-2-23

AD:资源代下载服务

背景

今天使用 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(“%c发送简历到 keminok@qq.com”,”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