有意思的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