chrome-devtoolslisted

Tests in real browsers via Chrome DevTools MCP. Use when building or debugging anything that runs in a browser. Use when you need to inspect the DOM, capture console errors, analyze network requests, profile performance (LCP/CLS/INP), or verify visual output with real runtime data. Complements Playwright — use this for live debugging and performance work, Playwright for stable E2E test suites.
laguagu/claude-code-nextjs-skills · ★ 39 · Web & Frontend · score 83

Install: claude install-skill laguagu/claude-code-nextjs-skills

# Browser Testing with DevTools ## Overview Use Chrome DevTools MCP to give your agent eyes into the browser. This bridges the gap between static code analysis and live browser execution — the agent can see what the user sees, inspect the DOM, read console logs, analyze network requests, and capture performance data. Instead of guessing what's happening at runtime, verify it. ## When to Use - Building or modifying anything that renders in a browser - Debugging UI issues (layout, styling, interaction) - Diagnosing console errors or warnings - Analyzing network requests and API responses - Profiling performance (Core Web Vitals, paint timing, layout shifts) - Verifying that a fix actually works in the browser - Automated UI testing through the agent **When NOT to use:** Backend-only changes, CLI tools, or code that doesn't run in a browser. ## Setting Up Chrome DevTools MCP ### Installation ```jsonc // Privacy-conscious config — disables Google usage statistics, CrUX field-data sharing, and update checks { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["chrome-devtools-mcp@latest", "--isolated", "--no-usage-statistics", "--no-performance-crux"], "env": { "CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS": "1" } } } } ``` ### Available Tools Chrome DevTools MCP provides these capabilities: | Tool | What It Does | When to Use | |------|-------------|-------------| | **Screenshot** | Captures the current page state | Visual verificatio