Chrome的開發者工具已經強大到沒朋友的地步了，特別是其功能豐富界面友好的console，使用得當可以有如下功效：
更高「逼格」更快「開發調試」更強「進階級的Frontender」
Bug無處遁形「Console大法好」
console.log
大家都會用log，但鮮有人很好地利用console.error , console.warn 等將輸出到控制檯的信息進行分類整理。
他們功能區別不大，意義在於將輸出到控制檯的信息進行歸類，或者說讓它們更語義化。
各個所代表的語義如下：
console.log：普通信息
console.info：提示類信息
console.error：錯誤信息
console.warn：警示信息
當合理使用上述log方法後，可以很方便地在控制檯選擇查看特定類型的信息。
| 1 | console.log(‘一顆紅心向太陽’,’吼吼~’); |
| 2 | console.info(‘樓上藥不能停！’); |
| 3 | console.warn(‘樓上嘴太賤！’); |
| 4 | console.error(‘樓上關你毛事？’); |
如果再配合console.group 與console.groupEnd，可以將這種分類管理的思想發揮到極致。這適合於在開發一個規模很大模塊很多很複雜的Web APP時，將各自的log信息分組到以各自命名空間爲名稱的組裏面。
| 1 | console.group(“app.foo”); |
| 2 | console.log(“來自foo模塊的信息 blah blah blah…”); |
| 3 | console.groupEnd(); |
| 4 | console.group(“app.bar”); |
| 5 | console.log(“來自bar模塊的信息 blah blah blah…”); |
| 6 | console.groupEnd(); |
而關於console.log，早已被玩兒壞了。一切都源於Chrome提供了這麼一個API：第一個參數可以包含一些格式化的指令比如%c。
比如給hello world 做件漂亮的嫁衣再拉出來見人：
| 1 | console.log(‘%chello world’,’font-size:25px;color:red;’); |
如果你覺得不夠過癮，那就把你能寫出來的最華麗的CSS樣式都應用上吧，比如漸變。於是你可以得到如下華麗麗的效果：
| 1 | console.log(‘%chello world’, ‘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;’); |
各種招大招的節奏啊~
看着上面密集的代碼不用驚慌，上面console.log()第二個參數全是純CSS用來控制樣式的，你不會陌生。而第一個參數裏可以帶用百分號開頭的轉義指令，如上面輸出帶樣式的文字時使用的%c指令。更詳細的指令參見官方API文檔的這個表格。
如果還不夠過癮，那咱們來log一些圖片吧，甚至。。。動圖？
對，你得先有圖，我們拿這張圖爲例。
| 1 | console.log(“%c”, “padding:50px 300px;line-height:120px;background:url(‘http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif’) no-repeat;”); |
看着上面搖擺的豆比兔是不是有種抽它一臉的衝動。
除此，console.table 更是直接以表格的形式將數據輸出，不能贊得太多！
借用之前寫過的一篇博文裏的例子：
| 1 | var data = [{‘品名’: ‘杜雷斯’, ‘數量’: 4}, {‘品名’: ‘岡本’, ‘數量’: 3}]; |
| 1 | console.table(data); |
另外，console.log() 接收不定參數，參數間用逗號分隔，最終會輸出會將它們以空白字符連接。
| 1 | console.log(‘%c你好’,’color:red;’,’小明’,’你知道小紅被媽媽打了麼’); |
console.count
除了條件輸出的場景，還有常見的場景是計數。
當你想統計某段代碼執行了多少次時也大可不必自己去寫相關邏輯，內置的console.count可以很地勝任這樣的任務。
function foo(){
//其他函數邏輯blah blah。。。
console.count('foo 被執行的次數：');
}
foo();
foo();
foo();
console.dir
將DOM結點以JavaScript對象的形式輸出到控制檯
而console.log是直接將該DOM結點以DOM樹的結構進行輸出，與在元素審查時看到的結構是一致的。不同的展現形式，同樣的優雅，各種體位任君選擇反正就是方便與體貼。
console.dir(document.body);
console.log(document.body);
同時另一個命令$$(selector)返回的是所有滿足選擇條件的元素的一個集合，是對document.querySelectorAll() 的封裝。
$$('div')
