昨天我們替網站收藏管理器加入了 LocalStorage，現在不只可以新增、刪除和搜尋網站，就算重新整理網頁，資料也不會全部消失。

做到這裡，這個小專案其實已經具備基本功能了。

不過，既然這次是用 Vibe Coding 開發，當然不能只測試功能正常的情況。

如果 AI 寫出來的程式有 Bug，那能不能再讓 AI 自己找出問題並修好？

Day 17 我們已經試過讓 Agent 修復登入頁面的錯誤，所以今天就不再重新介紹 Debug 的概念，而是直接拿這幾天完成的收藏管理器來測試。

第一步：先準備一個 Bug

為了讓這次的測試比較明確，我決定先故意製造一個簡單的錯誤。

還記得昨天加入的 saveBookmarks() 嗎？

正常情況下，每次新增收藏，都應該把最新資料存進 LocalStorage：

function addBookmark() {
    // 取得輸入資料並進行驗證
    ...

    bookmarks.push(newBookmark);

    saveBookmarks();
    renderBookmarks();
}

這次我們故意把 saveBookmarks() 註解掉：

function addBookmark() {
    // 取得輸入資料並進行驗證
    ...

    bookmarks.push(newBookmark);

    // saveBookmarks();
    renderBookmarks();
}

這樣修改之後，表面上看起來不會有什麼問題。

使用者按下新增按鈕，收藏卡片還是會正常出現，搜尋和刪除功能也不一定會受到影響。

但只要按下 F5 重新整理網頁，就會發現剛剛新增的資料消失了。

這種 Bug 其實比直接跳出錯誤訊息更麻煩，因為程式看起來能正常執行，卻沒有達到我們預期的結果。

第二步：把問題交給 Agent

這次我不打算直接告訴 Agent 哪一行寫錯，而是用一般使用者遇到問題時的描述方式：

目前 BookmarkManager 有一個問題：新增收藏後，畫面可以正常顯示新資料，但是按下 F5 重新整理網頁，剛剛新增的收藏就消失了。

請檢查目前專案的 JavaScript 程式碼，找出造成這個問題的原因並修復。

請保留原本的新增、刪除、搜尋與分類功能，不要重新設計 UI，也不要加入新的套件。

修復完成後，請說明問題原因、修改位置，以及我應該如何確認問題已經解決。

這次 Prompt 的重點，是把實際發生的狀況和預期的結果說清楚。

我們沒有指定 saveBookmarks()，也沒有要求修改哪一行，而是讓 Agent 自己閱讀專案、追查資料保存的流程。

這正好也是 Day 8 學過的 Context：提供足夠的資訊，讓 AI 不需要完全靠猜測來找問題。

第三步：觀察 Agent 的修復方式

如果 Agent 正確找到問題，應該會注意到新增收藏時，程式只有更新 bookmarks 陣列，卻沒有同步更新 LocalStorage。

因此修復方式其實很簡單，就是把原本缺少的函式呼叫補回來：

bookmarks.push(newBookmark);

saveBookmarks();
renderBookmarks();

修復後，Agent 也應該能解釋：

新增收藏時只更新了記憶體中的陣列，沒有呼叫 saveBookmarks()，因此重新整理後只能讀取到先前儲存的資料。

當然，以上是這次刻意製造的 Bug 所預期的分析結果。實際操作時，還是要看 Agent 是否真的找到正確原因，而不是直接把預期答案當成測試成功。

第四步：確認 Bug 真的修好了

接下來就是實際驗證。

我會先新增一筆測試收藏：

網站名稱：Stack Overflow
網址：https://stackoverflow.com
分類：學習

確認卡片出現後，按下 F5 重新整理。

如果 Stack Overflow 依然存在，就代表新增後的保存流程已經恢復正常。

接著再刪除這筆收藏，重新整理一次，確認刪除功能也沒有受到這次修改影響。

這一步其實滿重要的，因為 AI 說「已修復」不代表我們就可以直接相信。尤其 Agent 有時候為了解決一個問題，可能會順便修改其他地方。

所以在 Debug 完成後，除了確認原本的 Bug 消失，也要簡單檢查其他功能有沒有被弄壞。

今天的心得

這次的 Bug 雖然是刻意製造的，但它其實很接近實際開發時可能遇到的情況。

有時候程式沒有跳出任何錯誤訊息，畫面看起來也很正常，但就是有某個功能不符合預期。

以前可能需要自己慢慢追蹤程式執行流程，現在則可以先把問題描述給 Agent，讓它協助閱讀程式碼、分析原因並提出修改。

不過這也不代表 Debug 可以完全不管。

AI 可以幫忙找問題、修改程式，但最後確認功能是否正常，仍然是開發者需要負責的事情。

到今天為止，我們的收藏管理器已經完成主要功能，也實際經歷了一次 Debug。

Day 28，就來進行最後的整理：讓 AI 幫整個專案做一次 Code Review，看看還有哪些地方值得改善。