chrome-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

// Privacy-conscious config — disables Google usage statistics, CrUX field-data sharing, and update checks
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "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:

These are the actual tool names — call them as written, prefixed with the server namespace your client uses (e.g. mcp__chrome-devtools__take_snapshot):

Tool	What It Does	When to Use
take_screenshot	Captures the current page state	Visual verification, before/after comparisons
take_snapshot	Reads the live DOM as an accessibility-annotated tree	Verify rendering and structure, get element uids for interaction
list_console_messages / get_console_message	Retrieves console output (log, warn, error)	Diagnose errors, verify logging
list_network_requests / get_network_request	Captures network requests and responses	Verify API calls, check payloads
performance_start_trace / performance_stop_trace / performance_analyze_insight	Records and analyses performance timing	Profile load time, identify bottlenecks
evaluate_script	Runs JavaScript in the page context	Computed styles, read-only state inspection (see Security Boundaries)
navigate_page / new_page / select_page / list_pages	Tab and navigation control	Open the app, switch between pages
click / fill / fill_form / hover / press_key	Drives the page	Reproduce a bug, exercise a flow
wait_for	Blocks until text appears	Avoid racing an async render
emulate / resize_page	Viewport, network and CPU throttling	Responsive checks, slow-network repro