有意思的Console

　　在好久的之前，由于常常在浏览器控制台调试修改数据，想到用户若是使用控制台配合抓包工具修改上下行流量中的数据，会给站点带来不定的安全威胁，因此一直想找个方法，准确的说是js的方法“禁用”控制台，也就是用户没法使用浏览器F12调出控制台，后来发现这个想法比较好笑、不可行，由于控制台是浏览器的实体功能之一，若是不从浏览器的源代码处销毁这一功能，是没法改变调用控制台这种状况的，只能重写代码改变原有的一些功能，浏览器插件也许能作到禁用控制台，这个倒没尝试过，也不重要，毕竟就是作到了这个插件推广不开等于没用，固然中间也想看看一下大站是怎么作到的，因而跑去扒百毒淘宝的，结果以下：

百毒：

天猫：

看到的是这些，大家城里人真会玩，我记得当初从业的时候老大就告诉我不要在console里输出东西，调试后要清掉，否则就太low了，而我平时使用console功能基本仅限于在代码断点处console个string判断执行状况，或者将请求的数据打印出来方便查看数据结构，这种console出样式、字符图画或者是图片的没在站点里使用过(清除console的原则，最新作的一个项目使用了哈哈，敬请期待)，因此这篇博文list一下console的有意思的玩法；

　　console语法：

console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);

 

参数说明：

obj1 ... objN：一系列要打印的对象； 

msg:一个要打印的javascript string;

subst1 ... substN:用于替换msg的javascript对象，能够对输出的格式进行额外的控制;

然而咱们日常用的基本是这样的：console.log(data)，后面的参数不多去用的；好比console.log("sd")控制台就会打印出“sd”;

那么上面显示的那样打印多种格式是怎么作到的那，在官方提供的consoleAPI中提供了多重多样的输出方式，详细的请戳这里，说明以下：

能够看到里面还有对Dom操做的的console，“%o”,"%O",什么玩意，反正这个功能我没用过，好比下面把body打印出来：console.log('%o',document.body)：

(貌似没什么卵用)

天猫式的多样式字体就是配合表格中的%c实现的，根据提供的css样式输出给定的string，好比下面一句的输出：

代码为：

console.log("%c%s","color: red; background: yellow; font-size: 40px;","警告,请不要在此粘贴执行任何内容，这可能会致使您的帐户安去带来威胁，给您带来损失！");
console.log("若有任何疑问请联系%c0755-836xxxx", "color:red;font-weight:bold;");

 而且能够输出图片， 可是不是直接输出图片，图片的输出其实是一背景图片的格式输出的，也就是写成css background url的形式输出的，能够尝试如下一段代码：

console.log("%c    ","background: url(https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png) no-repeat left center;font-size: 300px;","\n");

效果以下：

 

注意这里不支持宽高的写法，能够用font-size来代替，能够说为所欲为想写什么样式写什么样式，至于这里css写什么，就凭你作主了，css3屌的能够尝试写个闪闪放光的渐变3d效果等，各类屌炸天的效果大神们自行探究；

　　console字符玩法：

console还有个颇有意思的字符画玩法，就是在控制台输出字符画，这种常常在各类神注释中见到，同理也能够console出来，好比：

 

 ，城里人就是会折腾，这是字符画的一种，不少输出的状况是公司log，宠物等简笔画，通常很简单，有的复杂一点的打印就麻烦了，毕竟手打几乎是不可能的，其实没必要如此，神器在手，天下我有，下面的一款神器能够将图片转换成字符画，这款神器就是ASCII Generator，用法也比较简单，功能很强大，载入照片，调节各类参数，能够获得所载入照片的字符画，好比载入本人的照片微调后获得：

恩，摘掉眼镜看其实没什么区别 EXM?

但这个输出的是换行的一系列的字符串，在console中是不能输出的，将这些string赋值到编辑器中，将每行开头的换行删除，且替换成\n。最后只有一行代码，而后放到console.log里面，就能够输出了；

如打印本人的照片效果以下：

额，貌似被拉长了......,若是是一些简单的影像或gif(好比小人走路)，定点几个图片，转换成字符串，而后循环的打印再clear，就能够在控制台实现‘动画’的效果，有兴趣、精力的小伙伴能够玩一下哈哈。

 

浏览器支持状况以下图，基本覆盖了，追问IE的请靠边站，结合这些api，之后也能够在站点中加入各式各样的console了，挺有意思吧！

 

原文地址：有意思的Console， 薛陈磊 | Share the world