Console.log Debug
最簡單最有效的 debug 工具
⏱ 預估 ~5 分鐘
01 · 讀一讀
有有 breakpoint、watch expression、step-through 執行的花俏 debug 工具。你之後會學。但你最常用的工具，即使資深工程師，是樸實的 console.log()。
想法簡單死了：印東西出來看實際在發生什麼。你程式行為不如預期時，搞懂為什麼最快的方法是 log 每步的值、比對你預期跟實際發生的。
不華麗。不精緻。但運作，而且快。
💡 想像一下Console.log debug 像在森林放追蹤相機。你不能一直看每棵樹，但可以在關鍵點放相機看什麼經過。意外的東西出現，你確切知道看哪。
02 · 讀一讀
你有一個有 bug 的商店 app。getAffordableElectronics 函式該回特定價格內、有庫存的電子產品。但它回貴的、缺貨的。我們調查。
03 · 終端機練習
先讀輸出 log 看函式實際產生什麼 vs 預期。
(本節為互動練習，請啟用 JavaScript 體驗)
04 · 終端機練習
現在讀程式追邏輯。看 filter 步驟 — 其中一個有細微運算子 bug。
(本節為互動練習，請啟用 JavaScript 體驗)
05 · 看程式碼
下面是如果你在每步加 debug log 會長什麼樣。比對中間結果追哪裡錯。
加 debug log
function getAffordableElectronics(items, maxPrice) {
console.log('Input:', items.length, 'items, max price:', maxPrice);
const electronics = items.filter(item => item.category === 'electronics');
console.log('After category filter:', electronics.map(i => i.name));
const affordable = electronics.filter(item => item.price > maxPrice);
console.log('After price filter:', affordable.map(i => i.name));
// ^ This would show ['Laptop', 'Monitor'] — WRONG direction!
const available = affordable.filter(item => item.inStock);
console.log('After stock filter:', available.map(i => i.name));
return available.map(item => item.name);
}
每步有 log,bug 跳出來：price filter 後，你會看到貴項目活下來而不是便宜的。> 該是 <。沒 log，你可能花很久猜 — 有 log 幾秒就找到。
06 · 讀一讀
策略性 log 是藝術。不要到處倒 log — 放在資料轉換或可能出錯的點。
重點整理
- 在函式開始 log(被叫了嗎？帶什麼？)
- 在轉換前後 log(改了什麼？)
- 每個 log 加標籤：console.log('step 3 - data:', data)
- Commit 前移除 debug log
07 · 填空
用 console.log debug 時，永遠加 _____ 讓你知道哪個 log 是哪個。
08 · 選擇題
為什麼每個 console.log 都該標籤？
- 讓程式跑快點
- 讓你分辨哪個 log 產生哪個輸出
- JavaScript 要求 console.log 有標籤
- 只 production 程式需要標籤
⚠ 完整互動體驗需要 JavaScript。請啟用 JavaScript 後重新整理。
※ 本站為獨立繁中教學專案，非 Anthropic 官方產品。Claude™ 為 Anthropic, PBC 商標。