我是如何讓 console 日志變聰明的，從此調(diào)試不再痛苦
曾經(jīng)有段時間，調(diào)試代碼時唯一的“策略”就是滿屏撒 console.log()。
有 bug？console.log("嗯？")
對象太復雜？console.log("obj", obj)
還搞不定？ 那就直接 panic-log-everything.js
雖然有點用，但很快日志就變成一堵無法下眼的文字墻——哪怕 bug 像異常一樣跳出來，也可能會被湮沒其中。
所以，我開始收拾日志這片“爛攤子”。
下面是我讓日志真正變得有用的方法，也建議你試試看，絕對值得。
用 log 分組：別再讓信息變成噪音
假設(shè)你在調(diào)試一個數(shù)據(jù)請求流程。每一步都打印日志當然沒錯，但混在一起就很快變得混亂。
比如這樣：
console.log("開始加載數(shù)據(jù)");
console.log("請求已發(fā)出");
console.log("收到響應(yīng)");改成這樣效果會好很多：
console.group("?? 加載數(shù)據(jù)流程");
console.log("開始加載數(shù)據(jù)");
console.log("請求已發(fā)出");
console.log("收到響應(yīng)");
console.groupEnd();所有日志都被折疊在一個小組內(nèi)。需要時再展開就好。
想再嵌套一層也可以：
console.group("用戶數(shù)據(jù)");
console.group("請求階段");
console.log("已發(fā)出 GET 請求");
console.groupEnd();
console.group("響應(yīng)階段");
console.log("200 OK");
console.groupEnd();
console.groupEnd();是的，嵌套日志和嵌套 div 一樣上頭。
console.table()：被低估的利器
想象一下你正在調(diào)試一個用戶數(shù)組：
console.log(users);結(jié)果是亂七八糟的一大堆文本。
換成：
console.table(users);瞬間變得一目了然，表格形式清晰排列字段和值。
無論是調(diào)試接口數(shù)據(jù)，還是展示對象數(shù)組結(jié)構(gòu)，這個方法都很實用。
日志分級：log() 不該是唯一選擇
別再一律用 console.log() 輸出所有信息。
瀏覽器提供了分級日志輸出方式：
console.warn()：黃色高亮，適合警告console.error()：紅色警告，適合錯誤console.info()：更輕的提示性輸出
這些分級不僅有視覺提示，還能幫你快速定位問題。
給日志加上標簽，不然遲早看不懂
不要再寫這種日志了：
console.log(response);回頭再看，完全不知道是哪段代碼、哪個 API。
至少加上上下文：
console.log("?? 用戶信息響應(yīng):", response);甚至可以用 emoji 來幫你快速“掃讀”日志：
console.log("?? 用戶:", user);
console.log("?? 帖子:", posts);別小看表情符號，它們確實有助于你快速找到重點。
彩色日志：關(guān)鍵步驟也能醒目突出
如果你希望某些日志更加突出，可以這樣寫：
console.log("%c操作成功", "color: green; font-weight: bold;");也可以封裝一個小函數(shù)：
function logSuccess(msg) {
console.log(`%c${msg}`, "color: green; font-weight: bold;");
}
logSuccess("? 登錄完成");用來標記關(guān)鍵流程、重要狀態(tài)，再合適不過。
清晰的日志，不是為了炫技，而是為了保持理智
整潔的日志當然不能幫你消滅 bug，但它能：
- 更快定位問題核心
- 節(jié)省大量翻找時間
- 讓你在崩潰前，至少 console 還看起來井井有條
尤其是在團隊協(xié)作中，請不要讓調(diào)試臺里全是：
console.log("here");沒人能理解上下文，你自己一周后也不行。
結(jié)論很簡單：console.log() 本身沒錯。
但如果你把它當成一個調(diào)試工具，而不是“臨時貼片”，它可以強大得多。
讓日志為你服務(wù)，而不是跟你作對。
覺得有用的話，分享給還在打印 "test" 的同事看看，也許他們會因此改掉幾個壞習慣。
