工具连接（MCP）
Chrome DevTools MCP
让 AI 查看 Chrome 中的网页问题，帮助查错误和分析加载速度。
内容介绍
少装一点整理 · 依据项目公开文档
网页报错、显示异常或加载慢时，这个工具把 Chrome 的开发者检查能力提供给 AI。开发者可以让它检查页面信息、查看浏览器中的问题，并辅助分析性能。使用前需要准备 Chrome 和支持 MCP 的 AI 助手；它提供排查线索，不代表一次检查就能证明整个网站没有问题。
开始使用
先核对使用条件，再选择你的 AI 助手查看接入步骤。
- 需要准备
- Node.js 长期支持版和 npm。
- 官方支持的 Chrome 或 Chrome for Testing 浏览器。
- 费用说明
- 项目代码开源；AI 助手的使用费用与第三方服务额度另计。
- 需要的权限
- 可查看和操作浏览器内容；默认启用使用统计，性能工具也可能发送页面地址获取 CrUX 数据。官方 README 提供关闭方法。
Codex有官方接入说明
项目的客户端指南包含 Codex 的配置方法。
接入步骤
- 确认电脑上已有 Node.js 长期支持版、npm 和 Chrome。
- 打开客户端指南的 Codex 小节，按说明添加 MCP。
- 重新打开助手；首次调用浏览器工具时才会启动 Chrome。
怎样确认接入有效
检查一个公开页面的控制台错误，让它说明实际找到的错误或没有找到。
官方依据
Claude Code有官方接入说明
项目的客户端指南包含 Claude Code 的配置方法。
接入步骤
- 确认电脑上已有 Node.js 长期支持版、npm 和 Chrome。
- 打开客户端指南的 Claude Code 小节，按说明添加 MCP。
- 重新打开助手；首次调用浏览器工具时才会启动 Chrome。
怎样确认接入有效
检查一个公开页面的控制台错误，让它说明实际找到的错误或没有找到。
官方依据
Cursor有官方接入说明
项目的客户端指南包含 Cursor 的配置方法。
接入步骤
- 确认电脑上已有 Node.js 长期支持版、npm 和 Chrome。
- 打开客户端指南的 Cursor 小节，按说明添加 MCP。
- 重新打开助手；首次调用浏览器工具时才会启动 Chrome。
怎样确认接入有效
检查一个公开页面的控制台错误，让它说明实际找到的错误或没有找到。
官方依据
官方依据
接入说明核对于 2026-10-12 · 依据公开文档整理，未逐一安装实测。
可以怎么用
- 检查网页内容与浏览器问题
- 辅助分析页面加载和性能
- 先准备 Chrome，再按文档连接 AI 助手
官方项目与文档
项目说明译文
面向编程助手的 Chrome DevTools
用途相近的插件
优先匹配当前插件的主要用途，再参考共同用途和收藏数；接入方法可能不同。
- Playwright MCP — 让 AI 打开网页、点击按钮和填写表单，帮助检查网站流程。
- BrowserTools MCP — 把当前 Chrome 页面的错误、网络请求和截图交给 AI 排查。
- ExecuteAutomation Playwright MCP — ExecuteAutomation Playwright MCP：让支持 MCP 的 AI 助手操作浏览器中的网页。