反复实践多次做，得到原理，尽可能详尽的去阐述
谷歌浏览器 —— 控制台的花样玩法
以往只是用Chrome的控制台console.log()输出调试信息，最近看到一些有趣的控制台输出，又发现了几个hack技能。
一、输出彩色文本
一般console.log()输出的都是黑色的文本，但是Chrome提供了给输出文本自定义样式的功能，它的格式为：
console.log("%c需要输出的信息 ", "css 代码");
例如想要输出彩色文本可以在控制台输入下面代码后回车：
console.log('%c输出彩色文本', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
效果如下图：
2016071713565738
二、输出模糊字体
原理同上面一样，给输出文本添加自定义样式即可，添加的css用到的是’text-shadow’属性：
console.log('%c输出模糊字体','color:transparent;text-shadow:0 0 2px rgba(0,0,0,.5);font-size:20px;');
效果如下：
2016071714095781
三、输出一个表单
console的table()方法提供了输出表单的功能，我们给该方法可以传入一个对象输出：
var data = [{'品名': '手机', '数量': 4}, {'品名': '电脑', '数量': 3}];
console.table(data);
效果如下：
2016071714211132
四、随意编辑整个网页
得益于HTML5新特性’contenteditable’，使得添加了该属性的DOM元素变成了可编辑的状态，控制台输入：
document.body.contentEditable='true';
这段代码相当于给’body’添加了可编辑的属性，这就意味着整个网页编辑功能激活
2016071714451917
参考：前端不为人知的一面–前端冷知识集锦 By @刘哇勇