browser-testing-with-devtools

# 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 ```bash # Add Chrome DevTools MCP server to your Claude Code config # In your project's .mcp.json or Claude Code settings: { "mcpServers": { "chrome-devtools": { "command": "npx", "args": ["@anthropic/chrome-devtools-mcp@latest"] } } } ``` ### Available Tools Chrome DevTools MCP provides these capabilities: | Tool | What It Does | When to Use | |------|-------------|-------------| | **Screenshot** | Captures the current page state | Visual verification, before/after comparisons | | **DOM Inspection** | Reads the live DOM tree | Verify component rendering, c...