Chrome 控制檯不徹底指南

Chrome的開發者工具已經強大到沒朋友的地步了，特別是其功能豐富界面友好的console，使用得當能夠有以下功效：

• 更高「逼格」更快「開發調試」更強「進階級的Frontender」
  

• Bug無處遁形「Console大法好」

console.log

你們都會用log，但鮮有人很好地利用console.error , console.warn 等將輸出到控制檯的信息進行分類整理。
他們功能區別不大，意義在於將輸出到控制檯的信息進行歸類，或者說讓它們更語義化。
各個所表明的語義以下：

• console.log：普通訊息
  

• console.info：提示類信息
  

• console.error：錯誤信息
  

• console.warn：警示信息

當合理使用上述log方法後，能夠很方便地在控制檯選擇查看特定類型的信息。

console.log('一顆紅心向太陽','吼吼~');console.info('樓上藥不能停！');console.warn('樓上嘴太賤！');console.error('樓上關你毛事？');

若是再配合console.group 與console.groupEnd，能夠將這種分類管理的思想發揮到極致。這適合於在開發一個規模很大模塊不少很複雜的Web APP時，將各自的log信息分組到以各自命名空間爲名稱的組裏面。

console.group("app.foo");console.log("來自foo模塊的信息 blah blah blah...");console.groupEnd();console.group("app.bar");console.log("來自bar模塊的信息 blah blah blah...");console.groupEnd();

而關於console.log，早已被玩兒壞了。一切都源於Chrome提供了這麼一個API：第一個參數能夠包含一些格式化的指令好比%c。

好比給hello world 作件漂亮的嫁衣再拉出來見人：

console.log('%chello world','font-size:25px;color:red;');

若是你以爲不夠過癮，那就把你能寫出來的最華麗的CSS樣式都應用上吧，好比漸變。因而你能夠獲得以下華麗麗的效果：

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一些圖片吧，甚至。。。動圖？
對，你得先有圖，咱們拿這張圖爲例。

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 更是直接以表格的形式將數據輸出，不能贊得太多！
借用以前寫過的一篇博文裏的例子：

var data = [{'品名': '杜雷斯', '數量': 4}, {'品名': '岡本', '數量': 3}];console.table(data);

另外，console.log() 接收不定參數，參數間用逗號分隔，最終會輸出會將它們以空白字符鏈接。

console.log('%c你好','color:red;','小明','你知道小紅被媽媽打了麼');

console.assert

當你想代碼知足某些條件時才輸出信息到控制檯，那麼你大可沒必要寫if或者三元表達式來達到目的，cosole.assert即是這樣場景下一種很好的工具，它會先對傳入的表達式進行斷言，只有表達式爲假時才輸出相應信息到控制檯。

var isDebug=false;console.assert(isDebug,'開發中的log信息。。。');

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);

console.time & console.timeEnd

輸出一些調試信息是控制檯最經常使用的功能，固然，它的功能遠不止於此。當作一些性能測試時，一樣能夠在這裏很方便地進行。
好比須要考量一段代碼執行的耗時狀況時，能夠用console.time與 console.timeEnd來作此事。

這裏借用官方文檔的例子：

console.time("Array initialize");var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};console.timeEnd("Array initialize");

固然，咱們也能夠選擇本身寫代碼來計時：

var start=new Date().getTime();var array= new Array(1000000);for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};console.log(new Date().getTime()-start);

相信你也看到了，用內置的console.time是多麼地方便，省去了本身寫代碼來計算的工做量。另外值得一提的是，經過調用內置的console.time獲得的結果要比本身手動計算的時間差更精確可靠。

console.profile & console.timeLime

當想要查看CPU使用相關的信息時，可使用console.profile配合 console.profileEnd來完成這個需求。
這一功能能夠經過UI界面來完成，Chrome 開發者工具裏面有個tab即是Profile。

與此相似的功能還有console.timeLine配合 console.timeLineEnd,它的做用是開始記錄一段時間軸，一樣能夠經過Chrome開發者工具裏的Timeline 標籤來進行相應操做。

因此在我看來這兩個方法有點雞肋，由於均可以經過操做界面來完成。但至少他提供了一種命令行方式的交互，仍是多了種姿式供選擇吧。

console.trace

堆棧跟蹤相關的調試可使用console.trace。這個一樣能夠經過UI界面完成。當代碼被打斷點後，能夠在Call Stack面板中查看相關堆棧信息。

上面介紹的都是掛在window.console這個對象下面的方法，統稱爲Console API，接下來的這些方法確切地說應該叫命令，是Chrome內置提供，在控制檯中使用的，他們統稱爲Command Line API。

$

彷佛美刀老是被程序員及各類編程語言所青睞「你看看PHP代碼就知道PHPer有多愛錢了」，在Chrome的控制檯裏，$用處還真是蠻多且方便的。
$_命令返回最近一次表達式執行的結果，功能跟按向上的方向鍵再回車是同樣的，但它能夠作爲一個變量使用在你接下來的表達式中：

2+2//回車，再$_+1//回車得5

上面的$_須要領悟其奧義才能使用得當，而$0~$4則表明了最近5個你選擇過的DOM節點。
什麼意思？在頁面右擊選擇審查元素，而後在彈出來的DOM結點樹上面隨便點選，這些被點過的節點會被記錄下來，而$0會返回最近一次點選的DOM結點，以此類推，$1返回的是上上次點選的DOM節點，最多保存了5個，若是不夠5個，則返回undefined。

另外值得一讚的是，Chrome 控制檯中原生支持類jQuery的選擇器，也就是說你能夠用$加上熟悉的css選擇器來選擇DOM節點，多麼滴熟悉。

$('body')

$(selector)返回的是知足選擇條件的首個DOM元素。
剝去她僞善的外衣，其實$(selector)是原生JavaScript document.querySelector() 的封裝。
同時另外一個命令$$(selector)返回的是全部知足選擇條件的元素的一個集合，是對document.querySelectorAll() 的封裝。

$$('div')

copy

經過此命令能夠將在控制檯獲取到的內容複製到剪貼板。

copy(document.body)

而後你就能夠處處粘了：

看完此條命令行，機智的你是否是跟腦洞全開的我同樣，冒出了這樣一個想法：那就是經過這個命令能夠在JavaScript裏進行復制操做從而不用依賴Flash插件了。
But現實是殘酷的，如以前所述的，這裏的控制檯命令只能在控制檯中環境中執行，由於他不依附於任何全局變量好比window，因此其實在JS代碼裏是訪問不了這個copy方法的，因此從代碼層面來調用複製功能也就無從談起。希望有天瀏覽器會提供相應的JS實現吧~

keys & values

這是一對基友。前者返回傳入對象全部屬性名組成的數據，後者返回全部屬性值組成的數組。具體請看下面的例子：

var tboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tboy);
values(tboy);

monitor & unmonitor

monitor(function)，它接收一個函數名做爲參數，好比function a,每次a被執行了，都會在控制檯輸出一條信息，裏面包含了函數的名稱a及執行時所傳入的參數。

而unmonitor(function)即是用來中止這一監聽。

function sayHello(name){
	alert('hello,'+name);
}
monitor(sayHello);
sayHello('wayou');
unmonitor(sayHello);
sayHello('wayou');

debug & undebug

debug一樣也是接收一個函數名做爲參數。當該函數執行時自動斷下來以供調試，相似於在該函數的入口處打了個斷點，能夠經過debugger來作到，同時也能夠經過在Chrome開發者工具裏找到相應源碼而後手動打斷點。
而undebug 則是解除該斷點。

而其餘還有好些命令則讓人沒有說的慾望，由於好些均可以經過Chrome開發者工具的UI界面來操做而且比用在控制檯輸入要方便。