最近在搭建AI自动化调试环境时，发现许多用户在接入`chrome-devtools-mcp`这一步频频受阻，尤其是Windows用户。最常见的问题就是那个经典报错： ``` codex : 无法将“codex”项识别为 cmdlet ``` 起初以为是npm包本身存在缺陷，但经过全方位排查后，核心原因其实只有两个：要么Codex CLI没有安装，要么系统PATH路径配置有误，再或者Node环境不完整。本文将从Node环境检查、Codex CLI安装、Windows PATH配置、MCP服务接入、Chrome DevTools MCP配置，以及常见报错解决等环节，完整梳理一遍`Codex`接入`chrome-devtools-mcp`的实操流程。整套方案经过实测验证，可稳定运行。 ### 一、chrome-devtools-mcp 是什么 `chrome-devtools-mcp`本质上是一个基于MCP（Model Context Protocol）协议的服务，它能让AI像人类一样操控浏览器：获取页面DOM结构、调试网页、分析Network请求、自动执行DevTools中的各类操作。一句话总结就是：**AI + Chrome DevTools 自动化**。 目前，Codex、Claude、Cursor、Cline、RooCode等主流AI工具均已支持MCP协议。这意味着AI不再仅是“聊天机器人”，而是真正能够调用工具完成实际任务的Agent。 ### 二、先安装 Node.js MCP服务普遍依赖Node.js，因此第一步需要确认运行环境是否完备。 在终端或PowerShell中依次执行以下命令： ```bash node -v npm -v npx -v ``` 正常情况下应输出类似「v22.x.x」「10.x.x」「10.x.x」的版本信息。如果提示命令不存在，请前往Node.js官网（https://nodejs.org）下载LTS版本并安装，安装完成后重新打开PowerShell。 ### 三、安装 Codex CLI 很多人直接执行`codex mcp add chrome-devtools`就报错，原因是Codex CLI根本没有安装。正确的做法是先通过npm全局安装： ```bash npm install -g @openai/codex ``` 安装完成后验证一下： ```bash codex --version ``` 输出版本号（例如0.x.x）即表示安装成功。 ### 四、Windows 环境变量配置 这是Windows用户最容易出错的地方。npm全局命令默认安装在： ``` C:\Users\你的用户名\AppData\Roaming\npm ``` 假设你的用户名是ming，则路径为： ``` C:\Users\ming\AppData\Roaming\npm ``` **检查PATH：** 在PowerShell中执行`$env:Path`，查看上述路径是否已包含在内。如果没有，需要手动添加： 打开「系统设置 → 高级系统设置 → 环境变量 → 用户变量 → 双击Path → 新增」，将npm路径粘贴进去。添加完成后重启PowerShell，再次尝试`codex --version`。 ### 五、安装 Chrome DevTools MCP 直接运行以下命令： ```bash npx chrome-devtools-mcp@latest ``` 首次运行会自动下载依赖，正常情况下会看到： ``` Chrome DevTools MCP Server running... ``` 表明服务已成功启动。 ### 六、Codex 接入 chrome-devtools-mcp 服务启动后，执行这条命令： ```bash codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ``` 执行成功后，Codex会自动注册MCP服务。你可以使用`codex mcp list`查看列表，若出现`chrome-devtools`条目，即表示接入完成。 ### 七、实际效果 接入后，AI能够执行哪些操作？这里列举几个典型场景： - **读取网页DOM**：直接解析当前页面的结构。 - **获取Network请求**：查看接口请求的详细信息。 - **自动调试前端页面**：包括CSS问题、控制台报错、Vue页面异常、接口请求失败等。 - **自动操作浏览器**：例如点击按钮、输入内容、切换页面。 ### 八、Vue项目调试体验 以一个Vue2项目为例进行测试，AI可以直接查看ElementUI的DOM结构、分析axios请求、监控Vue组件渲染状态、获取Console Error信息。对于前端开发而言，这种“AI自动调试”的能力带来显著效率提升，尤其适合需要反复排查前端问题的场景。 ### 九、常见报错解决 **1. codex不是内部命令** 报错：`codex : 无法将“codex”项识别为 cmdlet` 解决方法：先执行`npm install -g @openai/codex`，然后正确配置PATH。 **2. npx找不到命令** 说明Node.js未正确安装，重新安装Node.js即可。 **3. MCP启动失败** 单独运行`npx chrome-devtools-mcp@latest`查看详细错误信息。 **4. 端口占用** 关闭已存在的Chrome DevTools MCP进程，或重启终端。 ### 十、推荐配置 当前实测运行稳定的配置如下： - Node.js：v22 LTS - npm：10+ - Codex CLI：最新版 - chrome-devtools-mcp：latest - 系统：Windows 11 ### 十一、MCP 的未来趋势 目前众多AI IDE正在全面转向MCP，原因显而易见：传统AI只能进行对话，而MCP让AI能够真正操作工具——浏览器、数据库、文件系统、Git、DevTools、本地代码等。本质上，我们已经迈入**Agent时代**。 ### 十二、完整命令汇总 **安装 Codex** ```bash npm install -g @openai/codex ``` **检查版本** ```bash codex --version ``` **安装 Chrome DevTools MCP** ```bash npx chrome-devtools-mcp@latest ``` **添加 MCP** ```bash codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest ``` **查看 MCP 列表** ```bash codex mcp list ``` ### 总结 回顾整套流程，最关键的问题其实只有两个：Codex CLI未安装，或Windows PATH未正确配置。这两步搞定之后，Codex + Chrome DevTools MCP基本就能正常运行。对于前端开发者而言，未来的AI不仅能帮你写代码，更能真正自动调试浏览器——这一变化，意义深远。