代码改变世界

多彩的Console打印新玩法

2015-09-28 13:29  破狼  阅读(2580)  评论(0)  编辑  收藏  举报

Chrome应该是每一个Web开发者必备的工具之一。它有而强大的Devtool，辅助我们的JavaScript调试，审视DOM元素，CSS即时修改等。以及它还有一个的庞大的插件系统，同时我们也可以很容易的扩展属于自己的Chrome插件。如果希望了解更多的Chrome常用调试，请参见笔者早期的微信推送文章《15个必须知道的chrome开发者技巧》。

Chrome中的控制台console，是我们检查程序允许是否正常的常用工具之一，同时它也是我们打印调试日志信息，运行调试代码的常用工具。在国内近几年，它也成为了程序员招聘的渠道之一。如下面百度的招聘信息：

百度console招聘

在Console中打印日志的方式有log、info、warn、error这几类方式。但它们并不是本文的主题。对于日志信息打印来说，一直都显得很单调。直到最新版的Chrome和Firefox (+31)，我们可以尝试更多多彩的打印格式了。在最新的Google chrome文档中console.log支持如下的格式：

  1. %s 字符串格式化；
  2. %d/%i 整数格式化；
  3. %f 小数位数据格式化；
  4. %o 可扩展的DOM节点格式化；
  5. %O 可扩展的JavaScript对象格式化；
  6. %c 利用CSS来自定义样式格式化输出。

本文将要说的就是%c这个格式化器。我们可以利用CSS样式来控制打印信息的输出。这样我们就可以得到一个多彩的日志信息，或者就是招聘广告了。

下面代码输出效果为：

console.log('%c [破狼]-[双狼说]!', 'background: #008000; color: #fff');

效果：

彩色的console log

再如：下面这段来自http://stackoverflow.com/questions/7505623/colors-in-javascript-console示例，文字光影的效果：

代码比较长，请移步到stackoverflow查看。这里主要是利用的text-shadow这个CSS3特性来实现的，文字光影效果：

var css = "text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), .....";// 

console.log("%cExample %s", css, 'all code runs happy');

效果如下：

彩色的console log

在github也有log的repo，感兴趣的读者也可以研究研究。