Chrome控制檯實用指南

Damonare發表於2016-09-09
Chrome

前言

原文地址:Chrome控制檯使用指南 部落格地址:Damonare的個人部落格

Chrome瀏覽器我想是每一個前端er必用工具之一吧，一部分原因是它速度快，體積不大，支援的新特性也比其它瀏覽器多，還有一部分我想就是因為它的控制檯功能強大了吧，說它是神器一點也不過分，很方便。但其實很多開發者並沒有用出控制檯的精髓，只是使用簡單的console.log();其實控制檯功能遠遠不止這麼簡單哦。

console.clear

console.clear();清空控制檯，這個應該和console.log知名度一樣高吧。

console.log家族

先簡單介紹一下chrome的控制檯，開啟chrome瀏覽器，按f12就可以輕鬆的開啟控制檯

如果你是一位開發者，我想console.log肯定是經常使用的了，我們主要看看console.log的幾個兄弟：

1.console.log ('普通訊息')

2.console.info ('提示性資訊')

3.console.error ('錯誤資訊')

4.console.warn ('警示資訊')複製程式碼

控制檯

大家都會用log，但很少有人能夠很好地利用console.error , console.warn 等將輸出到控制檯的資訊進行分類整理。他們功能區別不大，意義在於將輸出到控制檯的資訊進行歸類，或者說讓它們更語義化。

如果再配合console.group 與console.groupEnd，可以將這種分類管理的思想發揮到極致。這適合於在開發一個規模很大模組很多很複雜的Web APP時，將各自的log資訊分組到以各自名稱空間為名稱的組裡面。

console.group("app.bundle");
console.warn("來自bundle模組的警告資訊1");console.warn("來自bundle模組的警告資訊2");
console.groupEnd();

console.group("app.bundle");
console.log("來自bundle模組的資訊1");console.log("來自bundle模組的資訊2");
console.groupEnd();複製程式碼

這裡寫圖片描述

這樣的控制檯資訊看上去就一目瞭然了，就不用再為了找這是屬於那一行程式碼輸出的再翻一遍原始碼了。

另外，console.log家族還給我們提供了一個的API：第一個引數可以帶一些格式化指令，比如%c,\n;看下面這個炫酷的效果：

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() 接收不定引數，引數間用逗號分隔，最終會輸出會將它們以空白字元連線。

這裡寫圖片描述

console.table

看著這種“黑魔法”是不是有種坑分的感覺呢，其實還不止哦！console.table可以讓我們輸出表格,示例：

var data = {code:200,content:[{'品名': '杜雷斯', '數量': 4}, {'品名': '岡本', '數量': 3}]};
console.table(data.content);複製程式碼

這裡寫圖片描述

有的時候後端傳回來一大串資料，是不是覺得直接console.log或是通過抓包工具檢視都會讓人暈頭轉向呢，這個時候正事console.table發揮作用的時候了，以表格的形式呈現資料，自然一目瞭然。

console.assert

var isDebug=false;
console.assert(isDebug,'開發中的log資訊。。。');複製程式碼

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

這裡寫圖片描述

console.count

除了條件輸出的場景，還有常見的場景是計數。 當你想統計某段程式碼執行了多少次時也大可不必自己去寫相關邏輯，內建的console.count可以很地勝任這樣的任務.

這裡寫圖片描述

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耗時");
var array= new Array(10000000);
for (var i = array.length - 1; i >= 0; i--) {
    array[i] = new Object();
};
console.timeEnd("Array耗時");複製程式碼

這裡寫程式碼片

當想要檢視CPU使用相關的資訊時，可以使用console.profile配合 console.profileEnd來完成這個需求。 這一功能可以通過UI介面來完成，Chrome 開發者工具裡面有個tab便是Profile。使用方法和console.time基本一樣，其實time開發者工具裡也有個tab就是timeline。關於console.prefile博主就不做多餘的介紹了。想要做更多瞭解的讀者可以看這裡。

$

講真，米國程式設計師們真的很喜歡money啊（誰又不是呢），看看PHP就知道了,滿屏的$。而在Chrome的控制檯裡，$用處同樣是蠻多且方便的。

2+2//回車，再
$_+1//回車得5複製程式碼

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

這裡寫圖片描述

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

$('body');
$('div');複製程式碼

這裡寫圖片描述

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

$x(path)

將所匹配的節點放在一個陣列裡返回

$x("//p");
$x("//p[a]");複製程式碼

這裡寫圖片描述

$x("//p")匹配所有的p節點，$x("//p[a]");匹配所有子節點包含a的p節點

copy

copy(document.body)複製程式碼

然後你就可以Ctrl+v了。

注意：他不依附於任何全域性變數比如window，所以其實在JS程式碼裡是訪問不了這個copy方法的，所以從程式碼層面來呼叫複製功能也就無從談起。但願有天瀏覽器會提供相應的JS實現吧~這樣我們就可以通過js程式碼進行復制操作而不用再依賴Flash外掛了。

keys & values

這是一對基友。前者返回傳入物件所有屬性名組成的資料，後者返回所有屬性值組成的陣列。具體請看下面的例子：

var tfboy={name:'wayou',gender:'unknown',hobby:'opposite to the gender'};
keys(tfboy);
values(tfboy);複製程式碼

這裡寫圖片描述

monitor & unmonitor

monitor(function)，它接收一個函式名作為引數，比如function a,每次a被執行了，都會在控制檯輸出一條資訊，裡面包含了函式的名稱a及執行時所傳入的引數。而unmonitor(function)便是用來停止這一監聽。

function sayHello(name){
    alert('hello,'+name);
}
monitor(sayHello);
sayHello('damonare');
sayHello('tjz');
unmonitor(sayHello);複製程式碼

這裡寫圖片描述

debug & undebug

debug同樣也是接收一個函式名作為引數。當該函式執行時自動斷下來以供除錯，類似於在該函式的入口處打了個斷點，可以通過debugger來做到，同時也可以通過在Chrome開發者工具裡找到相應原始碼然後手動打斷點。而undebug 則是解除該斷點。而其他還有好些命令則讓人沒有說的慾望，因為好些都可以通過Chrome開發者工具的UI介面來操作並且比用在控制檯輸入要方便。

本博文依據Console API文件和Commond API書寫。

相關文章