Hello，大家好，我是 Sunday。

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

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

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

console 不止 log

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

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

console.dir() 是一個(gè)專(zhuān)門(mén)打印 對(duì)象 的 API。

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

因此，當(dāng)我們打印對(duì)象時(shí)，可以使用 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() 清理控制臺(tái)

這個(gè) API 可以幫我們解決控制臺(tái)打印過(guò)多的問(wèn)題。

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

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

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

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

比如下面的場(chǎng)景：

function factorial(n) {
    console.group(`方法開(kāi)始，長(zhǎng)度(${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() 完成計(jì)時(shí)

console.time() 配合 console.timeEnd() 經(jīng)常用來(lái)處理 計(jì)時(shí)操作。

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

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

processLargeData();

計(jì)時(shí)結(jié)果如下：

圖片