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

何敵發表於2018-04-26
CSS

無聊的時候，喜歡開啟一些無聊的網頁，搞一下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，如果那樣，你一定了解百度也會覬覦你的才華，畢竟常開啟控制檯的畢竟多數是程式猿嘛。

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

微信圖片_20180426151248.png

再來看看知乎

微信圖片_20180426152040.png

以及滴滴

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

微信圖片_20180426151505.png

console.log（"竟然可以這樣玩兒列印訊息麼？")

他們的控制檯太高逼格了，我的控制檯資訊就不一樣，我姿勢到位啊！

微信圖片_20180426153258.png

嗯,姿勢很不錯吧？搞怪的同時，瞭解了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);
複製程式碼
  1. 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

相關文章