Hello，大家好，我是 Sunday。

在日常的工作中，我經(jīng)常會幫同學(xué)【遠(yuǎn)程調(diào)試代碼】。在遠(yuǎn)程時，我發(fā)現(xiàn) 很多同學(xué)會大量使用 console.log 進(jìn)行打印調(diào)試。打印的數(shù)量之多，讓同學(xué)自己都摸不清哪個打印對應(yīng)哪個內(nèi)容了??。

毫無疑問，console.log 是一個很好的調(diào)試方式。但是 如果我們?yōu)E用它，效果反而會適得其反！大量打印信息堆積如山，反倒使得我們難以理清各條輸出的對應(yīng)邏輯！

因此，我們可以尋找可好的調(diào)試方案，來解決 console.log 過多而導(dǎo)致的混亂問題。

console 不止 log

沒錯！console 不止 log ，console 對象內(nèi)部提供了很多的方法。使用更多的 console 方法配合可以幫助我們大幅提升調(diào)試的效率。

1. 使用 console.dir() 打印對象

console.dir() 是一個專門打印 對象 的 API。

console.dir() 方法可以顯示指定 JavaScript 對象的屬性列表，并以交互式的形式展現(xiàn)。輸出結(jié)果呈現(xiàn)為分層列表，包含展開/折疊的三角形圖標(biāo)，可用于查看子對象的內(nèi)容。

因此，當(dāng)我們打印對象時，可以使用 dir 代替 log

2. 使用 console.table() 打印數(shù)組

如果想要打印數(shù)組的話，那么 table() 是首選方法：

const users = [
    { id: 1, name: '張三', age: 25 },
    { id: 2, name: '李四', age: 30 },
    { id: 3, name: '王五', age: 35 },
];

console.table(users);

一句話：賊清晰！

圖片

3. 使用 console.clear() 清理控制臺

這個 API 可以幫我們解決控制臺打印過多的問題。

如果我們要開啟一輪新的調(diào)試，那么可以在開始前執(zhí)行 console.clear()，清空之前的控制臺打印。

這樣，可以幫我們更加專注的針對本次的調(diào)試，而不需要被之前的打印信息所誤導(dǎo)！

4. 使用 console.group() 控制打印組

這在 嵌套函數(shù)、遞歸 中非常有用，配合 console.groupEnd() 可以幫助我們完成分組打印。

比如下面的場景：

function factorial(n) {
    console.group(`方法開始，長度(${n})`);
    if (n <= 1) {
        console.log("執(zhí)行 1");
        console.groupEnd();
        return 1;
    } else {
        let result = n * factorial(n - 1);
        console.log(`執(zhí)行 ${result}`);
        console.groupEnd();
        return result;
    }
}

factorial(3);

最終，打印結(jié)果如下：

圖片

5. 使用 console.time() 完成計時

console.time() 配合 console.timeEnd() 經(jīng)常用來處理 計時操作。

比如，我們想要測試一個函數(shù)的執(zhí)行耗時，那么就可以通過這種方式完成：

function processLargeData() {
    console.time("time");
    // 模擬耗時操作
    for (let i = 0; i < 1000000; i++) {
        Math.sqrt(i);
    }
    console.timeEnd("time");
}

processLargeData();

計時結(jié)果如下：

圖片