用 Codex 接管当前 Chrome 调试会话：Chrome DevTools MCP 实战指南

用 Codex 接管当前 Chrome 调试会话：Chrome DevTools MCP 实战指南

背景

做前端问题定位时，单靠读代码往往不够。真正影响判断的信息通常来自浏览器运行时：

Console 报错

Network 请求与响应

当前页面 DOM 状态

截图与性能信息

Chrome DevTools MCP 的价值就在这里：它把 Chrome DevTools 的能力暴露给  AI 编码助手，让助手不再“盲写代码”。

这篇文章总结的是一套已经实际跑通的配置方式，目标很明确：

不装浏览器插件

直接复用当前正在使用的 Chrome

让 Codex 能读取当前页面的 Console、Network、截图和页面结构

当前采用的方案是：

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

这也是本文重点介绍的使用方式。

这套方案能解决什么问题

配置完成后，Codex 可以直接协助做这些事情：

查看当前浏览器标签页列表

切换到指定页面

读取 Console 消息

读取 Network 请求

查看某条请求的请求头、请求体、响应体

获取页面快照

截图

协助分析前端运行时问题

对于前端开发来说，这意味着很多“你先把报错截图给我”的低效沟通可以省掉。

最终方案概览

本方案使用的是 官方 Chrome DevTools MCP，不是第三方  插件 。

整体链路如下：

Codex  └─ MCP Client      └─ chrome-devtools-mcp          └─ 连接当前 Chrome 会话（--autoConnect）              └─ 读取 DevTools 能力                  ├─ Console                  ├─ Network                  ├─ DOM Snapshot                  ├─ Screenshot                  └─ Performance

关键点有两个：

使用官方 chrome-devtools-mcp

使用 --autoConnect，直接连接当前 Chrome 会话

为什么选 --autoConnect

chrome-devtools-mcp 有多种连接方式，但当前最适合日常开发的是 --autoConnect。

--autoConnect 的特点

直接复用当前正在使用的 Chrome

可以沿用你当前的登录态、Cookie、页面上下文

不需要单独启动一个 9222 调试专用浏览器

更适合“我已经打开了页面，你直接帮我看”的场景

和 --browser-url 的区别

--browser-url=http://127.0.0.1:9222 的方式也能用，但更偏传统远程调试模式：

需要你手动开调试端口

常常要单独启动一个专用 Chrome

更适合自动化、沙箱或特殊环境

如果你的目标是日常开发调试，优先建议 --autoConnect。

前置条件

在开始之前，确认以下条件：

已安装 Codex

已安装 Node.js

已安装 Chrome

Chrome 版本足够新

愿意让 Codex 访问当前浏览器调试信息

本机实际环境中，下面这两个条件已经满足：

node -v codex mcp add --help

第一步：在 Chrome 中启用远程调试入口

打开 Chrome，访问：

chrome://inspect/#remote-debugging

然后按照页面提示启用远程调试能力。

这是 --autoConnect 模式的必要前提。

这一步的作用

启用后，Chrome 才允许 MCP Server 发起远程调试连接请求。
当 chrome-devtools-mcp 请求接入当前浏览器时，Chrome 会弹出权限确认。

第二步：给 Codex 添加 Chrome DevTools MCP

在终端执行：

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

如果执行成功，你会看到类似输出：

Added global MCP server 'chrome-devtools'.

这表示：

MCP 配置已经写入 Codex 的全局配置

之后的新会话可以加载这个 MCP Server

这条命令做了什么

codex mcp add chrome-devtools
向 Codex 注册一个名为 chrome-devtools 的 MCP Server

npx -y chrome-devtools-mcp@latest
通过 npx 运行官方 MCP Server

--autoConnect
让它自动连接当前打开的 Chrome 会话

第三步：重启 Codex

这一步很重要。

即使 codex mcp add 已经成功，当前已打开的旧对话通常不会自动获得新 MCP 工具。
最稳妥的做法是：

重启 Codex 桌面应用

或至少新开一个会话

如果不做这一步，可能会出现：

配置已成功

但当前对话里依然看不到 Chrome DevTools MCP 工具

第四步：验证是否连接成功

方法 1：查看 MCP 列表

可以先在终端确认：

codex mcp list

如果能看到 chrome-devtools，说明 Codex 配置层已就绪。

方法 2：在新对话里测试浏览器能力

可以直接对 Codex 说：

检查一下你现在能不能看到 Chrome DevTools MCP

如果接通成功，Codex 应该能列出当前 Chrome 的标签页，例如：

http://localhost:3003/model-test

http://localhost:3003/experience/image

chrome://inspect/#remote-debugging

这说明它已经能读到当前 Chrome 会话。

当前推荐的实际使用方式

对于前端开发，当前最实用的使用方式是：

手动打开目标页面

在浏览器里复现问题

让 Codex 直接读取当前页面的 Console 和 Network

再结合代码定位问题

例如：

后续以 http://localhost:3003/experience/image 为主

然后继续让 Codex 做：

切到指定页面

查看 Console

查看最近的 Network

打开某条失败请求的请求体和响应体

分析代码与请求之间的对应关系

这类  工作流              比“截图 + 口述 + 粘贴报错”效率高很多。

不需要安装 Chrome 插件

一个常见误解是：
“要让 AI 和浏览器联动，是否必须先装一个 Chrome 扩展？”

对于这套方案，答案是：

不需要。

当前使用的是：

官方 chrome-devtools-mcp

官方支持的 --autoConnect 模式

直接连接当前浏览器会话

所以它的主路径不是“装插件”，而是：

Chrome 开启远程调试入口

Codex 配置官方 MCP

新会话里直接使用

日常使用建议

1. 明确指定主调试页面

例如：

http://localhost:3003/experience/image 后续暂时以这个为主

这样 Codex 可以持续围绕同一个页面看请求和错误，不会在多个标签页之间来回切。

2. 先让页面进入问题现场

先手动完成这些步骤再让 Codex 看，效率最高：

登录

进入目标页面

选择模型或填写表单

点击按钮触发问题

然后让 Codex 读取：

最近的 Network

最近的 Console

失败请求详情

3. 对“现有浏览器会话”保持警惕

因为 --autoConnect 会接入你当前真实使用中的浏览器，所以：

当前登录态会被复用

当前标签页内容可被读取

浏览器中敏感信息也可能暴露给 MCP 客户端

所以不要在启用连接期间打开你不希望被读取的敏感页面。

典型故障排查

问题 1：codex mcp add 成功了，但对话里还是不能用

原因通常是：

当前会话是旧会话

MCP 没有被当前对话重新加载

解决方式：

重启 Codex

新开一个对话再试

问题 2：看不到当前浏览器页面

优先检查：

Chrome 是否已打开

是否访问过 chrome://inspect/#remote-debugging

是否完成了远程调试启用

Chrome 是否弹出了远程调试授权弹窗但未确认

问题 3：想连当前浏览器，但 --autoConnect 不工作

可以退回传统方案：

codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest --browser-url=http://127.0.0.1:9222

但这时要自己先启动带远程调试端口的 Chrome。
这不是本文主推路线，只是兜底方案。

推荐命令清单

添加 Chrome DevTools MCP

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

查看 MCP 列表

codex mcp list

查看 Node 版本

node -v

打开 Chrome 远程调试入口

chrome://inspect/#remote-debugging

一套适合前端开发的最小工作流

1. 打开 Chrome 并启用 remote debugging 2. 用 codex mcp add 配置 chrome-devtools 3. 重启 Codex 4. 新开会话 5. 打开目标页面并复现问题 6. 让 Codex 读取 console / network / snapshot 7. 结合代码和请求一起定位问题

结论

如果你的目标是：

让 Codex 直接看当前浏览器里的运行时问题

复用你现有的登录态和页面状态

不想额外装插件

不想单独再起一个调试浏览器

那么当前最推荐的方案就是：

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

这是目前最适合日常前端调试的使用方式。