← ClaudeAtlas

chrome-devtoolslisted

Use Chrome DevTools MCP to control and inspect a live Chrome instance for network, console, performance, rendering, and Deep debugging. Pairs with playwright-cli (deterministic interaction/E2E) — complements, not duplicates.
ulises-jeremias/agent-toolkit · ★ 16 · AI & Automation · score 76
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