快捷導(dǎo)航

Chrome瀏覽器控制臺(tái)console使用詳解

更新時(shí)間：2018年09月14日 15:51:30 投稿：wdc

對(duì)前端開發(fā)者來說，Chrome自帶的開發(fā)者工具（Chrome Dev Tools），是一個(gè)不可或缺的開發(fā)調(diào)試工具，但是你可能只用過console.log()，卻不知道console還有很多功能強(qiáng)大的調(diào)試方法

Chrome自帶的開發(fā)者工具提供了強(qiáng)大的調(diào)試系統(tǒng)，除了可以用來查看DOM tree結(jié)構(gòu)、CSS樣式調(diào)試、動(dòng)畫調(diào)試和JS代碼斷點(diǎn)調(diào)試等。今天不聊別的，就聊聊使用console調(diào)試那些事兒。

在使用React、Vue等需要編譯語法的前端框架開發(fā)時(shí)，前端調(diào)試已經(jīng)變得不那么容易，除了使用React Dev Tools，Vue Dev Tools和Redux Dev Tools等Chrome插件，就是一堆的 console.log() 來打印我們需要看到的變量，雖然也有用，但是比較單一，要調(diào)試復(fù)雜數(shù)據(jù)需要多次輸出比較才行。

如果你平時(shí)只是用console.log()來輸出一些變量的值，那你肯定還沒有用過console的強(qiáng)大的功能。下面帶你用console玩玩花式調(diào)試。

console主要函數(shù)

我們先在Chrome上看看console對(duì)象都有哪些屬性和函數(shù)（博主用的Chrome版本是：版本 60.0.3112.90（正式版本）（64 位））。

看了才知道，除了log方法，console還有很多其他的方法。

下面，我們從一些來看下主要的調(diào)試函數(shù)及用法。

console.log(), console.error(), console.warn(), console.info()

最基本也是最常用的用法了，分別表示輸出普通信息、錯(cuò)誤信息、警示信息和提示性信息，且error和warn方法有特定的圖標(biāo)和顏色標(biāo)識(shí)。

console.assert(expression, message)

參數(shù)：

expression: 條件語句，語句會(huì)被解析成 Boolean，且為 false 的時(shí)候會(huì)觸發(fā)message語句輸出

message: 輸出語句，可以是任意類型

該函數(shù)會(huì)在 expression 為 false 的時(shí)候，在控制臺(tái)輸出一段語句，輸出的內(nèi)容就是傳入的第二個(gè)參數(shù) message 的內(nèi)容。當(dāng)我們?cè)谥恍枰谔囟ǖ那闆r下才輸出語句的時(shí)候，可以使用 console.assert。

示例如下：

function greaterThan(a,b) {
 console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(5,6);

console.count(label)

參數(shù)：

label: 計(jì)算數(shù)量的標(biāo)識(shí)符

該函數(shù)用于計(jì)算并輸出特定標(biāo)識(shí)符為參數(shù)的console.count函數(shù)被調(diào)用的次數(shù)。下面的例子更能直觀的了解：

function login(name) {
 console.count(name + ' logged in');
}

console.dir(object)

參數(shù)：

object：被輸出扎實(shí)的對(duì)象

該函數(shù)用于打印出對(duì)象的詳細(xì)的屬性、函數(shù)及表達(dá)式等信息。如果該對(duì)象已經(jīng)被記錄為一個(gè)HTML元素，則該HTML元素的DOM表達(dá)式的屬性會(huì)被像下面這樣打印出來：

console.dir(document.body);

console.dirxml(object)

該函數(shù)將打印輸出XML元素及其子孫后代元素，且對(duì)HTML和XML元素調(diào)用 console.dirxml() 和調(diào)用 console.log() 是等價(jià)的。

console.group([label]), console.groupEnd([label])

參數(shù)：

label: group分組的標(biāo)識(shí)符

在控制臺(tái)創(chuàng)建一個(gè)新的分組，隨后輸出到控制臺(tái)上的內(nèi)容都會(huì)自動(dòng)添加一個(gè)縮進(jìn)，表示該內(nèi)容屬于當(dāng)前分組，知道調(diào)用 console.groupEnd() 之后，當(dāng)前分組結(jié)束。

舉個(gè)例子：

console.log("This is the outer level");
console.group();
console.log("Level 2");
console.group();
console.log("Level 3");
console.warn("More of level 3");
console.groupEnd();
console.log("Back to level 2");
console.groupEnd();
console.log("Back to the outer level");

console.groupCollapsed(label)

該函數(shù)同console.group()，唯一的區(qū)別是該函數(shù)的輸出默認(rèn)不展開分組，而console.group()是默認(rèn)展開分組。

console.time([label]), console.timeEnd([label])

label: 用于標(biāo)記計(jì)時(shí)器的名稱，不填的話，默認(rèn)為 default

console.time() 會(huì)開始一個(gè)計(jì)時(shí)器，并當(dāng)執(zhí)行到 console.timeEnd() 函數(shù)時(shí)（需要兩個(gè)函數(shù)的lable參數(shù)相同），結(jié)束計(jì)時(shí)器，并將計(jì)時(shí)器的總時(shí)間輸出到控制臺(tái)上。

再舉幾個(gè)例子：

console.time();
var arr = new Array(10000);
for (var i = 0; i < arr.length; i++) {
 arr[i] = new Object();
}
console.timeEnd();
// default: 3.696044921875ms

對(duì) console.time(label) 設(shè)置一個(gè)自定義的 label 字段，并使用console.timeEnd(label) 設(shè)置相同的 label 字段來結(jié)束計(jì)時(shí)器。

console.time('total');
var arr = new Array(10000);
for (var i = 0; i < arr.length; i++) {
 arr[i] = new Object();
}
console.timeEnd('total');
// total: 3.696044921875ms

設(shè)置多個(gè) label 屬性，開啟多個(gè)計(jì)時(shí)器同步計(jì)時(shí)。

console.time('total');
console.time('init arr');
var arr = new Array(10000);
console.timeEnd('init arr');
for (var i = 0; i < arr.length; i++) {
 arr[i] = new Object();
}
console.timeEnd('total');
// init arr: 0.0546875ms
// total: 2.5419921875ms