—— 基于 Codex CLI 的浏览器运行态 AI 调试方案
本文重点记录 chrome-devtools-mcp 在 Windows 环境下的安装、配置与使用实践，
以及它如何与 Codex CLI 协作，构建一个具备真实浏览器运行态感知能力的 AI 工程调试环境。
一、为什么需要 chrome-devtools-mcp？
在前端工程实践中，很多问题仅靠代码是无法定位的，例如：
- 接口请求失败，但代码看不出问题
- Cookie / Token 在 WebView、iOS、登录跳转中丢失
- 某些逻辑只在真实浏览器运行态才会触发
- Console 报错、Network 行为与代码不一致
传统 AI 编程工具的局限在于：
- 只能“看代码”
- 无法感知真实浏览器的 Network / DOM / Console
chrome-devtools-mcp 的核心价值
chrome-devtools-mcp 通过 Chrome DevTools Protocol（CDP），让 AI Agent 能够：
- 启动并控制真实 Chrome
- 读取 Network 请求与响应
- 查看 Console 报错
- 分析 DOM 状态
- 结合运行态反向定位代码问题
这使 AI 从“代码分析器”，升级为 工程级调试助手。
具体流程
- 安装Codex CLI，大部分开发情况下大家可能使用 Vscode 中 Codex 插件多一点，但是 VsCode中Codex插件并不支持拓展安装mcp，所以先安装 codex cli
# Node 版本要求 >= 22
nvm install 22
nvm use 22.22.0
npm install -g @openai/codex
2. 然后登录Codex CLI
codex // 命令进入codex 对话
codex login // 授权登录
完成浏览器授权后，即可在终端中使用 Codex CLI。
- 安装 chrome-devtools-mcp
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest
打开codex配置文件，添加一下配置，因为我的 chrom 安装在了D盘 C:\Users\Administrator.codex\config.toml (全局安装默认路径)
该命令会将 `chrome-devtools-mcp` 注册为 Codex 可用的 MCP Server。
[mcp_servers.chrome-devtools]
command = "cmd"
args = [
"/c",
"npx",
"-y",
"chrome-devtools-mcp@latest"
]
env = {
SystemRoot = "C:\\Windows",
CHROME_PATH = "D:\\software\\chrome\\Google\\Chrome\\Application\\chrome.exe"
}
startup_timeout_ms = 30000
// 无需执行chrome.exe --remote-debugging-port=9222 他会自行启动
4. 接下来就大功告成，可以输入命令操控浏览器 比如在窗口输入打开百度
总结：当前阶段侧重 环境与方案搭建。，后续有在日常编码中调试使用上的体验在反馈。
