2025-07-08

1.console的用法:

在調試 JS 代碼時,很多人傾向於使用 alert() 或者 console.log() 方法來輸出信息,正如某些 Java 程序員喜歡在調試代碼時使用System.out.println() 輸出信息一樣。但與 Java 輸出不一樣的是, console 對象擁有多種方法可以更好的呈現信息,從而給代碼調試帶來方便。

console.log()

我們最常用的做法是通過它來輸出一個變量或者輸出一個字符串。比如下面:

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

運行結果如下:

Hello China!
Hello world!

但我們也可以這樣用 console.log() :

// 代碼段 1
const str1 = "hello";
const str2 = "world";
console.log(str1, str2);

// 代碼段 2
console.log("%d年%d月%d日", 2015, 09, 22);

控制臺會輸出:

hello world
2015年9月22日

console.debug()、https://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()

我們看下面一個變量:

const 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("for-test");//引號內為一個輸出內容標題而已
const arr = [];
for(let i = 0; i < 100000; i++) {
    arr.push({"key": i});
}
console.timeEnd("for-test");

輸出為:

for-test: 16.030ms  // Chrome 這優化做的,版本 43 中的時間是:176.152ms

從上面的例子可以看出,我們用 console.time() 和 console.timeEnd() 包圍要測試運行時間的代碼,這兩個方法的參數保持一致,以便正確識別和匹配代碼開始和結束的位置。

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *