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

• Attach to the target browser/page via chrome-devtools-mcp.

• Reproduce the issue step-by-step.

• Collect evidence: console errors, network timing, performance trace, screenshots if needed.

• Summarize root cause and actionable fixes.

• 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.