Chrome 控制檯實用指南

前言

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

console.clear

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

console.log家族

先簡單介紹一下chrome的控制檯，打開chrome瀏覽器，按f12就能夠輕鬆的打開控制檯程序員

若是你是一位開發者，我想console.log確定是常用的了，咱們主要看看console.log的幾個兄弟：web

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

2.console.info ('提示性信息')

3.console.error ('錯誤信息')

4.console.warn ('警示信息')

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

若是再配合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;');

固然，圖片也是能夠的，讀者能夠自行嘗試，修改上述代碼便可。app

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

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書寫。