- 學習使用 @workspace 進行全專案的錯誤分析 (Ask 模式)
- 掌握 Edit 模式進行單檔快速修復
- 體驗 Agent 模式處理複雜的跨功能問題
- 理解何時選擇 Ask 諮詢、Edit 快速修復、Agent 自主執行
您接手了一個購物車計算器的 Web 應用，但這個應用有多個 Bug 需要修復。您將學習如何靈活運用三種模式：
- Ask 模式：診斷分析、理解問題
- Edit 模式：單檔案的快速修復
- Agent 模式：處理複雜的相關問題
04-debugging-assistant/
├── README.md (本檔案)
├── index.html (購物車介面)
├── style.css (樣式檔案)
├── script.js (含有 6 個明顯 Bug 的 JavaScript)
└── package.json (專案配置)
此應用包含以下 6 個明顯的 Bug（簡化版，便於教學）：
- 總金額計算錯誤：使用加法而不是乘法（第72行）
- 運費邏輯被覆蓋：永遠是150元運費（第83行）
- 清空購物車按鈕沒反應：函數名稱錯誤
- 優惠券功能不完整：FREESHIP 沒有實際作用
- 結帳後不會清空購物車：註解掉的程式碼
- 數量輸入沒有驗證：空值會導致 NaN 錯誤
- 用瀏覽器開啟
index.html - 測試場景：
- 加入1台筆電（25000元）
- 觀察總金額是否正確？ ❌ Bug 1：顯示 $25,001（應該是 $25,000）
- 點擊「清空購物車」按鈕 ❌ Bug 3：沒反應
- 輸入優惠券
FREESHIP❌ Bug 4：運費還是150元 - 結帳後再加商品 ❌ Bug 5：之前的商品還在
@workspace 我測試這個購物車發現幾個問題：總金額計算錯誤、清空按鈕沒用、免運費無效。請幫我分析 script.js 中的問題。
使用模式：Ask
請修復這個購物車的 6 個 Bug：
1. 總金額計算錯誤（第72行加法改乘法）
2. 運費永遠150元（第83行）
3. 清空按鈕沒反應（函數名稱錯誤）
4. FREESHIP 優惠券沒有實際作用
5. 結帳後不會清空購物車
6. 數量輸入驗證問題
請一次修復完成，讓所有功能正常運作。
使用模式：Agent
- 重新整理頁面測試：
- ✅ 加入1台筆電：總金額正確顯示 $25,150
- ✅ 清空購物車按鈕：可以正常清空
- ✅ 輸入
FREESHIP：運費變成 $0 - ✅ 結帳後：購物車自動清空
@workspace 現在購物車基本功能都正常了，還可以加入哪些提升使用者體驗的功能？
使用模式：Ask
- 總金額錯誤：加入任何商品，金額會多1
- 運費問題：任何金額都是150元運費
- 清空按鈕：點擊沒反應（Console 會有錯誤）
- 免運費券：輸入 FREESHIP 運費不會變0
- 結帳問題：結帳後商品還在購物車
- 輸入驗證：數量框留空再按新增會有問題
- 總金額正確：25000元商品顯示25000元
- 運費邏輯：<10000收200、10000-30000收100、>30000免運
- 清空按鈕：點擊能清空購物車
- 免運費券：FREESHIP 讓運費變0
- 結帳清空：結帳後購物車自動清空
- 輸入安全：空值不會造成錯誤
- 簡單替換 → Edit：拼字錯誤、函數改名、簡單修正
- 複雜邏輯 → Agent：計算邏輯、功能實現、跨函數修改
- 需要理解 → Ask：分析問題、學習概念、全專案掃描
Edit: "修復第 X 行的錯誤"
Agent: "實現完整的 XX 功能"
Ask: "@workspace 分析 XX 問題"
完成本場景後，您應該：
- 掌握 Ask、Edit、Agent 三種模式的使用時機
- 學會根據問題類型選擇最適合的模式
- 理解 Edit 模式在快速修復中的價值
- 體驗模式組合帶來的效率提升
- 擁有一個完全正常運作的購物車應用
場景 5 將展示 Agent 策略制定，讓 Agent 自主設計和實現完整的測試策略。