在調(diào)試 JS 代碼時(shí)，很多人傾向于使用 alert() 或者 console.log() 方法來(lái)輸出信息，正如某些 Java 程序員喜歡在調(diào)試代碼時(shí)使用 System.out.println() 輸出信息一樣。但與 Java 輸出不一樣的是， console 對(duì)象擁有多種方法可以更好的呈現(xiàn)信息，從而給代碼調(diào)試帶來(lái)方便。根據(jù)常用程度，列出以下幾種 console 對(duì)象的方法：
console.log()-
console.debug()、console.info()、console.warn()與console.error() console.table()-
console.time()與console.timeEnd() console.assert()console.count()-
console.group、console.groupEnd()與console.groupCollapsed()
以下示例的運(yùn)行環(huán)境是 Chrome 43。
console.log()
先來(lái)談?wù)勎覀冏钍煜ひ沧畛Ｓ玫?console.log() 方法。
我們最常用的做法是通過(guò)它來(lái)輸出一個(gè)變量或者輸出一個(gè)字符串。比如下面：
console.log("Hello China!");
var str = "Hello world!";
console.log(str);
運(yùn)行結(jié)果如下：
Hello China!
Hello world!
但我們也可以這樣用 console.log() ：
// 代碼段 1
var str1 = "hello";
var str2 = "world";
console.log(str1, str2);
// 代碼段 2
console.log("%d年%d月%d日", 2015, 09, 22);
控制臺(tái)會(huì)輸出：
hello world
2015年9月22日
代碼片段 1 顯示，console.log() 的參數(shù)可以有多個(gè)，輸出的結(jié)果以一個(gè)空格隔開(kāi)。
代碼片段 2 顯示，console.log() 可以使用 C 語(yǔ)言 printf() 風(fēng)格的占位符，不過(guò)其支持的占位符種類較少，只支持字符串（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%O）、DOM 節(jié)點(diǎn)（%o）和 應(yīng)用 CSS 規(guī)則（%c）。
console.debug()、 console.info()、 console.warn() 與 console.error()
這四個(gè)方法的使用方法跟 console.log() 一模一樣，差別在于輸出的顏色與圖標(biāo)不同。下面是示例：
console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");
運(yùn)行結(jié)果如下：
console.table()
我們看下面一個(gè)變量：
var people = {
"person1": {"fname": "san", "lname": "zhang"},
"person2": {"fname": "si", "lname": "li"},
"person3": {"fname": "wu", "lname": "wang"}
};
我們用 console.log() 將之在 Chrome 的控制臺(tái)中輸出：
再用 console.table() 輸出：
所以從上面兩種輸出我們可以看出，當(dāng)輸出類似于這種兩層嵌套的對(duì)象時(shí)，我們可以選擇 console.table() 以表格的形式輸出。當(dāng)然，嵌套三層及以上的也會(huì)以表格形式輸出，但限于表格只能顯示二維信息的特點(diǎn)，其會(huì)在嵌套三層或以上的地方會(huì)顯示 "Object" 字符串。
console.time() 與 console.timeEnd()
在調(diào)試時(shí)，我們經(jīng)常需要知道一段代碼執(zhí)行時(shí)間，我們可以使用這兩行代碼來(lái)實(shí)現(xiàn)。看下面一段代碼：
console.time("for-test");
var arr = [];
for(var i = 0; i < 100000; i++) {
arr.push({"key": i});
}
console.timeEnd("for-test");
輸出為：
for-test: 176.152ms
從上面的例子可以看出，我們用 console.time() 和 console.timeEnd() 包圍要測(cè)試運(yùn)行時(shí)間的代碼，這兩個(gè)方法的參數(shù)保持一致，以便正確識(shí)別和匹配代碼開(kāi)始和結(jié)束的位置。
console.assert()
console.assert() 類似于單元測(cè)試中的斷言，當(dāng)表達(dá)式為 false 時(shí)，輸出錯(cuò)誤信息。示例如下：
var arr = [1, 2, 3];
console.assert(arr.length === 4);
輸出結(jié)果如下：
console.count()
調(diào)試代碼時(shí)，我們經(jīng)常需要知道一段代碼被執(zhí)行了多少次，我們可以使用 console.count() 來(lái)方便的達(dá)到我們的目的。示例如下：
function func() {
console.count("label");
}
for(var i = 0; i < 3; i++) {
func();
}
運(yùn)行結(jié)果為：
label: 1
label: 2
label: 3
console.group()、 console.groupEnd() 與 console.groupCollapsed()
一般的 console.log() 方法的輸出沒(méi)有層級(jí)關(guān)系，在需要一些顯示層級(jí)關(guān)系的輸出中顯得蒼白無(wú)力，使用 console.group() 可以達(dá)到我們的目的。示例代碼如下：
console.group("1");
console.log("1-1");
console.log("1-2");
console.log("1-3");
console.groupEnd();
console.group("2");
console.log("2-1");
console.log("2-2");
console.log("2-3");
console.groupEnd();
運(yùn)行結(jié)果為：
把 "group" 換成 "groupCollapsed"，則默認(rèn)為折疊運(yùn)行結(jié)果。
由于本文只列出部分方法，查看完整方法請(qǐng)移步阮一峰前輩的博客。
