AI SummaryA systematic debugging skill for web applications that leverages Chrome DevTools and Playwright MCPs to troubleshoot APIs, authentication flows, and UI issues. Developers working with web apps will benefit from its structured debugging approach and intelligent context discovery.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to install the "web-debug" skill in my project. Please run this command in my terminal: # Install skill into your project mkdir -p .claude/skills/web-debug && curl --retry 3 --retry-delay 2 --retry-all-errors -o .claude/skills/web-debug/SKILL.md "https://raw.githubusercontent.com/megalithic/dotfiles/main/docs/skills/web-debug/SKILL.md" Then restart Claude Code (or reload the window in Cursor) so the skill is picked up.
Description
Systematic web application debugging using Chrome DevTools MCP and Playwright MCP with intelligent validation and app-specific context discovery. Use for debugging web apps, APIs, authentication flows, and UI issues.
Overview
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.
"Which MCP should I use?"
` 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) `
"How should I debug this issue?"
` 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 `
"Should I take a screenshot or snapshot?"
` 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 `
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster