非常有趣的Console

Console命令用来调试网页运行，在javascript开发调试时，我们会经常使用诸如console.log()命令来显示输出的信息。现代浏览器的控制台（一般按F12可呼出）console面板可以帮助我们更好的调试web网页脚本程序。

查看演示

曾经，在很多的网站上我们会看到开发者隐藏在调试工具console里的招聘信息，来看百度首页的招聘信息，效果如下图（chrome浏览器）：

本文将给大家介绍如何实现console命令输出格式化（带样式）、图片等信息，让console变得非常有趣。

基本用法

console.log的基本语法如下：

console.log(object [, object, …]);
//console.log('zhishitu'); //输出：zhishitu

占位符

天猫、知乎等网站的首页console里也有他们特有的招聘信息，当然这些招聘信息针对性很强，他说给web开发人员看的，更确切的对象应该是前端开发人员。

首先，我给大家说下占位符的事。浏览器提供了这么一个API：第一个参数可以包含一些格式占位符比如%c，console.log方法将依次用后面的参数替换占位符，然后再进行输出。熟悉PHP或者C程序的同学应该很了解占位符这个概念。

以下将占位符列表说明：

%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占位符是最常用的，使用%c占位符时，对应的后面的参数必须是CSS语句，用来对输出内容进行CSS渲染。于是，利用%c配合CSS可以做出吊炸天的效果，比如背景色、字体颜色渐变、字体3D效果、图片等，甚至可以是火星文、表情包等。

console.log("%cHelloweba欢迎您！","color: red; font-size: 20px");
//输出红色的、20px大小的字符串：Helloweba欢迎您！

不过要注意了：

console不能定义img，因此用背景图片代替。

console不支持width和height，利用空格和font-size代替；还可以使用padding和line-height代替宽高。

chrome不支持img啊！原因是ConsoleViewMessage.js源码把url和谐掉了。不过可以下载firebug插件查看啦~ gif图片也是支持的~~~

console是默认换行的。

字符画

在天猫和知乎的console面板里，我们还发现了有有趣的文字图形，那这个又是怎么实现的呢？

这个文字图形我们暂且把它叫做字符画。

那么他们这个看起来比较字符画是手打出来的吗？不是的，有神器可以将图片制作成ASCII字符画。

推荐大家2款在线的生成工具：

在线工具：picascii

在线工具：mg2txt

大概方法：使用在线工具生成字符画，然后复制到sublime中，将每行开头的换行删除，且替换成\n。最后只有一行代码，即保证没有换行，最后再丢到console.log("")代码中即可，当然，也可以添加结合%c做出更酷炫的效果。

兼容性问题

只有开发者工具打开的时候IE8/9才支持console；IE6/7不支持console且抛出错误。

%c以及%o、%O，IE不支持；而firefox的%o和%O的行为都支持%o。

%c的背景图展示目前只有firebug支持，chrome故意不支持。

链接的不同显示：chrome可点击跳转；火狐默认开发者工具的链接前面需要有一个空格隔开文本才可点击跳转，而firebug总是不可点击；IE不可点击跳转。

这里我把demo中的代码贴出来：

console.log("\n         :        .            i#:  i#.                                  ff                         \n        ##t      ##.           ##K  ##K                                  ##                         \n        ##f      ##            ##K  ##K                                  ##                         \n        ##f      ##            ##K  ##K                                  ##                         \n        ##t      ##            ##K  ##K                                  ##                         \n        ##:     :##    G###f   ##K  ##K   .E##E   ##   #D  L#.   ####    ######W      E###          \n        ##:    :G##   #######  ##K  ##K   ######  ##  ###  ##E i######i  ########   .######,        \n        ##D########  ###: t##  ##K  ##K  ###GD##t ##. ###  ##  ###  ###  ##K  ,##.  ###, ##         \n        ###########  ##  ####  ##K  ##K ,##   ### ##j;###;;## G## i###f  ##    W#K ###   ##         \n        ##t     :## j#####E    ##K  ##K K##   f## #####K#W##E ######i    ##    j## ##,   ##         \n        ##.     :## f###j      ##K  ##K D##   D## L####:####  ####       ##    ##E ##;   ##         \n        ##      :##  ##f   t#f ##K  ##K .##. .##i  ###G ####  E##.   W#  ##;  K##  ###   ##.        \n        ##      :##  W#######f ##K  ##K  #######   ###  ###K   ########  #######G  ;########        \n       .##       ##   i#####i  K#i  E#t   W####    G#W  f##    .E#####.  ######i    L####L##     ");

var str = "欢迎访问 http://www.zhishitu.net/ ，围观前端技术文章啦！\n关注微信公众号：%czhishitucom%c，不定期给您推送精选技术文章！\n";
 console.log("%c"+str+"\n%c    ","color: #6190e8;","padding: 0 5px;color: #fff;background: #6190e8;font-size:20px;","color: #6190e8;","background: url(http://www.zhishitu.net/attachments/zhishituwx.jpg) no-repeat left center;font-size: 100px;","\n\n");

运行后，打开console面板，效果如下图：