chrome-devtools-mcp 使用

Chrome DevTools MCP 是一个本地服务，它为 AI 编码助手（比如 Claude、Codex、Cursor 等）提供了一套控制 Chrome 浏览器的工具集。

Chrome M144 中添加了一项新功能，可让 Chrome 开发者工具 MCP 服务器请求远程调试连接。这一新流程基于 Chrome 现有的远程调试功能构建而成。默认情况下，Chrome 中会停用远程调试连接。开发者必须先前往 chrome://inspect#remote-debugging 明确启用此功能。

开始使用

第 1 步：在 Chrome 中设置远程调试

在 Chrome（版本 >= 144）中，执行 chrome://inspect/#remote-debugging 以启用远程调试。

或者直接下载一个免安装版本 Chrome，指定参数启动 Chrome 实例：

d:\softs\portable\Chrome\chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\temp\codex-chrome-profile"

第 2 步：配置 chrome-devtools-mcp 服务器自动连接到正在运行的 Chrome 实例

Codex

model = "gpt-5.4"

[mcp_servers.chrome_devtools]
command = "cmd"
args = ["/c", "npx", "-y", "chrome-devtools-mcp@latest", "--browser-url=http://127.0.0.1:9222"]
startup_timeout_sec = 20
tool_timeout_sec = 120

[mcp_servers.playwright]
command = "cmd"
args = ["/c", "npx", "-y", "@playwright/mcp@latest", "--browser=chrome", "--user-data-dir=C:\\temp\\playwright-mcp-profile"]
startup_timeout_sec = 20
tool_timeout_sec = 120

Cursor

{
  "mcpServers": {
    "chrome_devtools": {
      "type": "stdio",
      "command": "powershell.exe",
      "args": [
        "-NoLogo",
        "-Command",
        "fnm env --shell powershell | Out-String | Invoke-Expression; & npx.cmd -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

第 3 步：测试使用

提示词：

# 这个 chrome_devtools 指的是上面配置的 mcpServers 下的名称
使用 chrome_devtools mcp 打开 http://localhost/login/index.php

实战

前端仿写页面

提示词：

使用 chrome_devtools mcp 打开 <目标网址>。

只复刻首屏 above-the-fold 区域：
- 顶部导航
- hero 区
- CTA 按钮
- 首屏视觉层级

流程：
1. 先截目标页首屏
2. 分析首屏 DOM 结构、文本层级、按钮、背景、间距
3. 在当前项目中实现首屏
4. 启动本地页面
5. 截本地首屏并与目标页对比
6. 连续修正，直到布局和节奏接近

浏览器自动化插件开发（登录、爬虫等）

参考资料

让编码智能体使用 Chrome DevTools MCP 调试您的浏览器会话 https://developer.chrome.com/blog/chrome-devtools-mcp-debug-your-browser-session?hl=zh-cn