chrome-devtoolslisted
Install: claude install-skill ulises-jeremias/agent-toolkit
# Chrome DevTools
Control and inspect a **live Chrome** browser via the official `ChromeDevTools/chrome-devtools-mcp` (`chrome-devtools-mcp`, Apache-2.0) MCP server. Gives your coding agent the full power of Chrome DevTools for **runtime debugging, network inspection, performance analysis, and rendering diagnostics** — while `playwright-cli` remains the primary tool for deterministic interaction and E2E validation.
> **Complementarity:** `playwright-cli` → deterministic `locator/snapshot/assert` workflows, multi-tab, traces, screenshots. `chrome-devtools` → network + console + performance traces + rendering diagnostics + Puppeteer-based reliable automation via DevTools. **Do not** re-implement Playwright flows via DevTools JSON-RPC; pick the right provider per capability (see decision table).
## When to use which provider
| Need | Use `playwright-cli` | Use `chrome-devtools` | Either |
|------|----------------------|-----------------------|--------|
| Click / fill / navigate deterministically | ✅ locators, `snapshot` → stable `eN` refs, fixtures | — | |
| Take screenshot of rendered state (verification required before declaring UI good) | ✅ `screenshot` + trace | ✅ `take_screenshot` + rendering inspection | ✅ |
| Assert E2E condition / generate test | ✅ assertions, `e2e-runner` specs | — | |
| Inspect DOM / accessibility tree / computed styles | `snapshot` (a11y-aware) limited | ✅ DOM, a11y tree, style inspection | |
| Network requests / console messages / runtime debu