让 console 充满情怀

Question

一般情况下只是用 console 控制台输出简单的文字信息，但是当 console 遇到了前端的情怀，故事就不是这么发展的了~

1. 基本语法：

console.log 的基本语法如下：

console.log(object [, object, …])

2. 占位符

一打开天猫、知乎的页面 console，招聘信息就袭来啦！

天猫招聘：

知乎招聘：

小女子就好奇了，怎么做的呢，可以更酷炫一点吗？

原来啊，故事是这样开始的：浏览器提供了这么一个 API：第一个参数可以包含一些格式占位符比如%c，console.log 方法将依次用后面的参数替换占位符，然后再进行输出。

格式占位符	作用
%s	字符串
%d or %i	整数
%f	浮点数
%o	可展开的 DOM
%O	列出 DOM 的属性
%c	根据提供的 css 样式格式化字符串

给爷来一段全部用上占位符的代码，然后小女子遵命了：

// 第一个参数有五个占位符（%s），第二~六个参数会依次替换掉占位符。
console.log("%c Look %o and %O , it %s and %d ","color: #6190e8;",{AA: "WCN",BB: "wcn"},{AA: "WCN",BB: "wcn"},"CC",123);

截图如下：

%o 和 %O 在普通对象上的表现是一样的，但是在 DOM 上就有区别了：

// 格式成可展开的的 DOM，像在开发者工具 Element 面板那样可展开
console.log('%o',document.body.firstElementChild)

// 像 JS 对象那样访问 DOM 元素，可查看 DOM 元素的属性
// 等同于 console.dir(document.body.firstElementChild)
console.log('%O',document.body.firstElementChild)

随意打开的一个页面测试，firefox 总是可以查看可展开的 DOM 节点，即行为是%o；IE 不支持%o 和%O ；chrome 显示正常，截图如下

使用%c 占位符时，对应的后面的参数必须是 CSS 语句，用来对输出内容进行 CSS 渲染。于是，利用%c 配合 CSS 可以做出吊炸天的效果，比如背景色、字体颜色渐变、字体 3D 效果、图片等，情况允许再用颜文字、emoji 卖个萌，萌萌哒~

什么，竟然也支持图片？！log 一个图片试试：

console.log("%c    ","background: url(http://aotu.io/assets/img/o2logo.png) no-repeat left center;font-size: 60px;","\n");

firebug 截图如下：

不过要注意了：

• console 不能定义 img，因此用背景图片代替。
• console 不支持 width 和 height，利用空格和 font-size 代替；还可以使用 padding 和 line-height 代替宽高。
• chrome 没出来？没出来就对了……不支持啊！原因是 ConsoleViewMessage.js 源码把 url 和谐掉了 。不过可以下载 firebug 插件查看啦~ gif 图片也是支持的~~~
• console 是默认换行的。

学习了以上的东东，就是为了这个的出世，铛铛铛~~~：

firebug 截图如下：

点击 此处 可查看例子啦~~

3. 字符画

那字符画是怎么做到的呢？臣妾可以做到，哈哈哈哈。

把下面的代码粘贴在 console 控制台可查看效果哟~~

console.log("%c\n                                           :J:    \n                                          :. i    \n                  ..:::::::,:.,.,..:..::rr    J   \n               ::i:,               FB         ,v  \n  .i:i:   .:::7                     B.         :7 \n  7:  ,rri:  @B      .vOB@B@B@BY                ,:\n  Y          1       B@B@BkB@Pr        7,        :\n ::                                  ,7:.:      .i\n.i          .                      :7: .r.::i:::: \nr         i .7:,               .:ri:  ;i          \n7        77;.  .iii:::::::::iii:.    7,           \n :i:.,::;.  :r,      .....         i7             \n   .. .       :ii.               .v:              \n                .ii:.          .rr                \n                   .iii.      ii.                 \n                        i@8GB@                    \n                        vj1ULri                   \n                       7.     r.                  \n                  .,  ,r      ,;                  \n                  .E  0   %cJD   %c7                  \n                   jii2        u                  \n                    1i,   ::i. J                  \n                    i J  E   L v                  \n                   ,:iY 17   ::7                  \n                   iL ,iL7    rr                  \n                   Si r::5    i7                  \n                   ,  r       .v                  ","color: #000","color: #f00","color: #000")

没错了，效果是长这样子的：

你不会天真地认为，我是手打这个京东狗出来的吧？！

不不不，有神器相助！

这里推荐三个 ASCII 字符画制作工具：

• 在线工具 picascii
• 在线工具 img2txt
• ASCII Generator 功能比较齐全，不过需要下载使用噢~ 下载参考地址： ASCII Generator Portable(将图片转为字符画) v2.0 下载

ASCII Generator 使用方法如下：

1. 首先载入图片，然后调节大小、字体、亮度对比度、抖动程度，直到自己满意后，将其复制出来：
2. 复制到 sublime 中，将每行开头的换行删除，且替换成\n。最后只有一行代码，即保证没有换行。
3. 最后再丢到 console.log("") 代码中即可，当然，也可以添加结合%c 做出更酷炫的效果。

4. 总结

关于兼容性总结：

• 只有开发者工具打开的时候 IE8/9 才支持 console；IE6/7 不支持 console 且抛出错误。
• %c 以及 %o、%O，IE 不支持；而 firefox 的 %o 和 %O 的行为都支持 %o。
• %c 的背景图展示目前只有 firebug 支持，chrome 故意不支持。
• 链接的不同显示：chrome 可点击跳转；火狐默认开发者工具的链接前面需要有一个空格隔开文本才可点击跳转，而 firebug 总是不可点击；IE 不可点击跳转。

最后想说的： 前端人对 chrome 情有独钟，那招聘信息就只在 chrome 或者 webkit 浏览器下显示吧，哈哈。

5. 参考链接：

• Diagnose and Log to Console | Web Tools - Google Developers
• Console API Reference - Google Chrome
• Javascript 生成字符画
• Can I use console