火狐浏览器控制台的玩法

^{反复实践多次做，得到原理，尽可能详尽的去阐述}
谷歌浏览器 —— 控制台的花样玩法

    以往只是用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 @刘哇勇