測試與除錯｜Vibe Coding 怎麼做測試與除錯？

你的 App 看起來能動，真的沒問題嗎？AI 寫出來的程式，看起來能動，不代表真的沒問題。在 Vibe Coding 裡，你就是測試人員。每完成一個版本，你都要刻意用各種情況去測試一輪。特別要測的，是那些正常人不會這樣用的情況。因為真實的使用者，一定會這樣用給你看。AI 不一定會主動想到這些狀況，所以要靠你自己在測試時發現。所以測試這件事，千萬別整個丟給 AI。那測試的時候，最常抓到哪些問題呢？第一種，是什麼都沒輸入就按下新增，結果跑出一個空白項目。第二種，是輸入超級長的一串文字，畫面一下子就被撐爆了。第三種最讓人崩潰，就是重新整理之後，資料全部消失不見。還有手機畫面跑版，以及連續快速點擊，造成重複新增。這些問題都很日常，卻常常是 AI 一開始漏掉的地方。怎麼測才不會漏掉呢？建議你準備一份測試清單。每完成一個版本，就照著清單從頭測一輪，並且把結果記錄下來。清單包含正常輸入一個項目，確認能順利新增成功。接著什麼都不輸入就按新增，確認不會出現空白項目。再輸入很長的文字，看看畫面會不會跑版。勾選和取消勾選的時候，也要確認完成率有正確更新。最後，重新整理頁面，檢查資料與勾選狀態還在不在。用手機或縮小瀏覽器視窗檢查畫面，再快速連點新增按鈕。發現問題先別急著修，全部記下來，再一次整理給 AI。接下來，發現問題之後，要怎麼跟 AI 說呢？最沒有用的回報，就是只說一句「它壞了」。AI 看不到你的畫面，也不知道你按了哪些按鈕。好的錯誤回報，要包含三件事。第一是重現步驟，也就是你做了什麼。第二是預期結果，也就是應該發生什麼。第三是實際結果，也就是實際發生了什麼。三件事講清楚，AI 才能準確找出問題在哪裡。光說它壞了，AI 只能靠猜，所以務必寫清楚。如果畫面上有錯誤訊息，也要一起貼給 AI。網頁程式的錯誤訊息，通常藏在瀏覽器的開發者工具裡。做法很簡單，先按鍵盤上的 F12，打開開發者工具。然後切換到 Console，也就是主控台這個分頁。裡面的紅色文字，就是錯誤訊息。就像在 Python 課學到的一樣，把錯誤訊息連同程式交給 AI。記得請它先解釋原因，再動手修正。我們把這些整理成一份錯誤回報範本，你可以直接照著用。開頭先說，請先說明可能原因，再給修正方式。同時要求它只修改必要的部分。這一句很重要，能避免 AI 為了修一個問題，就大改整個程式。接著依序填入重現步驟、預期結果和實際結果。像這個例子，是新增兩個項目、勾選第一個，重新整理後卻全變成未勾選。如果有 Console 錯誤訊息就貼上，最後再附上目前完整的程式。有了這份範本，回報錯誤就不用每次重新想怎麼寫。來做個小檢查，看看你記得多少。一份好的錯誤回報，應該包含哪三件事？選項一是檔案大小、修改時間、作者。選項二是重現步驟、預期結果、實際結果。選項三是瀏覽器品牌、螢幕尺寸、網速。先想想看，我們幾秒鐘後公布答案。答案是第二個，重現步驟、預期結果、實際結果。有了清楚的步驟和預期與實際結果，AI 才能準確找出問題。最後提醒你一個很實用的停損點。如果同一個問題，請 AI 修了三次還沒修好，就先停下來。不要再繼續在錯誤的方向上一直修，只會越修越亂。這時候，請開一個新的對話重新開始。貼上你的需求書、最後一個正常的版本，還有清楚的錯誤描述。只要把這三樣東西帶著，就能重新出發。測試、記錄、清楚回報，你就能帶著 AI 把程式修好。你當測試員，把錯誤說清楚，AI 就能修好。