browser-debugger

瀏覽器除錯器（Browser Debugger）是專為網頁開發者和 QA 工程師設計的專業級技能，旨在自動化 UI 驗證與除錯工作流程。通過與 Chrome DevTools MCP 的直接整合，代理程式可以檢查 DOM 結構、監控網路流量、擷取控制台錯誤，並對渲染頁面進行視覺分析。它是程式實作與實際視覺輸出之間的橋樑，確保開發成果完美符合設計規格。

• 執行自動化視覺迴歸測試，以偵測版面位移、CSS 樣式不一致及元件對齊錯誤。

• 透過 Claudish 使用先進的視覺語言模型（如 Qwen, Gemini 或 GPT-4o），針對參考圖進行設計一致性驗證。

• 監控瀏覽器控制台輸出，捕捉執行期錯誤、警告及效能瓶頸，並提供可操作的除錯報告。

• 追蹤網路請求以驗證 API 互動，即時識別請求失敗或資料負載差異。

• 支援表單與互動測試，讓代理程式能夠模擬使用者操作流程並驗證應用程式狀態的變更。

• 此技能最適於在功能實作後的驗證階段、迴歸測試週期，或處理使用者回報的瀏覽器端錯誤時使用。

• 前置作業包括安裝 Chrome DevTools MCP 伺服器，並可選配 OpenRouter API 金鑰以獲得高品質的視覺分析能力。

• 為保持執行效率，該技能提供多層級的模型選擇指南，允許使用者根據測試需求平衡執行速度、成本與分析深度。

• 支援將視覺模型偏好設定進行持久化保存，確保跨工作階段的一致性。

• 建議在首次分析階段透過互動式提示選擇視覺模型，以優化代幣使用效率與準確度。執行測試序列前，請務必確認已安裝並啟動 Chrome DevTools MCP。