Claude Code 在除錯和測試驅動開發（TDD）方面表現出色。 根據 Anthropic 的內部數據，在提示中包含測試命令可以將代碼品質提升 2-3 倍。 本節介紹如何有效地利用 Claude Code 進行除錯和 TDD 工作流。
測試優先的方法
最有效的 Claude Code 工作流之一是「測試優先」。流程如下：
- 撰寫測試：先寫一個（會失敗的）測試，描述你期望的行為
- 讓 Claude 實現：告訴 Claude「讓這個測試通過」
- 迭代改進：如果測試不通過，Claude 會分析錯誤並修正
我寫了一個新的測試在 src/utils/__tests__/parser.test.ts。
請讓這個測試通過。運行 npm run test -- parser.test 來驗證。關鍵在於：告訴 Claude 測試命令。這讓它能夠自動驗證結果，形成一個完整的反饋迴圈。
Playwright 瀏覽器測試
透過 Playwright MCP 伺服器，Claude 可以直接操作瀏覽器進行測試：
- 打開網頁並截圖
- 點擊按鈕、填寫表單
- 驗證頁面內容和視覺效果
- 檢查 Console 錯誤
這對於前端開發特別有用——你可以讓 Claude 修改 CSS，然後自動截圖比較修改前後的效果。
截圖驅動的除錯
遇到 UI Bug 時，最有效的方法是直接截圖並貼到對話中：
- 截取顯示 Bug 的畫面
- 將截圖貼到 Claude Code（終端中可以直接貼圖，VS Code 中使用拖放）
- 描述期望的行為
Claude 會分析截圖，識別問題，然後提出修復方案。
錯誤日誌分析
對於後端或編譯錯誤，直接複製堆疊追蹤（Stack Trace）給 Claude 是最快的方式：
我在執行 npm run build 時遇到了這個錯誤：
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (src/components/UserList.tsx:15:23)
at renderWithHooks (node_modules/react-dom/...)
請幫我修復這個問題。Claude 會根據堆疊追蹤定位到有問題的檔案和行號，讀取相關代碼，然後提供修復。
除錯策略比較
兩種常見的除錯方式：
- 「讀取錯誤，然後修復」：先讓 Claude 分析錯誤原因，解釋問題所在， 然後再實施修復。適合你想要理解根本原因的情況
- 「直接修復」：直接告訴 Claude 修復錯誤，不需要解釋。 適合時間緊迫或問題明顯的情況
多檔案除錯技巧
當 Bug 跨越多個檔案時：
- 提供完整的錯誤信息，包括堆疊追蹤
- 告訴 Claude 哪些檔案最近被修改過
- 使用
think hard讓 Claude 深入分析依賴關係 - 如果 Claude 的第一次修復沒有解決問題，把新的錯誤信息回饋給它
TDD 循環的最佳實踐
- 每次只寫一個測試案例，保持反饋迴圈小而快
- 在 CLAUDE.md 中加入測試命令，這樣 Claude 會自動驗證
- 讓 Claude 在修改後自動執行測試，不要手動驗證
- 使用
YOU MUST run tests before completing在 CLAUDE.md 中確保測試必定執行