为 AI 编码助手接管 Chrome 的官方 MCP 服务器

Chrome DevTools for agents (chrome-devtools-mcp) is an official Model-Context-Protocol (MCP) server that lets coding agents like Claude, Cursor, Copilot, or Gemini CLI control and inspect a live Chrome browser. Instead of guessing what a page looks like, your agent can click, type, navigate, capture screenshots, read console messages, trace performance, and even take heap snapshots. It also ships a CLI for use without MCP.

AI coding agents often have to verify web pages, debug front-end issues, and measure performance. Without a live browser, they rely on static analysis or text-only approximations, which miss runtime errors, layout problems, network failures, and real user-perceived performance. chrome-devtools-mcp closes that gap by exposing the full power of Chrome DevTools as MCP tools. It is built on Puppeteer for reliable automation and automatically waits for action results, so clicks and navigations actually settle before the next step runs.

The server exposes dozens of tools grouped by scenario: input automation (click, fill, drag, upload), navigation (new_page, navigate_page, wait_for), emulation (device and viewport), performance tracing (performance_start_trace, performance_analyze_insight), network inspection (list_network_requests, get_network_request), debugging (take_snapshot, evaluate_script, list_console_messages, lighthouse_audit), memory analysis (12 heap snapshot tools), and extension management. An optional --slim mode reduces the surface to three tools when you only need navigation, scripting, and screenshots. There are also bundled skills (e.g., a11y-debugging, memory-leak-debugging) that give agents expert guidance on top of the raw tools.

chrome-devtools-mcp runs as an MCP server over stdio (or HTTP via a proxy). It launches a dedicated Chrome instance with a user data directory that is persisted across runs, or connects to an already-running Chrome through --browser-url, --wsEndpoint, or the newer --autoConnect flow. Under the hood it uses Puppeteer to automate Chrome and the DevTools frontend to extract performance insights. Internally, the codebase is organized around components such as McpPage, ToolHandler, HeapSnapshotManager, and PageCollector, which map MCP tool calls to browser operations. When a client calls a tool that needs a browser, the server starts Chrome on demand; simply connecting to the server does not launch the browser.

Add the following to your MCP client configuration:

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest"]
    }
  }
}

Then ask your agent:

Check the performance of https://developers.chrome.com

If the tool requires a browser, the server starts Chrome on demand. The @latest tag ensures your client always pulls the newest version.

You can tune behavior through CLI flags. Common ones include --headless for no UI, --isolated to use a temporary user-data-dir that is cleaned up after the browser closes, --channel=canary|dev|beta|stable to pick a Chrome channel, and --browser-url=http://127.0.0.1:9222 to attach to a running Chrome with remote debugging enabled. Use --wsEndpoint plus --wsHeaders for authenticated WebSocket connections. --autoConnect (Chrome 144+) connects to a running browser from the designated Chrome channel. For minimal contexts, --slim --headless exposes only three tools. Screenshot output can be tuned with --screenshot-format=jpeg|webp and --screenshot-max-width to keep AI context small. Run npx chrome-devtools-mcp@latest --help for the full list.

Best suited for: end-to-end web automation, performance analysis (tracing + CrUX field data), console/network debugging, memory leak diagnosis via heap snapshots, extension testing, and integrating a browser subagent into your own agentic tooling. Caveats: officially only Google Chrome and Chrome for Testing are supported; other Chromium browsers may behave unexpectedly. Since the server exposes browser content to MCP clients, avoid sharing sensitive or personal information you don't want those clients to see. Usage statistics are collected by default (opt out with --no-usage-statistics or set CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS/CI). Performance tools may send trace URLs to the CrUX API unless --no-performance-crux is set. Opening a remote debugging port exposes control of the browser to any local application, so use a dedicated --user-data-dir and avoid working on sensitive sites while it's open.