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.