chrome-devtools-debugging
使用 Chrome DevTools 偵錯 Web 應用程式
Web 應用程式偵錯需要檢查主控台錯誤、網路請求和已驗證的會話。本技能提供對 Chrome DevTools MCP 的結構化存取，用於自動化偵錯工作流程、效能分析和瀏覽器上下文中的 JavaScript 執行。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“chrome-devtools-debugging”。 Get all console errors
预期结果:
- === Console Errors ===
- 1. TypeError: Cannot read property 'data' of undefined
- URL: https://app.example.com/dashboard
- Timestamp: 2024-01-15T10:23:45.123Z
- 2. Failed to load resource: net::ERR_FAILED
- URL: https://api.example.com/v1/users
- Status: 401 Unauthorized
正在使用“chrome-devtools-debugging”。 Check authenticated session state
预期结果:
- === localStorage ===
- auth_token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
- user_id: "12345"
- sessionExpiry: "2024-01-15T12:00:00Z"
- === sessionStorage ===
- csrf_token: "abc123xyz"
安全审计
安全This is a legitimate Chrome DevTools debugging skill. All static findings are false positives. The 'external_commands' detections are markdown code fences in documentation, not actual shell execution. 'Browser storage access' references are legitimate DevTools debugging operations for inspecting localStorage/sessionStorage during authenticated session debugging. 'Weak cryptographic algorithm' flags are triggered by security-related documentation content, not actual crypto implementation. No malicious code patterns found.
风险因素
质量评分
你能构建什么
偵錯生產環境中的 JavaScript 錯誤
快速識別和診斷已部署 Web 應用程式中的主控台錯誤，無需手動瀏覽器檢查。連線到執行中的 Chrome 執行個體並擷取所有帶有堆疊追蹤的錯誤訊息。
分析 API 請求失敗
將主控台錯誤與失敗的網路請求相互關聯，以識別 API 問題。取得完整的請求和回應詳細資訊，包括請求頭、狀態碼和回應主體。
偵錯已驗證的使用者會話
連線到已登入使用者的現有 Chrome 瀏覽器並檢查身份驗證狀態。檢查 localStorage 中的令牌和 sessionStorage 中的會話資料。
试试这些提示
Show me all console errors from the Chrome DevTools session. List each error with its message and timestamp if available.
Show me all failed network requests (4xx or 5xx status codes) from the browser. Include the request URL, status code, and response body for each.
Inspect the authenticated session. Get all items from localStorage and sessionStorage, and list any authentication tokens or user data found.
Start a performance trace, reload the page, and stop the trace. Then get the AI-powered insights about performance bottlenecks.
最佳实践
- 在連接之前先啟用遠端偵錯來啟動 Chrome：google-chrome --remote-debugging-port=9222
- 將 CHROME_DEVTOOLS_URL 環境變數設定為指向您的 Chrome 執行個體
- 處理大量主控台訊息或網路請求時使用分頁（page_size、page_idx）
- 結合主控台和網路工具來關聯錯誤與失敗的 API 呼叫
避免
- 對截圖或表單填寫使用此技能（請改用 browser-discovery 技能）
- 在啟動 Chrome 時未使用 --remote-debugging-port=9222 就嘗試連線
- 未等待頁面載入完成就呼叫工具
- 假設此技能可以偵錯非 Chrome 瀏覽器