browser-testing-with-devtools

1# Browser Testing with DevTools
2 
3## Overview
4 
5Use 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.
6 
7## When to Use
8 
9- Building or modifying anything that renders in a browser
10- Debugging UI issues (layout, styling, interaction)
11- Diagnosing console errors or warnings
12- Analyzing network requests and API responses
13- Profiling performance (Core Web Vitals, paint timing, layout shifts)
14- Verifying that a fix actually works in the browser
15- Automated UI testing through the agent
16 
17**When NOT to use:** Backend-only changes, CLI tools, or code that doesn't run in a browser.
18 
19## Setting Up Chrome DevTools MCP
20 
21### Installation
22 
23Add the following to your project's `.mcp.json` or Claude Code settings:
24 
25```json
26{
27  "mcpServers": {
28    "chrome-devtools": {
29      "command": "npx",
30      "args": ["-y", "chrome-devtools-mcp@latest", "--isolated"]
31    }
32  }
33}
34```
35 
36`-y` skips the npx install confirmation. By default the server launches Chrome with its own dedicated profile (under `~/.cache/chrome-devtools-mcp/`), separate from your personal browser; `--isolated` goes one step further and uses a temporary profile that is wiped when the browser closes. This is the right setup for most testing.
37…