codex配置Chrome DevTools MCP

chrome-devtools-mcp安装

终端运行
npx chrome-devtools-mcp@latest

codex安装

使用 npm 更新 Codex CLI

在终端中执行以下命令即可将你的 Codex CLI 升级到最新版本：

npm install -g @openai/codex@latest

codex手动配置chrome-devtools-mcp

在 ~/.codex/config.toml 中，在你的 MCP 配置下添加一个 tool_timeout_sec 字段，将默认的 60 秒增加到 120 秒或更长：

[mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest"]
tool_timeout_sec = 120  # 增加超时时间到 120 秒

连接到已运行的 Chrome

如果你不想让 Codex 启动新的 Chrome 实例，而是想连接到你手动打开的、启用了远程调试的 Chrome 实例（例如为了在可见窗口中调试），你可以修改 MCP 配置，使用 connect-url 选项。

1. 手动启动 Chrome（带远程调试端口）：
   你需要在命令行启动 Chrome，并指定一个远程调试端口，例如 9222：Bash

   /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222

2. 修改 config.toml：
   将配置更改为连接到该 URL，而不是启动新实例：Ini, TOML

   [mcp_servers.chrome-devtools]
command = "npx"
args = ["chrome-devtools-mcp@latest", "--browserUrl=http://127.0.0.1:9222"]
tool_timeout_sec = 120

   这样，每次你启动 Codex 并触发浏览器操作时，它都会尝试连接到你已打开的 Chrome 窗口。

开了很多的chrome窗口，怎么指定它查看我要它看的窗口

这是一个非常好的问题！由于 Chrome DevTools MCP (Model Context Protocol) 服务器默认会启动一个新的 Chrome 实例来运行你的指令，当你手动打开了多个窗口时，你需要采取一些步骤来连接到你想要的那个特定窗口。

解决方案：连接到远程调试端口

Codex MCP 服务器可以通过连接到一个已启用远程调试端口的 Chrome 实例，从而控制你手动开启的那个窗口。这是最可靠的方法。

以下是具体的配置和操作步骤：

步骤 1: 启动你想要控制的 Chrome 窗口（带远程调试）

你需要通过命令行启动一个 Chrome 实例，并指定一个调试端口。这会强制这个特定的窗口对外暴露其调试接口。

在你的 Mac Mini 终端中运行以下命令（假设你的 Chrome 安装在默认路径）：

Bash

# 假设你想使用端口 9222
/Applications/Google Chrome.app/Contents/MacOS/Google Chrome --remote-debugging-port=9222 --user-data-dir="/tmp/chrome-debug"

• -remote-debugging-port=9222：指定 Chrome 监听的调试端口。
• -user-data-dir="/tmp/chrome-debug"：强烈建议使用一个临时的用户配置文件目录，防止调试会话干扰你的主 Chrome 配置文件。

现在，将你想要 Codex 调试的网页在这个新弹出的 Chrome 窗口中打开。

步骤 2: 修改 Codex 的 MCP 配置

现在，你需要告诉 Codex MCP 服务器不要启动新的 Chrome，而是连接到你刚才手动启动的端口。

编辑你的 ~/.codex/config.toml 文件，并修改 chrome-devtools 的 args，使用 --browserUrl 参数。

Ini, TOML

[mcp_servers.chrome-devtools]
command = "npx"
# 使用 --browserUrl 参数指向你手动启动的 Chrome 端口
args = ["chrome-devtools-mcp@latest", "--browserUrl=http://127.0.0.1:9222"]
tool_timeout_sec = 120

步骤 3: 在 Codex CLI 中执行指令

保存 config.toml 后，启动 Codex CLI。

Bash

codex

现在，当你向 Codex CLI 提出任何需要浏览器交互的指令时，它都会：

1. 连接到 http://127.0.0.1:9222 上的 Chrome DevTools 接口。
2. 通过该接口找到你打开的网页标签（Tab）。
3. 执行你的指令（例如，检查控制台日志、运行性能分析等）。

⚠️ 重要说明：目标网页的选择

当你连接到远程调试端口后，Chrome DevTools MCP 服务器会自动选择**第一个可用的网页标签（Tab）**进行操作。

如果你在该 Chrome 窗口中打开了多个标签页，并且想指定 Codex 查看哪一个，最可靠的方法是：

1. 关闭所有不相关的标签页。
2. 确保你想要调试的页面是唯一打开的页面。

通过这种方式，你就能精确地告诉 Codex 你要它控制和调试哪一个特定的 Chrome 窗口了。