chrome-devtools
Installation
SKILL.md
Chrome DevTools MCP
Use Chrome DevTools MCP for browser-grounded debugging and automation. Prefer the text accessibility snapshot for structure and interaction, and use screenshots or traces only when the task needs visual or performance evidence.
Dispatch
| $ARGUMENTS | Action |
|---|---|
| Empty | Confirm the target page or URL, then run the general workflow |
| Page debugging, console errors, broken UI | Navigate or select the page, take a snapshot, inspect console and network evidence |
| Browser interaction or form flow | Use snapshot uids with click, fill, press_key, and fresh snapshots after state changes |
| Visual issue | Capture a screenshot after a snapshot anchors the relevant element or region |
| Network issue | List requests with filters, then inspect specific request/response details |
| Performance issue | Record a trace and hand off to chrome-devtools-debug-optimize-lcp for LCP-specific work |
| Extension testing | Enable extension-category tools in MCP config before using extension tools |