Chrome DevTools MCP 完整指南3 步让 AI 助手控制真实 Chrome 浏览器【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpChrome DevTools MCP 是一个 MCP 服务器让你的 AI 编程助手如 Claude、Cursor、Copilot控制并检查真实运行的 Chrome 浏览器完成自动化操作、调试与性能分析。场景AI 改完代码后谁来确认页面真的修好了你让 AI 助手修一个点击按钮没反应的 bug。它很快改完了代码。但谁来验证修复有效助手只能读代码。它看不见页面有没有报错不知道网络请求是否返回 404也不知道慢在哪。于是你成了人肉浏览器手动打开页面逐项检查再把结果贴回对话框。这一步往往比写代码还耗时。Chrome DevTools MCP 就是为补上这个缺口而生。它给助手配了一台真实浏览器外加一整套 DevTools 仪表盘。项目定位它是什么和同类工具差在哪结论它是官方出品、能力完整的浏览器 MCP 服务器不是简单的截图工具。它基于 Puppeteer 和 Chrome DevTools 前端以标准 MCP 服务器的形式运行。MCP模型上下文协议可以理解为 AI 客户端插拔外部能力的统一接口。装上它AI 助手等于坐到了浏览器旁边手里拿着你平时调试用的那套 DevTools。适合谁凡是项目要和浏览器打交道的开发者前端排错、性能优化、表单自动化、端到端验证。和多数浏览器类 MCP 的区别在三处多数工具只能打开页面、点击、截图。它默认暴露 30 多个 DevTools 能力性能追踪、网络分析、控制台、堆快照、Lighthouse 审计。每个操作都会自动等待执行结果脚本不会跑在页面渲染前面。官方给出了 20 多种客户端的配置方法Claude Code、Cursor、Copilot、Gemini CLI、VS Code、Windsurf 等复制即用。一键安装步骤最小可复制的 MCP 配置前提Node.js LTS、npm以及最新稳定版 Chrome。在任意 MCP 客户端的配置文件中加入下面这一段即可覆盖所有客户端{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }两个细节latest保证始终使用最新服务器版本。浏览器不会立刻启动首次调用需要浏览器的工具时才会拉起。快速验证一条提示确认配置生效在客户端对话框输入这句官方测试提示词Check the performance of https://developers.chrome.com配置正确时助手会自动打开 Chrome录制一段性能追踪并返回优化报告。如果没反应先在终端执行npx chrome-devtools-mcplatest --help确认服务器能否独立运行常见报错对照 故障排查。核心能力拆解它具体能帮你做成什么性能分析把页面慢变成可执行的清单你说一句检查首页的性能。它记录完整性能追踪提取出洞察哪个资源阻塞了渲染、LCP 花在哪里、该先改什么。它还能拉取该页面的真实用户数据CrUX把实验室数据和线上数据摆在一起看。浏览器调试控制台、网络、截图都交给 AI助手可以查看控制台拿到经源码映射还原的堆栈不再对着一行压缩代码发呆。它可以列出并逐个检查网络请求可以截图也可以给页面拍一张快照来定位具体元素。可靠自动化点击、填表、上传、按键输入自动化组包含click、fill、press_key、upload_file等 10 个工具。由 Puppeteer 驱动每步操作都会等结果落定再继续避免元素还没出现就点击的竞态。内存与审计查漏、查低分加上--memoryDebugging它能拍摄并对比堆快照帮你定位内存泄漏。调用一次lighthouse_audit直接拿到 Lighthouse 评分和逐项问题。全部 57 个工具的分类清单见 工具参考。进阶玩法Slim 模式、连接已有 Chrome 与 CLI按需取用四招Slim 模式args 里加--slim --headless。只保留导航、执行脚本、截图 3 个工具。适合只想开页面看结果的场景也能给 AI 省上下文。详见 Slim 工具参考。连接已运行的 Chrome用--browserUrlhttp://127.0.0.1:9222连到你自己带调试端口启动的浏览器Chrome 144 可用--autoConnect直接连当前实例。适合要保留登录态、或 AI 跑在沙箱里无法自启浏览器的情况。无头与通道--headless无界面运行--channel可选 canary、dev、beta、stable 四个版本通道。CLI 模式全局安装后终端里直接运行chrome-devtools调用navigate_page、take_screenshot等工具。后台实例会保持状态跨命令复用。详见 官方 CLI 说明。多子代理共用一个服务器时再加--experimentalPageIdRouting和--isolated让每个代理操作自己的标签页和独立临时配置互不串台。常见坑与注意事项兼容、隐私、远程调试安全动手前先记住这五条。浏览器兼容性官方只支持 Google Chrome 和 Chrome for Testing。其他 Chromium 系浏览器可能能跑但行为不保证。隐私边界MCP 客户端能读到并修改浏览器里的所有内容。别让它访问含敏感账号的站点拿不准时用--isolated起一个用完即弃的临时配置。远程调试端口--remote-debugging-port打开的端口允许本机任意程序控制该浏览器。开着它时不要浏览敏感网站并务必用--user-data-dir指向独立配置目录Chrome 对此有硬性要求。数据上报使用统计默认开启可用--no-usage-statistics关闭性能工具默认向 CrUX API 请求线上真实数据可用--no-performance-crux关闭。两个高频报错ERR_MODULE_NOT_FOUND多为 Node 版本不符或 npm 缓存损坏清掉 npx 缓存后重装。Target closed浏览器没启动成功关掉其他 Chrome 实例再试。更多情况见 故障排查。立即开始3 分钟拿到第一份报告把上面那段配置贴进你的 MCP 客户端保存。然后输入检查首页的性能等助手打开浏览器、录完追踪、交回报告。卡住的地方对照 故障排查想深挖能力看 工具参考 和 CLI 说明。现在就打开你的 MCP 配置文件——你的 AI 助手该配一台浏览器了。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考