web-debug

This skill guides systematic, efficient web debugging using Chrome DevTools MCP and Playwright MCP. It emphasizes validation before action to minimize slow operations and automatic context discovery from project documentation.

` Browser debugging needed? │ ├─▶ Chrome is already open with target page? │ └─▶ Use Chrome DevTools MCP │ ├─▶ Requires: --remote-debugging-port=9222 flag │ └─▶ Check: curl http://localhost:9222/json/version │ ├─▶ Need to launch fresh browser instance? │ └─▶ Use Playwright MCP │ ├─▶ Creates headless or headed browser │ └─▶ Cleaner state, no extension interference │ ├─▶ Need to test multiple browsers (Brave, Firefox, Safari)? │ └─▶ Playwright MCP supports multiple engines │ ├─▶ Need to connect to existing DevTools session? │ └─▶ Chrome DevTools MCP only │ └─▶ Automated testing / repeatable scenarios? └─▶ Playwright MCP (better API for automation) `

` Web debugging task? │ ├─▶ Page not loading / blank screen? │ ├─▶ 1. Validate URL: mcp__fetch__fetch (check status) │ ├─▶ 2. Check console: list_console_messages({ types: ["error"] }) │ ├─▶ 3. Check network: list_network_requests (look for 4xx/5xx) │ └─▶ 4. Only then: browser_snapshot (see what rendered) │ ├─▶ Authentication not working? │ ├─▶ 1. Check docs for auth method (Context Discovery) │ ├─▶ 2. Inspect storage: browser_evaluate localStorage/cookies │ ├─▶ 3. Check network: filter for auth endpoints │ └─▶ 4. Inspect response headers (Set-Cookie, WWW-Authenticate) │ ├─▶ API call failing? │ ├─▶ 1. list_network_requests({ resourceTypes: ["xhr", "fetch"] }) │ ├─▶ 2. get_network_request({ reqid: N }) for details │ ├─▶ 3. Check: status, headers, body, CORS errors │ └─▶ 4. Compare with docs/expected API contract │ ├─▶ Element not found / can't click? │ ├─▶ 1. Quick check: browser_evaluate("!!document.querySelector(...)") │ ├─▶ 2. If false: check network for pending loads │ ├─▶ 3. If still false: browser_snapshot to see actual page │ └─▶ 4. Check: wrong selector, dynamic loading, iframe │ ├─▶ Page is slow? │ ├─▶ 1. performance_start_trace({ reload: true, autoStop: true }) │ ├─▶ 2. Review insights from trace │ └─▶ 3. Check: large network payloads, long JS execution │ └─▶ Visual/layout issue? ├─▶ 1. browser_snapshot (accessibility tree) ├─▶ 2. browser_take_screenshot (actual visual) └─▶ 3. For full-page: save to file, then resize-image --check `

` Need page content? │ ├─▶ Need to interact (click, fill, etc.)? │ └─▶ browser_snapshot (returns element refs like "e123") │ ├─▶ Need exact visual appearance? │ └─▶ browser_take_screenshot │ ├─▶ Viewport only: Usually safe │ ├─▶ fullPage: true: ⚠️ May exceed API limits │ │ └─▶ Save to file, then: resize-image --check │ └─▶ Element screenshot: Specify uid │ ├─▶ Just checking page structure? │ └─▶ browser_snapshot (faster, includes a11y tree) │ ├─▶ Verifying simple condition? │ └─▶ browser_evaluate is FASTEST │ └─▶ "() => document.title" │ └─▶ "() => !!document.querySelector('.logged-in')" │ └─▶ Performance investigation? └─▶ performance_start_trace / performance_stop_trace `