帶css樣式的console.log() ，進來了解一下

無聊的時候，喜歡打開一些無聊的網頁，搞一下chrome爸爸的控制檯。

常規操做

• 開發前端頁面過程當中，少不了的就是開啓控制檯，打印一些定義的東西，看看到底輸出是什麼；
• 打個斷點，讓代碼飛慢一點，一步步的……深.……入……；
• 瞅一瞅network的加載資源，靜態資源、參數、請求頭，若是實用，順勢扒下來模擬一下，作個小東西；
• 找一下奇怪的dom元素，看看css樣式是怎樣的；
• 某些頁面音頻須要充錢？不慌，能在頁面試聽的，打開控制檯，全局搜索一下<audio,可能會有意外的收穫；

然而，在忙碌的開發過程當中，哪兒有這麼清閒，用的最多的就是:

console.log("變量a初始值:",a);
xxxxx；
對a的某些賦值；
xxxxx；
console.log("變量a變化後的值:",a);
複製代碼

或者是：

$.ajax({
            url:"/xxx",
            type:"post",
            data:{ start:0},
            dataType:"json",
            success:function (data) {
                //先抱着試一試的態度對比下後端返回的數據及格式與接口文檔
               console.log(data);
            }
        })
複製代碼

或者……常規操做，很少說

換個姿式操做

想必你必定打開過百度首頁，按過F12，若是那樣，你必定了解百度也會覬覦你的才華，畢竟常打開控制檯的畢竟多數是程序猿嘛。

一張網頁，要經歷怎樣的過程，才能抵達用戶面前？ 一位新人，要經歷怎樣的成長，才能站在技術之巔？ 探尋這裏的祕密； 體驗這裏的挑戰； 成爲這裏的主人； 加入百度，加入網頁搜索，你，能夠影響世界。

再來看看知乎

以及滴滴

hello，程序員哥哥，又見到這個彩蛋是否是很開心？ 我知道你此刻想吐槽，想攻擊咱們官網； 更重要的是你想優化，想改變這個網站，甚至是整個滴滴。 找到了合適了你的起點了麼？ 從這扇門開始改變滴滴，改變世界，改變本身。 芝麻開門:發送簡歷至 hr@diditaxi.com.cn（ 郵件標題請以「姓名-應聘XX職位-來自console」命名） 你創造世界的舞臺：：http://job.didichuxing.com/

---

console.log（"居然能夠這樣玩兒打印消息麼？")

他們的控制檯過高逼格了，個人控制檯信息就不同，我姿式到位啊！

嗯,姿式很不錯吧？搞怪的同時，瞭解了console的一些有用的用法:

1. __console.warn("網絡不穩定")__ -----打印一個警告信息;
2. __console.error("網絡錯誤")__     -----打印一條錯誤信息;
3. __console.group('嘲諷(💩)')__ -----打印樹狀結構，配合groupCollapsed以及groupEnd方法;
4.__console.groupEnd()__-----結束當前Tree;
5.__console.table(Arr)__------將數據打印成表格;
複製代碼

var Arr = [
    ["aa","bb","cc"],
    ["dd","ee","ff"],
    ["gg","hh","ii"],
]

console.table(Arr);
複製代碼

6. console.log()的變量值替換

console.log("圓周率整數部分：%d，帶上小數是：%f",3.1415,3.1415);
//輸出：圓周率整數部分：3，帶上小數是：3.1415
複製代碼

7.console.assert(false, "咱們好像在哪兒見過")-----判斷第一個參數是否爲真，false的話拋出異常而且在控制檯輸出相應信息。 8.console.log()的css樣式設置 先看下代碼:

console.log("%c3"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:6em;line-height:60px;")

console.log("%c2"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:4em;line-height:60px;")

console.log("%c1"," text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:2em;line-height:60px;")

console.log('%c南京熱仍是東京熱.', 'color: #fff; background: #f40; font-size: 24px;border-radius:0 15px 15px 0;padding:10px;');

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;width:1px;height:40px;padding:2px;")

console.log("%c 熱 熱 熱", "color:red;font-size:30px;font-weight:bolder;padding:50px 420px;line-height:10px;background:url('http://img.zcool.cn/community/0127c0577e00620000012e7e12da0e.gif') repeat-x;background-size:contain;");

複製代碼

大體意思就是第一個參數是"%c" + 打印的內容，第二個參數就是css樣式了。 是否是換個姿式很簡單？ 趕快作些高逼格的打印信息放在本身的網站上吧，別人偷瞟代碼的時候必定會大吃一斤！ 技術文檔我就不扒過來了，想要深……入……研究一下的，進……去……看看MDN