在 Windows 11 用 Chrome DevTools MCP 驾驭浏览器：一键联通 Codex、自动化抓取与性能诊断的全能引擎

Chrome DevTools MCP 

        Chrome DevTools MCP 是把“浏览器能力”标准化为工具接口的强力引擎：它通过 Model Context Protocol（MCP）把页面导航、元素定位与交互、截图与录屏、网络/性能追踪（Tracing）、控制台与日志采集，乃至无头（Headless）批处理等能力，按“工具调用”的方式暴露给 Codex 与各类 Agent。相比脚本化的临时方案，它具备四个硬优势：① 标准协议对接，任意支持 MCP 的智能体都能即插即用；② 强安全与可控性（超时、隔离、审批策略），适合团队与生产环境；③ 行为可复现（同一指令=同一动作），便于 CI、E2E 测试与数据管道；④ 形态灵活，可本地拉起独立 Chrome，也可连接已运行实例或指定 executablePath/–browser-url。用它，你可以把“打开网页→操作→采集→分析”的整套流程交给 Codex 自动完成，从日常研发调试、质量回归，到数据采集、性能审计与运维巡检，都能实现真正的“描述即自动化”。

目标

• 在 Codex 中启用 chrome-devtools-mcp（MCP 服务器）

• 解决 program not found / npx 不在 PATH 等常见问题

• 给出两种稳定启动方式（不依赖 npx）

一、环境与前提

配置文件路径：%USERPROFILE%\\.codex\\config.toml

二、快速体检：定位 npm 与全局 bin 目录

# 定位 npm 可执行
(Get-Command npm).Source
# 例：C:\\Program Files\\nodejs\\npm.cmd 或 C:\\Program Files\\nodejs\\npm.ps1

# 查看全局可执行目录（prefix/bin）
npm config get prefix
# 例：C:\\Users\\<YourUser>\\AppData\\Roaming\\npm

三、安装 Chrome DevTools MCP（任选其一）

方案 A（推荐）：不依赖 npx，用 npm exec 拉起

无需把 npx 配进 PATH，最省心。

npm exec -y chrome-devtools-mcp@latest — –help

[mcp_servers.chrome-devtools]
# 用 npm.cmd 直接执行包（把路径换成你真实的 npm.cmd）
command = "C:\\\\Program Files\\\\nodejs\\\\npm.cmd"
args = ["exec","-y","chrome-devtools-mcp@latest"]
env = { SystemRoot = "C:\\\\Windows", PROGRAMFILES = "C:\\\\Program Files" }
startup_timeout_ms = 30000

# 可选：指定 Chrome 路径（若非默认）
# args = ["exec","-y","chrome-devtools-mcp@latest","–executablePath=C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe"]

# 可选：连接已运行的 Chrome（适合公司策略限制子进程）
# 先手动起： "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" –remote-debugging-port=9222
# 再改为：
# args = ["exec","-y","chrome-devtools-mcp@latest","–browser-url=http://127.0.0.1:9222"]

方案 B：全局安装后，直接调用 .cmd

npm i -g chrome-devtools-mcp

# 用上面“prefix”输出来替换 <GlobalBin>
Get-ChildItem "<GlobalBin>\\chrome-devtools-mcp*"
# 期望看到：chrome-devtools-mcp.cmd / .ps1

[mcp_servers.chrome-devtools]
# 用绝对路径指向全局可执行 .cmd（把 <YourUser> 替换成你的用户名）
command = "C:\\\\Users\\\\<YourUser>\\\\AppData\\\\Roaming\\\\npm\\\\chrome-devtools-mcp.cmd"
args = []
env = { SystemRoot = "C:\\\\Windows", PROGRAMFILES = "C:\\\\Program Files" }
startup_timeout_ms = 30000

# 同上，可选追加：
# args = ["–executablePath=C:\\\\Program Files\\\\Google\\\\Chrome\\\\Application\\\\chrome.exe"]
# 或：
# args = ["–browser-url=http://127.0.0.1:9222"]

四、在 Codex 中验证

codex

进入 TUI 后输入：

/mcp

若能看到 chrome-devtools，即接入成功。 再试一个简单任务（导航/截图/性能等）验证，比如：“打开 https://example.com 并截图”。

五、常见问题与速解

• Error loading configuration: duplicate key

  • 原因：[mcp_servers.chrome-devtools] 在 TOML 中重复定义。

  • 解法：确保只保留一个同名表块。

• MCP client … program not found

  • 原因：Codex 启子进程时找不到 npx 或可执行。

  • 解法（两选一）：

    • 方案 A：使用 npm.cmd exec（不依赖 npx）

    • 方案 B：使用全局 chrome-devtools-mcp.cmd 的绝对路径

• 首次启动超时

  • 把 startup_timeout_ms 调到 30000（或更高）

  • 先执行预热：

    npm exec -y chrome-devtools-mcp@latest — –help

  • 如仍慢，可加 –headless=true、–isolated=true

• Chrome 无法启动或被策略阻止

  • 改用“连接已运行的 Chrome”：先手动启动

    "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe" –remote-debugging-port=9222

    然后在 args 加：–browser-url=http://127.0.0.1:9222

• 路径/用户名不一致

  • 本文用 <YourUser>、<GlobalBin> 等占位符，请替换成你机器的真实路径。

  • 可用：

    (Get-Command npm).Source
    npm config get prefix

六、附：极简可用模板（复制即用）

方案 A（npm exec）

[mcp_servers.chrome-devtools]
command = "C:\\\\Program Files\\\\nodejs\\\\npm.cmd"
args = ["exec","-y","chrome-devtools-mcp@latest"]
env = { SystemRoot = "C:\\\\Windows", PROGRAMFILES = "C:\\\\Program Files" }
startup_timeout_ms = 30000

方案 B（全局 .cmd）

[mcp_servers.chrome-devtools]
command = "C:\\\\Users\\\\<YourUser>\\\\AppData\\\\Roaming\\\\npm\\\\chrome-devtools-mcp.cmd"
args = []
env = { SystemRoot = "C:\\\\Windows", PROGRAMFILES = "C:\\\\Program Files" }
startup_timeout_ms = 30000

七、WSL 使用者的补充（可选）

若在 WSL 里运行 Codex/MCP：

• 在 WSL 内安装 Node（nvm/apt 均可），并不要用 where.exe（Linux 用 which）。

• 推荐连接 Windows 侧 Chrome：WSL 的 args 使用 –browser-url=http://127.0.0.1:9222，Windows PowerShell 手动先开 Chrome 的远程调试端口。

• WSL 的 config.toml 路径是 ~/.codex/config.toml，与 Windows 的 %USERPROFILE%\\.codex\\config.toml 各自独立，别编辑错。

到这里，chrome-devtools-mcp 基本就绪。若你的企业策略较严、路径非默认或有多版本 Chrome，把 –executablePath 或 –browser-url 放进 args，稳定性更高。需要我再给一版“带三套可选参数（headless / executablePath / browser-url）的整合模板”，也可以直接发你。