火狐瀏覽器控制台的玩法

^{反復實踐多次做，得到原理，盡可能詳盡的去闡述}
谷歌瀏覽器 —— 控制台的花樣玩法

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