前言

在網站的基本功能完成後，最後一個關鍵步驟就是測試和修正錯誤。這不只是「確認能用」，而是確保使用者在各種情境下都能順利使用網站、功能不會出錯，也能在錯誤發生時提供清楚的回饋。

---

測試重點：你需要檢查的事情

登入流程是否順暢

- 未登入時是否無法進入儀表板？

- 成功登入後是否跳轉到正確頁面？

- 登出後是否正確回到首頁？

按鈕點擊是否有作用

- 點下按鈕是否有反應？

- 是否有按下去但沒有回應、沒有 loading 狀態的情況？

- 是否避免了重複觸發（debounce 處理）？

資料顯示是否正確

- 用戶名稱、角色、事件資料是否有正確顯示？

- 畫面是否有出現 undefined、null、NaN 的字樣？

- 是否有元件在資料還沒回來時就強行渲染？

畫面錯誤提示是否清楚

- 發生錯誤時是否有顯示提示？

- 使用者是否知道發生什麼事、接下來該怎麼辦？

- 是否有 try/catch 或錯誤邊界處理？

---

如何用 AI 幫你 Debug？

當你遇到畫面無法顯示、資料跑不出來、console 出現紅字錯誤…… 這時候請記得：你不是一個人，AI 可以幫你！

給 AI 的最佳指令格式：

「我遇到一個錯誤，我將錯誤訊息與程式碼貼給你，請幫我找出原因並給出解法。」

然後你提供：

- 一段錯誤訊息（console 上的紅字）

- 一段可能出問題的程式碼（元件、函數、或流程）

- 最好也補上一句：「我原本預期會怎樣，但現在發生了什麼」

---

常見 AI Debug 指令範例

- 「我點了按鈕沒有反應，請幫我看為什麼事件沒有觸發？」

- 「這段 useEffect 會讓頁面無限重渲染，可以幫我重寫嗎？」

- 「fetch 資料時會失敗，我該怎麼加上錯誤處理？」

- 「畫面出現 undefined，是不是 props 傳遞有問題？」

---

給 AI 的資訊越完整，幫助越明確

當你要請 AI 幫忙時，記得提供以下四項資訊：

1. 錯誤訊息：直接複製 console.log 上的紅字
2. 相關程式碼：出錯的那段元件或邏輯
3. 你的預期結果：你希望這段程式要做什麼
4. 實際結果：它現在發生了什麼錯誤或行為

例子如下：

- 我畫面壞了，幫我修

- 我按下登入按鈕後應該跳轉到 dashboard，但現在畫面閃一下又回來，console 出現 ‘undefined is not a function’，這是 login 函數的程式碼…

---

對 AI 下指令的心法

我們都知道，AI 並不是完全免費的，當免費的額度用完時，就會變成算法比較陽春的 AI。 以 Cursor 為例，通常狀況下，每天會給你限定次數的額度，讓你可以較高級的 AI 對話。 當免費額度用完後 Cursor 會自動幫你轉成比較低階的 AI 跟你對話。

這時候如何和低階 AI 對話就成為了一個很重要的小技巧。 最重要的是——要有耐心：比較低階的 AI 通常需要提示多次或提示更清楚一點，他才能知道下一步要做什麼。

---

總結

網站做好之後，最重要的就是「做得正確」。 透過 AI 你可以：

- 找出錯誤的原因

- 改寫 bug 的邏輯

- 補齊異常處理與提示

- 更快速完成除錯流程

AI 不是不會修，只是你需要告訴他問題的點在哪裡，他才能知道要怎麼修。

既然 debug 都做完了，那我們下一步就準備公布到網路上吧！！