Debug 技巧

本章節介紹使用 AI 輔助除錯的技巧，以及何時該使用傳統方法。

給 Context 的技巧

貼錯誤訊息

Bad：

幫我修這個 bug

Good：

我在執行 npm run dev 時遇到這個錯誤：

TypeError: Cannot read property 'map' of undefined
    at UserList (src/components/UserList.tsx:25:10)
    at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
    at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)

相關程式碼在 src/components/UserList.tsx
我剛剛改了 useUsers hook 的回傳值

說明你做了什麼

提供以下資訊：

1. 貼完整錯誤 — 不要只貼最後一行
2. 說明你做了什麼 — 「我剛剛加了 XXX」
3. 說明預期行為 — 「我期望它應該 XXX」
4. 說明實際行為 — 「但它卻 XXX」

範例

我在實作使用者列表功能。

**做了什麼：**
修改了 useUsers hook，改成從 Supabase 取資料

**預期行為：**
頁面應該顯示使用者列表

**實際行為：**
頁面白屏，console 顯示 TypeError

**錯誤訊息：**
[完整錯誤訊息]

**相關檔案：**
- src/hooks/useUsers.ts
- src/components/UserList.tsx

使用 /debug

Claude Code 的 /debug 指令可以協助分析問題：

/debug

[貼上錯誤訊息和相關資訊]

Claude 會：

1. 分析錯誤訊息
2. 檢查相關檔案
3. 找出問題根源
4. 提供修復建議

遇到 Bug 解不掉？

步驟 1：換 Model 重試

不同模型有不同的偏見和能力，換一個可能就能解決：

這個 bug 用 Claude 解不掉，試試看用 GPT-4 或 Gemini

步驟 2：給更多 Context

提供更多資訊：

• 相關的其他檔案
• 最近的改動
• 環境資訊（Node 版本、套件版本）

步驟 3：拆成更小的問題

把大問題拆成小問題：

❌ 為什麼登入功能不能用？

✅ 分步驟排查：
1. API 有正確回應嗎？
2. Token 有正確儲存嗎？
3. 重新導向有正確執行嗎？

步驟 4：問不同的問題

換個角度問：

❌ 這個錯誤怎麼修？

✅ 什麼情況會造成這個錯誤？
✅ 這個函數的預期輸入輸出是什麼？
✅ 有沒有類似的範例程式碼？

什麼時候該放棄問 AI？

以下情況建議使用傳統方法：

• 同一個問題問了 3 次以上沒解決
• AI 開始重複同樣的建議
• AI 給的答案越來越離譜

傳統除錯方法

1. Google 搜尋錯誤訊息

   • 直接複製錯誤訊息搜尋
   • 通常 Stack Overflow 會有答案

2. 看 GitHub Issues

   • 搜尋套件的 Issues
   • 可能是已知問題

3. 問 Stack Overflow

   • 發問時提供完整資訊
   • 遵循社群規範

4. 問真人

   • 同事、朋友、社群
   • 有時候一句話就解決

Debug 的心法

AI 不是萬能的

有時候傳統方法更快：

// console.log 大法
console.log('user:', user);
console.log('users.length:', users?.length);

// 二分法找問題
// 先註解掉一半程式碼，看問題還在不在

// 看官方文件
// 確認 API 用法是否正確

// 讀 source code
// 理解函數實際上做了什麼

目標是解決問題

目標是解決問題，不是證明 AI 有多強

如果 Google 5 分鐘能解決的問題，不需要花 30 分鐘教 AI 理解問題。

常見問題模式

Hydration Error

錯誤：

Hydration failed because the server rendered HTML didn't match the client.

原因： Server 和 Client 渲染結果不一致

解法：

• 檢查是否在 Server Component 使用了 client-only 的 API
• 確認沒有依賴瀏覽器環境的程式碼
• 使用 suppressHydrationWarning 處理動態內容

Cannot read property of undefined

錯誤：

TypeError: Cannot read property 'xxx' of undefined

原因： 存取了 undefined 物件的屬性

解法：

• 使用 Optional Chaining：obj?.prop
• 加入空值檢查
• 確認資料有正確載入

Module not found

錯誤：

Module not found: Can't resolve 'xxx'

原因：

• 套件沒安裝
• 路徑錯誤
• TypeScript 設定問題

解法：

• npm install xxx
• 檢查 import 路徑
• 檢查 tsconfig.json 的 paths 設定

Debug 流程

1. 閱讀錯誤訊息
      ↓
2. 定位問題檔案和行數
      ↓
3. 理解錯誤原因
      ↓
4. 嘗試修復
      ↓
5. 驗證修復
      ↓
6. 如果還是有問題，回到步驟 1

下一步

• 實作範例 - 實際專案練習
• Next.js 專案設定 - 建立專案