Codex客户端接入Chrome DevTools MCP教程

SEO关键词：Codex接入MCP、chrome-devtools-mcp安装、OpenAI Codex教程、MCP配置教程、Chrome DevTools MCP使用、AI连接浏览器调试、Codex MCP配置、Node.js MCP教程

codex客户端下载:https://codexdown.cn/

前几天我在本地折腾 AI 自动化调试环境的时候，发现很多人都卡在了 chrome-devtools-mcp 的接入上。

尤其是 Windows 用户。

最常见的问题就是：

codex : 无法将“codex”项识别为 cmdlet

刚开始我还以为是 npm 包有问题，结果发现本质上是：

• 没安装 Codex CLI
• PATH 环境变量没配置
• Node 环境不完整

这篇文章我把整个 Codex + chrome-devtools-mcp 的完整接入流程整理一下，包括：

• Node 环境检查
• Codex CLI 安装
• Windows PATH 配置
• MCP 服务接入
• 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。

---

二、先安装 Node.js

MCP 基本都依赖 Node.js。

先检查环境：

node -v
npm -v
npx -v

正常应该输出：

v22.x.x
10.x.x
10.x.x

如果提示命令不存在：

先安装 Node.js：

https://nodejs.org

建议：

Node.js LTS版本

安装完成后重新打开 PowerShell。

---

三、安装 Codex CLI

很多人直接执行：

codex mcp add chrome-devtools

然后就报错：

codex : 无法将“codex”项识别为 cmdlet

原因是：

Codex CLI 没安装

执行：

npm install -g @openai/codex

安装完成后验证：

codex --version

如果输出版本号：

0.x.x

说明安装成功。

---

四、Windows环境变量配置

这是 Windows 最容易翻车的地方。

npm 全局命令默认路径：

C:\Users\你的用户名\AppData\Roaming\npm

例如：

C:\Users\ming\AppData\Roaming\npm

---

检查 PATH

PowerShell 执行：

$env:Path

查看是否包含：

C:\Users\ming\AppData\Roaming\npm

---

如果没有

打开：

系统设置
→ 高级系统设置
→ 环境变量
→ 用户变量 Path
→ 新增

添加：

C:\Users\ming\AppData\Roaming\npm

然后：

• 重启 PowerShell
• 再执行：

codex --version

---

五、安装 Chrome DevTools MCP

直接执行：

npx chrome-devtools-mcp@latest

首次运行会自动下载依赖。

正常情况下会看到：

Chrome DevTools MCP Server running...

说明服务已经启动。

---

六、Codex接入chrome-devtools-mcp

现在执行：

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

执行成功后：

Codex 就会自动注册 MCP 服务。

---

七、查看MCP列表

执行：

codex mcp list

正常会看到：

chrome-devtools

说明接入成功。

---

八、实际效果

接入成功后。

AI 可以直接：

1. 读取网页DOM

例如：

分析当前页面结构

---

2. 获取Network请求

例如：

查看接口请求

---

3. 自动调试前端页面

包括：

• CSS问题
• 控制台报错
• Vue页面异常
• 接口请求失败

---

4. 自动操作浏览器

例如：

点击按钮
输入内容
切换页面

---

九、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
系统	Windows11

稳定性还不错。

---

十二、MCP未来会越来越重要

现在很多 AI IDE 都在全面转向 MCP。

原因很简单：

传统 AI：

只能聊天

MCP 后：

AI可以真正操作工具

包括：

• 浏览器
• 数据库
• 文件系统
• Git
• DevTools
• 本地代码

本质上已经开始进入：

Agent时代

---

十三、完整命令汇总

安装 Codex

npm install -g @openai/codex

---

检查版本

codex --version

---

安装 Chrome DevTools MCP

npx chrome-devtools-mcp@latest

---

添加 MCP

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

---

查看 MCP 列表

codex mcp list

---

总结

这套流程里最核心的问题其实只有两个：

1. Codex CLI 没安装
2. Windows PATH 没配置

解决后：

Codex + Chrome DevTools MCP

基本就能正常运行。

对于前端开发来说。

以后 AI 不只是：

帮你写代码

而是真正开始：

自动调试浏览器

这一点变化其实非常大。