JavaScript 中 console 的用法

Javascript 中 console 的用法

在調試 JS 代碼時，不少人傾向於使用 alert() 或者 console.log() 方法來輸出信息，正如某些 Java 程序員喜歡在調試代碼時使用 System.out.println() 輸出信息同樣。但與 Java 輸出不同的是， console 對象擁有多種方法能夠更好的呈現信息，從而給代碼調試帶來方便。根據經常使用程度，列出如下幾種 console 對象的方法：

• 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()

如下示例的運行環境是 Chrome 43。

console.log()

先來談談咱們最熟悉也最經常使用的 console.log() 方法。

咱們最經常使用的作法是經過它來輸出一個變量或者輸出一個字符串。好比下面：

console.log("Hello China!");
var str = "Hello world!";
console.log(str);

運行結果以下：

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

控制檯會輸出：

hello world
2015年9月22日

代碼片斷 1 顯示，console.log() 的參數能夠有多個，輸出的結果以一個空格隔開。

代碼片斷 2 顯示，console.log() 可使用 C 語言 printf() 風格的佔位符，不過其支持的佔位符種類較少，只支持字符串（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）。

console.debug()、 console.info()、 console.warn() 與 console.error()

這四個方法的使用方法跟 console.log() 如出一轍，差異在於輸出的顏色與圖標不一樣。下面是示例：

console.log("log");
console.debug("debug");
console.info("info");
console.warn("warn");
console.error("error");

運行結果以下：

console.table()

咱們看下面一個變量：

var people = {
    "person1": {"fname": "san", "lname": "zhang"}, 
    "person2": {"fname": "si", "lname": "li"}, 
    "person3": {"fname": "wu", "lname": "wang"}
};

咱們用 console.log() 將之在 Chrome 的控制檯中輸出：

再用 console.table() 輸出：

因此從上面兩種輸出咱們能夠看出，當輸出相似於這種兩層嵌套的對象時，咱們能夠選擇 console.table() 以表格的形式輸出。固然，嵌套三層及以上的也會以表格形式輸出，但限於表格只能顯示二維信息的特色，其會在嵌套三層或以上的地方會顯示 "Object" 字符串。

console.time() 與 console.timeEnd()

在調試時，咱們常常須要知道一段代碼執行時間，咱們可使用這兩行代碼來實現。看下面一段代碼：

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() 包圍要測試運行時間的代碼，這兩個方法的參數保持一致，以便正確識別和匹配代碼開始和結束的位置。

console.assert()

console.assert() 相似於單元測試中的斷言，當表達式爲 false 時，輸出錯誤信息。示例以下：

var arr = [1, 2, 3];
console.assert(arr.length === 4);

輸出結果以下：

console.count()

調試代碼時，咱們常常須要知道一段代碼被執行了多少次，咱們可使用 console.count() 來方便的達到咱們的目的。示例以下：

function func() {
    console.count("label");
}

for(var i = 0; i < 3; i++) {
    func();
}

運行結果爲：

label: 1
label: 2
label: 3

console.group()、 console.groupEnd() 與 console.groupCollapsed()

通常的 console.log() 方法的輸出沒有層級關係，在須要一些顯示層級關係的輸出中顯得蒼白無力，使用 console.group() 能夠達到咱們的目的。示例代碼以下：

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

運行結果爲：

把 "group" 換成 "groupCollapsed"，則默認爲摺疊運行結果。

因爲本文只列出部分方法，查看完整方法請移步阮一峯前輩的博客。