Chrome DevTools MCP 是什么？
Chrome DevTools MCP 是把 Chrome 调试能力开放给编码助手的本地 MCP 服务器。它让 Codex 读取页面、控制台、网络请求和性能记录，用浏览器证据排查前端问题。
一句话理解把 Chrome DevTools 的页面、网络与性能诊断能力提供给编码助手。
为什么需要它？
让浏览器问题从截图猜测转为页面、网络和性能证据驱动的诊断。
接入前，AI 只能依赖你粘贴的材料、截图或旧上下文；接入后，它可以在你授权的范围内调用真实工具，并把结果、来源和状态带回当前任务。
核心能力
连接 Chrome 页面并读取调试信息
把真实信息带回当前任务，减少反复复制和手动核对。
检查网络、控制台和性能记录
在明确授权范围内调用工具，并保留执行过程和结果。
执行页面交互与截图辅助复现
回读来源、状态与限制，方便继续处理和人工验收。
适合谁？怎么用？
- 排查前端控制台、网络和性能问题
- 需要排查前端性能、网络请求、控制台异常和渲染行为的开发者。
- 能指出具体 URL、请求状态或错误堆栈，而不是只凭截图猜原因。
- 不适合连接含账号、Cookie、支付或客户数据的日常浏览器。
- 可读取页面、网络请求和浏览器调试数据
- 连接日常浏览器可能暴露 Cookie、表单和账号状态
怎么接入？
- 1准备
确认本机 Chrome、Node.js 与 npx 可用。
- 2授权
按官方 README 用
npx -y chrome-devtools-mcp@latest登记 stdio 服务。 - 3连接
使用独立调试配置并确认遥测选项。
- 4开始使用
连接无敏感登录态页面并读取控制台。
安装命令
添加 Chrome DevTools MCP
codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest在终端运行。先用无敏感登录态的测试页面验证，不要直接连接日常浏览器。
检查命令
确认 MCP 已经登记
codex mcp list不想自己操作终端时，把下面整段发给 Codex。它会先核对官方说明和前置条件，遇到凭证或占位符会停下来询问。
发给 Codex
自助接入 Chrome DevTools MCP
请帮我在当前电脑上接入并验证 Chrome DevTools MCP。
官方来源：https://github.com/ChromeDevTools/chrome-devtools-mcp
目标接入命令：codex mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest
请按以下步骤执行：
1. 先阅读官方 README，核对当前推荐接入方式与上述命令。如果官方说明已经变化，先告诉我差异，不要盲目执行旧命令。
2. 检查运行环境、登录状态、Token、项目 ID、允许访问路径等前置条件。不要在输出中显示任何凭证，也不要把凭证写入仓库。
3. 如果命令中有需要替换的占位符，先列出需要我提供的值并停下来，不要自行猜测。
4. 条件满足后执行接入命令，再运行 codex mcp list，确认 Chrome DevTools MCP 已登记，并回报实际服务名、传输方式和检查结果。
5. 用下面这个只读任务验证连接：请用 Chrome DevTools MCP 检查这个页面的控制台错误、失败请求和 LCP 线索，只读返回证据。
6. 不要创建、修改、删除、发送内容，也不要连接生产环境；需要写权限或更高权限时先征求我确认。- 复制完整指令，发给一个有终端和当前项目访问权限的 Codex 任务。
- Codex 会先核对官方来源和本机环境；遇到 Token、项目 ID、路径或其他占位符时，应停下来向你确认。
- 接入后运行
codex mcp list，再用 Chrome DevTools MCP 的只读首测任务回读结果。
第一次调用示例
登记完成后，新开一个任务，先用下面这句做只读验证，把目标、范围和停止条件一次说清楚。
发给 Codex
第一次只读任务
请用 Chrome DevTools MCP 检查这个页面的控制台错误、失败请求和 LCP 线索，只读返回证据。怎样算成功
能指出具体 URL、请求状态或错误堆栈，而不是只凭截图猜原因。
- 先检查页面、控制台和网络摘要。
- 定位具体请求或性能记录。
- 修复后重新加载并比较证据。
- 保存必要日志，不保存 Cookie 或敏感请求体。
权限与安全
凭证与连接方式
本地 stdio；使用独立调试配置，并单独确认遥测设置。
- 可读取页面、网络请求和浏览器调试数据
- 连接日常浏览器可能暴露 Cookie、表单和账号状态
- 使用统计默认状态应在团队隐私规则下单独确认
