曾經有段時間，調試代碼時唯一的“策略”就是滿屏撒 console.log()。

有 bug？console.log("嗯？")

對象太復雜？console.log("obj", obj)

還搞不定？ 那就直接 panic-log-everything.js

雖然有點用，但很快日志就變成一堵無法下眼的文字墻——哪怕 bug 像異常一樣跳出來，也可能會被湮沒其中。

所以，我開始收拾日志這片“爛攤子”。

下面是我讓日志真正變得有用的方法，也建議你試試看，絕對值得。

用 log 分組：別再讓信息變成噪音

假設你在調試一個數據請求流程。每一步都打印日志當然沒錯，但混在一起就很快變得混亂。

比如這樣：

console.log("開始加載數據");
console.log("請求已發出");
console.log("收到響應");

改成這樣效果會好很多：

console.group("?? 加載數據流程");
console.log("開始加載數據");
console.log("請求已發出");
console.log("收到響應");
console.groupEnd();

所有日志都被折疊在一個小組內。需要時再展開就好。

想再嵌套一層也可以：

console.group("用戶數據");
console.group("請求階段");
console.log("已發出 GET 請求");
console.groupEnd();
console.group("響應階段");
console.log("200 OK");
console.groupEnd();
console.groupEnd();

是的，嵌套日志和嵌套 div 一樣上頭。

console.table()：被低估的利器

想象一下你正在調試一個用戶數組：

console.log(users);

結果是亂七八糟的一大堆文本。

換成：

console.table(users);

瞬間變得一目了然，表格形式清晰排列字段和值。

無論是調試接口數據，還是展示對象數組結構，這個方法都很實用。

日志分級：log() 不該是唯一選擇

別再一律用 console.log() 輸出所有信息。

瀏覽器提供了分級日志輸出方式：

• console.warn()：黃色高亮，適合警告
• console.error()：紅色警告，適合錯誤
• console.info()：更輕的提示性輸出

這些分級不僅有視覺提示，還能幫你快速定位問題。

給日志加上標簽，不然遲早看不懂

不要再寫這種日志了：

console.log(response);

回頭再看，完全不知道是哪段代碼、哪個 API。

至少加上上下文：

console.log("?? 用戶信息響應:", response);

甚至可以用 emoji 來幫你快速“掃讀”日志：

console.log("?? 用戶:", user);
console.log("?? 帖子:", posts);

別小看表情符號，它們確實有助于你快速找到重點。

彩色日志：關鍵步驟也能醒目突出

如果你希望某些日志更加突出，可以這樣寫：

console.log("%c操作成功", "color: green; font-weight: bold;");

也可以封裝一個小函數：

function logSuccess(msg) {
  console.log(`%c${msg}`, "color: green; font-weight: bold;");
}

logSuccess("? 登錄完成");

用來標記關鍵流程、重要狀態，再合適不過。

清晰的日志，不是為了炫技，而是為了保持理智

整潔的日志當然不能幫你消滅 bug，但它能：

• 更快定位問題核心
• 節省大量翻找時間
• 讓你在崩潰前，至少 console 還看起來井井有條

尤其是在團隊協作中，請不要讓調試臺里全是：

console.log("here");

沒人能理解上下文，你自己一周后也不行。

結論很簡單：console.log() 本身沒錯。

但如果你把它當成一個調試工具，而不是“臨時貼片”，它可以強大得多。

讓日志為你服務，而不是跟你作對。

覺得有用的話，分享給還在打印 "test" 的同事看看，也許他們會因此改掉幾個壞習慣。