Chrome DevTools MCP Skill

When to use

• Debugging UI behavior or layout issues.
• Investigating network requests, caching, or API failures.
• Measuring performance (rendering, long tasks, slow loads).

Connect options

• Connect to a running Chrome instance (remote debugging):
  • --browserUrl=http://127.0.0.1:9222
• Connect via WS endpoint (e.g., forwarded device/debug port):
  • --wsEndpoint=ws://127.0.0.1:9222/devtools/browser/

Capabilities (high-level)

• Input: click/type/drag, file upload, dialog handling.
• Navigation: open pages, navigate URLs, wait for elements.
• Emulation: network throttling, CPU throttling, viewport, geolocation.
• Debugging: evaluate JS, screenshots, console messages.
• Network: inspect requests, headers, response bodies.
• Performance: traces + Core Web Vitals + insight analysis.

Workflow checklist

1. Attach to the target browser/page via chrome-devtools-mcp.
2. Reproduce the issue step-by-step.
3. Collect evidence: console errors, network timing, performance trace, screenshots if needed.
4. Summarize root cause and actionable fixes.
5. Re-test after changes to confirm resolution.

Dev / test / debug playbooks

• Console errors: list_console_messages (filter errors/warnings) → capture stack + failing URL.
• Network failures: capture request/response details → check status, headers, caching.
• Perf regression: performance_start_trace (reload) → analyze Core Web Vitals → throttle network and re-test.
• UI issue: screenshot + evaluate JS for DOM state → verify expected classes/attributes.

Quality gates

• After dev/test/debug tasks, run: bun run build, bun run tsc (if available), bun run lint, bun run check.
• Follow Biome lint results; do not bypass.

Best practices

• Keep captures small and focused on a single scenario.
• Prefer reproducible steps and minimal noise.
• Report findings with clear “symptom → cause → fix” structure.