dev-tools-skill

Overview

Use the Chrome DevTools MCP server to diagnose and fix frontend issues by observing the live page, gathering evidence (console, network, performance), and proposing targeted code changes.

Quick Start

1. Confirm the user wants DevTools used (or they already asked).
2. Open the target page, then take an a11y snapshot.
3. Triage via console + network + quick DOM inspection.
4. Choose the appropriate workflow below and follow it end-to-end.
5. Summarize findings + propose the smallest safe fix.

Workflow Decision Tree

• UI/interaction bug (layout, hover/click, missing text): use UI/Interaction Workflow.
• Performance/lag (slow load, jank, long TTI): use Performance Workflow.
• API/network issue (failed fetch, wrong data): use Network Workflow.
• Runtime error (crash, blank screen, stack trace): use Console/Error Workflow.

Core Workflows

1) Triage (always first)

• Capture state: list_pages → select_page → take_snapshot.
• Scan for visible errors (missing sections, broken layout) in snapshot text.
• Check console messages (list_console_messages, then get_console_message for details).
• Check network requests (list_network_requests, then get_network_request for errors/slow calls).
• Form a hypothesis and select a workflow below.

2) UI/Interaction Workflow

• Use take_snapshot to locate the target element; if unclear, take_screenshot.
• Inspect element text/attributes via evaluate_script (read-only DOM queries).
• Reproduce the issue with click, hover, or press_key.
• If layout is involved, measure box sizes/positions via evaluate_script.
• Propose minimal CSS/JS fixes; if unsure, ask 1 targeted question.

3) Performance Workflow

• Run a trace: performance_start_trace (reload=true) → reproduce → performance_stop_trace.
• Identify top issue via performance_analyze_insight.
• Correlate with network timings and large asset loads.
• Recommend fixes: reduce bundle size, defer non-critical JS, optimize images, avoid layout thrash.

4) Network Workflow

• List requests and find failures/slow endpoints.
• Open failing request details (get_network_request), capture status, timing, payload.
• Cross-check console for CORS or runtime fetch errors.
• Suggest fixes: endpoint URL, headers/auth, payload shape, caching, retries.

5) Console/Error Workflow

• Read console errors and stack traces in full.
• Identify the first failing module/function; map to code location if possible.
• Confirm if error is user-triggered vs load-time.
• Suggest smallest code change + safe rollback steps.

UX & Safety Rules

• Explain actions in plain language; assume the user is less experienced.
• Avoid submitting forms or destructive actions without explicit user confirmation.
• Keep fixes minimal and reversible; call out any risk.

References

• See references/mcp-cheatsheet.md for MCP command usage.
• See references/debug-workflows.md for detailed steps and examples.
• See references/performance.md for perf triage patterns.
• See references/network.md for network debugging patterns.
• See references/ui-debug.md for DOM/layout debugging tips.