Codex 通过 MCP 接入 Chrome DevTools 完整指南

这篇文章介绍如何为 OpenAI Codex 配置 Chrome DevTools MCP，让 Codex 能够直接控制 Chrome 浏览器，实现自动化调试、截图检查、性能分析等能力。

最简单的安装方式

Codex 官方支持 MCP 协议，一条命令即可添加 Chrome DevTools MCP：

codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest

添加完成后，进入 Codex TUI 界面输入 /mcp，如果看到 chrome-devtools 出现在列表中，说明 MCP 服务器已成功连接。

Codex 的 MCP 配置会写入 ~/.codex/config.toml，CLI 和 IDE 扩展共用这一套配置。(OpenAI Developers)

Chrome DevTools MCP 官方也明确支持 Codex，推荐使用 codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest 命令安装。(GitHub)

手动配置方式

也可以直接在 ~/.codex/config.toml 中手动编写配置：

# ~/.codex/config.toml

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]
startup_timeout_sec = 20
tool_timeout_sec = 60
enabled = true

前置依赖：

• Node.js LTS
• npm
• 当前稳定版 Chrome (GitHub)

远程调试模式：复用已登录状态

如果你想让 Codex 操作已经登录的网站——比如后台管理系统、SaaS 平台、本地 localhost 页面——可以用 Chrome 远程调试端口模式：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-profile-codex

然后 MCP 配置改为：

[mcp_servers.chrome-devtools]
command = "npx"
args = [
  "-y",
  "chrome-devtools-mcp@latest",
  "--browser-url=http://127.0.0.1:9222"
]
enabled = true

⚠️ 安全提示：开启 --remote-debugging-port 后，本机其他程序理论上可以控制这个 Chrome 实例。不要在这个窗口里打开敏感账号或隐私页面。官方也建议使用独立的 --user-data-dir，避免暴露日常浏览器资料。(GitHub)

常用提示词

让 Codex 配合 Chrome DevTools 干活，可以直接用这类提示词：

调试问题：

布局检查：

性能分析：

轻量模式

如果只需要基础的浏览器自动化（不需要完整的 DevTools 面板），可以加 --slim 和 --headless 参数：

[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest", "--slim", "--headless"]
enabled = true

slim 模式只暴露导航、脚本执行、截图等基础工具，适合简单的页面测试场景。(GitHub)