告別除錯地獄！把 Debug 變成一種「儀式感」：AI 輔助重構與測試的 Vibe Coding 實戰

嗨，我是 Eric，浪花科技那個總是碎碎念只要鍵盤聲不對就寫不出 Code 的資深工程師。今天不談什麼高大上的系統架構，我們來聊聊每個工程師最痛苦、也最逃避不了的環節——Debug（除錯）、寫測試與重構。

坦白說，以前的我只要看到 Error Log 跳出那紅通通的一片，或是接手前人留下的「義大利麵程式碼（Spaghetti Code）」，心態通常是崩潰的。那時候的 Debug 是一種折磨，是不得不做的苦工。但自從 AI 工具（像是 GitHub Copilot, Cursor, 甚至是 ChatGPT）進入我的開發流程後，一切都變了。

現在，我把這過程稱為「Debug 的儀式感」。這不再只是修復錯誤，而是一種運用 AI 進行「Vibe Coding」的流暢體驗。我們不再是孤獨的修水管工人，而是指揮 AI 代理人（Agent）的技術總監。這篇文章，就要帶你走一遍這套把痛苦轉化為享受的開發心法。

什麼是 Debug 的「儀式感」？從 Panic 到 Vibe

傳統的 Debug 流程是這樣的：
發現 Bug → 飆髒話 → 查 Log → Google 搜尋 → StackOverflow 複製貼上 → 再錯 → 再改 → 勉強能動 → 趕快 commit 祈禱不要壞。

而結合了 AI 的 Vibe Coding 流程則是：
發現 Bug → 深呼吸（儀式感開始） → 將錯誤與上下文丟給 AI → 與 AI 討論根本原因 → 請 AI 撰寫單元測試重現 Bug → 讓 AI 重構程式碼 → 測試通過 → 喝口咖啡，覺得自己像個藝術家。

這裡的關鍵在於：不要只求「修好」，要求「進化」。藉由 Bug 出現的契機，順便把那段爛 Code 重構，並補上測試。這就是工程師的 Vibe。

第一階段：與 AI 對話，精準定位病灶

很多新手用 AI Debug 最大的問題是「給的資訊太少」。直接丟一句「我的 WordPress 網站掛了」給 AI，它也救不了你。在 Vibe Coding 的流程中，我們要把 AI 當作一個資深的 Pair Programmer。

假設我們遇到一個 WordPress 自訂外掛的錯誤，使用了 `wp_remote_get` 卻回傳了空值，導致後續處理崩潰。

錯誤示範：

幫我看這段 code 為什麼錯？
$response = wp_remote_get($url);
$body = wp_remote_retrieve_body($response);
$data = json_decode($body);
echo $data->title; // Error: Attempt to read property on null

Vibe Coding 的 Prompt 技巧：

你要提供上下文（Context）。告訴 AI 你的預期行為、實際發生的錯誤，以及這段程式碼的商業邏輯。

「嘿，我正在處理一個 API 串接，目標是獲取產品標題。但是當 API 回傳非 200 狀態碼或是網路逾時的時候，這段程式碼會炸開。請幫我分析潛在的錯誤點，並提供一個防禦性程式設計（Defensive Programming）的修改版本。我們要優雅地處理錯誤，而不是讓它噴出 PHP Error。」

這樣一來，AI 不僅會修好 Bug，還會教你怎麼寫得更穩健。

第二階段：讓 AI 當你的測試工程師（QA）

說實話，大家都不愛寫測試。這就是 AI 最強大的地方：它不覺得寫測試很無聊。

在修復 Bug 之前，我會先要求 AI：「請寫一個 PHPUnit 或 Pest 測試案例，來『重現』這個 Bug。」這就是測試驅動開發（TDD）的 AI 加速版。

舉個 Laravel 的例子，假設我們有一個計算訂單折扣的 Service，但負數金額會導致計算錯誤。我會這樣下指令：

「這是一個計算折扣的 `OrderService` 類別。請幫我用 Pest 寫一組測試，包含邊界測試（Edge Cases）：例如訂單金額為 0、金額為負數、或是折扣碼過期的情況。請確保這些測試目前是失敗的（Red）。」

AI 會產出類似這樣的測試代碼：

// 支援經典編輯器的代碼區塊
it('throws exception when order amount is negative', function () {
    $service = new OrderService();
    expect(fn() => $service->calculateDiscount(-100, 'SAVE10'))
        ->toThrow(InvalidArgumentException::class);
});

看著 AI 幫你把測試寫好，你只需要專注在「讓測試通過」，這種被輔助的感覺，就是 Vibe。

第三階段：重構，把垃圾變黃金

Bug 修好了，測試通過了。這時候傳統流程可能就結束了。但在「儀式感」流程中，這才是高潮的開始。

既然這段程式碼已經打開了，為什麼不讓它變得更美？特別是那些充滿 `if-else` 地獄的舊代碼。我們可以利用 Cursor 的 `Cmd+K` 或是 Copilot Chat 進行重構。

Prompt 指令：
「這段程式碼邏輯雖然正確，但可讀性很差。請幫我重構它：
1. 使用 Early Return 來減少巢狀層級。
2. 變數命名改為更具語義化的名稱。
3. 如果可以，使用 PHP 8.1 的 Enum 或 Match Expression 來優化判斷式。
請保持原有邏輯不變，確保剛剛寫的測試依然通過。」

你會驚訝地發現，AI 往往能寫出比你當下還清楚的邏輯。這不僅是優化代碼，更是一個自我學習的過程。你看著 AI 的改寫，會心想：「喔！原來可以用 `match` 這樣寫，學到了。」

Eric 的私房工具箱：打造除錯環境

要達成這種 Vibe，除了 AI，你的開發環境也不能馬虎。以下是我的必備組合：

• Cursor / VS Code + Copilot： 這是基本盤。Cursor 的優勢在於它可以讀取整個專案的 codebase，給出的建議更精準。
• Xdebug： 別再只會 `var_dump` 了。配合 AI，你可以把 Xdebug 的變數截圖或複製給 AI，讓它幫你「看」記憶體裡發生什麼事。
• Query Monitor (WordPress) / Laravel Telescope： 這些監控工具能讓你知道 SQL 查詢到底哪裡慢，再丟給 AI 優化。
• Git Commit 的儀式感： 重構完後，請 AI 幫你寫 Commit Message。「Generate a conventional commit message for these changes, focusing on the refactoring of the discount logic.」

結論：享受與 AI 共舞的時光

把 Debug 變成儀式感，核心在於「心態的主動權」。以前是被 Bug 追著跑，現在是你帶著 AI 獵犬去圍捕 Bug，並且順手把家裡（Codebase）打掃得乾乾淨淨。

當你下次遇到 Fatal Error 時，別急著焦慮。泡杯咖啡，打開你的 AI 助手，跟它說：「來吧，讓我們把這坨義大利麵變成五星級料理。」這就是屬於現代工程師的浪漫。

延伸閱讀

想更深入了解如何將這種思維應用在不同場景嗎？推薦你閱讀以下文章：

• 網站卡頓？別只會裝快取！資深工程師教你用 Query Monitor 揪出效能殺手 – 工欲善其事，必先利其器，這是 Debug 的基礎。
• AI 寫 Code 只是基本功？資深工程師揭秘：AI Coding Agent 的真正價值是當你的『技術決策軍師』 – 進一步了解如何讓 AI 參與架構決策。
• Blade 模板是藝術品還是災難現場？Laravel 資深工程師的 8 個關鍵實踐 – 重構不只在後端，前端模板也需要 Vibe Coding。