第九章：遇到 Bug 怎麼辦？除錯心法與善用多重 AI
在 Vibe Coding 的過程中，雖然 AI 非常聰明，但它生成的程式碼不可能 100% 完美。 有時候畫面跑版，有時候按鈕點了沒反應，最慘的是終端機跳出一長串怵目驚心的紅字 Error。遇到問題時，很多新手會感到挫折甚至想放棄。 但請記住：遇到 Bug 不要慌張，這是你進步最快、也是你拉開與普通人差距的關鍵時刻！
本章將傳授你資深工程師的「除錯 (Debugging) 心法」，以及當你的編輯器 AI 開始鬼打牆時，如何透過「多重 AI 交叉詰問」來打破僵局。
🧐 第一步：尋找案發現場 (Console 與 Terminal)
要修好車子，你得先知道哪裡冒煙了。遇到網頁壞掉，有兩個地方是你必須立刻檢查的「案發現場」：
-
前端戰場：瀏覽器的開發者工具 (F12) -> Console 頁籤
- 這裡記錄了所有發生在使用者瀏覽器上的災難。
- 例如：API 呼叫失敗 (CORS 錯誤)、React 變數未定義 (
undefined is not a function)、或是某個圖片連結失效 (404 Not Found)。 - 按下 F12 (或右鍵選擇「檢查」)，切換到 Console 頁籤，尋找紅色的錯誤訊息。
-
後端戰場：VSCode / Cursor 的終端機 (Terminal)
- 這裡記錄了伺服器與編譯器發生的錯誤。
- 例如：少裝了某個 npm 套件 (
Module not found)、資料庫連線失敗、或是語法寫錯導致整個網站起不來 (Syntax error)。 - 打開編輯器下方的 Terminal 視窗查看紅字。
當你看到密密麻麻的紅字時，先不要被英文嚇到。試著冷靜下來，尋找包含 Error:、Exception 或是檔案路徑 (例如 src/app/page.tsx:15:2) 的那幾行，它就是破案的關鍵線索！
🗣️ 第二步：提問的藝術 (Context is King!)
如果你只跟 AI 說：「我的網頁壞了，不能登入，怎麼辦？」，AI 絕對幫不了你，它只能憑空猜測。 在 Vibe Coding 中，Context (上下文脈絡) 就是一切！你要把案發現場的證據完整地提供給 AI，它才能化身福爾摩斯幫你破案。
🔥【Vibe Prompt 最佳除錯範本】 我在開發 Next.js 專案，目前正在實作登入功能，檔案是
src/components/AuthForm.tsx。當我點擊登入按鈕時，畫面上沒有反應，而且瀏覽器的 Console 跳出了以下錯誤：
(直接貼上完整的紅色 Error Message 字串，連同後面的堆疊追蹤 Stack Trace 一起貼) TypeError: Cannot read properties of undefined (reading 'signInWithPassword') at handleLogin (AuthForm.tsx:24:43)附上我目前的
AuthForm.tsx完整程式碼：(全選並貼上你的完整程式碼)請問問題出在哪裡？請解釋原因，並直接給我修改後的完整程式碼。
只要你給予如此明確的線索，AI 通常能在 1 秒鐘內精準揪出：原來是你忘記 import Supabase client，或是你的變數名稱打錯了。
🤖 第三步：當 AI 開始鬼打牆 (AI Hallucination 幻覺)
有時候，你會遇到一個令人崩潰的情況：編輯器裡的 AI 開始「鬼打牆」。 它說：「抱歉，我發現問題了，請把這行改成 A。」 你改成了 A，還是報錯。你把錯誤丟給它，它又說：「抱歉，是我弄錯了，請改回 B。」 你改回 B，錯誤依舊。就這樣無限輪迴。
這是因為 AI 的對話紀錄 (Context Window) 太長了，它被之前錯誤的推論給綁架，導致它「忘記」了最初的目標，或是陷入了某種邏輯盲區 (AI 幻覺)。
解決方案：尋求第二意見 (Second Opinion)！ 就像看醫生一樣，當這個醫生一直醫不好，你該換個醫生看看了。
-
方法一：重置對話 (New Chat) 在 Cursor 中開一個全新的對話框，把你的目標、目前的程式碼、以及最新的錯誤訊息，當作一個全新的案子重新餵給它，讓它不受舊觀念干擾重新思考。
-
方法二：交叉詰問 (引入外部大神 Claude / ChatGPT)
- 打開網頁版的 Claude (目前推薦 Sonnet 3.5) 或 ChatGPT (GPT-4o)。
- 在前端排版與複雜的 React 狀態邏輯上，Claude 3.5 Sonnet 目前的表現通常優於其他模型。
- 將你的程式碼和錯誤訊息貼給 Claude，並說：「我的另一個 AI 助手一直修不好這個 Bug，他給的建議是 XXX，但還是報錯 YYY。請你以資深架構師的角度，幫我看出盲點在哪裡？」
- 通常這時候，外部的 AI 能一眼看穿編輯器 AI 沒發現的死角，給出一個完全不同但極其有效的解法。
💼 [商業應用場景] 報錯訊息就是客戶的需求
學會除錯，不只是為了解決自己的麻煩，這是一項能夠變現的硬實力。 在接案市場或是企業維護中，有很多古老的系統會突然跳出奇怪的錯誤。傳統工程師可能需要花兩天時間去翻原始碼找問題。
當你掌握了「蒐集 Error -> 提供 Context -> 交叉詰問」的這套 Vibe Coding 除錯心法，你可以接下那些別人修不好的爛攤子 (Debug 案)。別人花兩天，你只要花兩小時把環境架起來，丟給雙重 AI 分析，找出問題後修復，這兩天的工資就輕鬆入袋了。
除錯能力決定了你的專案穩定度，也決定了客戶對你的信任度。 下一章，我們將介紹本套教材的壓軸武器：如何精通你的整合開發環境 (IDE)，發揮 AI 的 100% 終極潛力！