在很久的以前，因為經常在瀏覽器控制台調試修改數據，想到用戶如果使用控制台配合抓包工具修改上下行流量中的數據，會給站點帶來不定的安全威脅，所以一直想找個方法，准確的說是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