無聊的時候，喜歡打開一些無聊的網(wǎng)頁谒麦，搞一下chrome爸爸的控制臺俄讹。
常規(guī)操作
- 開發(fā)前端頁面過程中，少不了的就是開啟控制臺绕德，打印一些定義的東西患膛，看看到底輸出是什么；
- 打個斷點耻蛇，讓代碼飛慢一點踪蹬，一步步的……深.……入……；
- 瞅一瞅network的加載資源臣咖，靜態(tài)資源跃捣、參數(shù)、請求頭夺蛇，如果實用疚漆，順勢扒下來模擬一下，做個小東西刁赦；
- 找一下奇怪的dom元素愿卸，看看css樣式是怎樣的；
- 某些頁面音頻需要充錢截型？不慌，能在頁面試聽的儒溉，打開控制臺宦焦，全局搜索一下<audio,可能會有意外的收獲；
然而，在忙碌的開發(fā)過程中波闹，哪兒有這么悠閑酝豪，用的最多的就是:
console.log("變量a初始值:",a);
xxxxx；
對a的某些賦值精堕；
xxxxx孵淘；
console.log("變量a變化后的值:",a);
或者是：
$.ajax({
url:"/xxx",
type:"post",
data:{ start:0},
dataType:"json",
success:function (data) {
//先抱著試一試的態(tài)度對比下后端返回的數(shù)據(jù)及格式與接口文檔
console.log(data);
}
})
或者……常規(guī)操作，不多說
換個姿勢操作
想必你一定打開過百度首頁歹篓，按過F12瘫证，如果那樣，你一定了解百度也會覬覦你的才華庄撮，畢竟常打開控制臺的畢竟多數(shù)是程序猿嘛背捌。
一張網(wǎng)頁，要經(jīng)歷怎樣的過程洞斯，才能抵達用戶面前毡庆？
一位新人，要經(jīng)歷怎樣的成長烙如，才能站在技術之巔么抗？
探尋這里的秘密；
體驗這里的挑戰(zhàn)亚铁；
成為這里的主人蝇刀；
加入百度，加入網(wǎng)頁搜索刀闷，你熊泵，可以影響世界。
再來看看知乎
以及滴滴
hello甸昏，程序員哥哥顽分，又見到這個彩蛋是不是很開心？
我知道你此刻想吐槽施蜜，想攻擊我們官網(wǎng)卒蘸；
更重要的是你想優(yōu)化，想改變這個網(wǎng)站翻默，甚至是整個滴滴缸沃。
找到了合適了你的起點了么？
從這扇門開始改變滴滴修械，改變世界趾牧，改變自己。
芝麻開門:發(fā)送簡歷至 hr@diditaxi.com.cn（ 郵件標題請以“姓名-應聘XX職位-來自console”命名）
你創(chuàng)造世界的舞臺：：http://job.didichuxing.com/
console.log（"竟然可以這樣玩兒打印消息么肯污？")
他們的控制臺太高逼格了翘单，我的控制臺信息就不一樣吨枉，我姿勢到位啊哄芜！
嗯,姿勢很不錯吧貌亭？搞怪的同時，了解了console的一些有用的用法:
1. console.warn("網(wǎng)絡不穩(wěn)定") -----打印一個警告信息;
2. console.error("網(wǎng)絡錯誤") -----打印一條錯誤信息;
3. console.group('嘲諷(??)') -----打印樹狀結構认臊，配合groupCollapsed以及groupEnd方法;
4.console.groupEnd()-----結束當前Tree;
5.console.table(Arr)------將數(shù)據(jù)打印成表格;
var Arr = [
["aa","bb","cc"],
["dd","ee","ff"],
["gg","hh","ii"],
]
console.table(Arr);
- console.log()的變量值替換
console.log("圓周率整數(shù)部分：%d圃庭，帶上小數(shù)是：%f",3.1415,3.1415);
//輸出：圓周率整數(shù)部分：3，帶上小數(shù)是：3.1415
7.console.assert(false, "我們好像在哪兒見過")-----判斷第一個參數(shù)是否為真失晴，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;");
大致意思就是第一個參數(shù)是"%c" + 打印的內容，第二個參數(shù)就是css樣式了师坎。
是不是換個姿勢很簡單恕酸？
趕快做些高逼格的打印信息放在自己的網(wǎng)站上吧，別人偷瞟代碼的時候一定會大吃一斤胯陋！
技術文檔我就不扒過來了蕊温，想要深……入……研究一下的，進……去……看看MDN
