Chrome DevTools MCP 5 分钟上手让 AI 助手操控真实 Chrome 的完整指南【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpChrome DevTools MCP 是 Chrome 官方团队维护的开源工具让你的 AI 编程助手Cursor、Copilot、Claude Code 这类客户端直接操控和检查一个真实的 Chrome 浏览器。换句话说AI 帮你写页面时它能自己打开页面、点按钮、看控制台报错、测性能而不是靠猜。它以 MCP 服务器的形式分发——MCPModel Context Protocol是让 AI 助手连接外部工具的一套开放协议你可以理解成AI 的万能插头——所以配置一次20 多个主流客户端都能直接用。 为什么值得花十分钟试一下它的价值不在能截图而在三件平时 AI 做不到的事性能洞察基于浏览器自带的 DevTools 引擎录制性能 trace提取可执行的性能结论还能跑 Lighthouse 审计真调试分析网络请求、查看控制台报错带源码映射的堆栈、截图、截页面结构快照可靠的自动化底层用 Puppeteer 驱动 Chrome自动等待每个操作的结果AI 不用盲等几秒工具面覆盖 11 个分类共 57 个工具从点到按钮到对比内存快照都有。如果你只需要基础能力一个--slim参数就能把它裁到 3 个工具。 它是什么三层结构一次讲清你可以把它拆成三层来理解。最外层是你的 AI 客户端中间是 Chrome DevTools MCP 服务器一个通过npx拉起来跑的 Node 进程最里层是真实的 Chrome 实例。你的自然语言请求被 AI 翻译成工具调用比如点击导航截图发给服务器服务器驱动 Chrome 执行再把结果整理成 AI 能读懂的格式写回去。有两个小细节值得先知道。第一服务器连上并不会立刻启动浏览器而是等 AI 第一次调用需要页面的工具时才拉起 Chrome。第二它默认用一个独立的 Chrome 配置目录在~/.cache/chrome-devtools-mcp下和你日常浏览的配置文件互不干扰。官方只支持 Google Chrome 和 Chrome for Testing其他 Chromium 系浏览器可能能跑但不保证不出怪事。 三步装好 Chrome DevTools MCP前置要求很简单Node.js LTS 和最新版稳定版 Chrome。装好后打开你客户端的 MCP 配置加入下面这段{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }这一步说明两点latest保证每次都用最新版-y让 npx 自动接受安装确认不会卡在交互提示上。如果你只想干基础活在args里再追加--slim和--headless即可无头模式指不开窗口、后台静默运行。装完立刻验证在客户端里输入Check the performance of https://developers.chrome.com。它应该打开浏览器并录一段性能 trace然后给你一份报告。拿到报告就说明链路全通了。这里顺带提醒一句这个服务器会让 AI 看到你浏览器里的所有内容并允许它修改。所以第一次试的时候别登录任何敏感账号。 场景化玩法按你想干的事选工具别背工具清单按任务对号入座想让表单填好、按钮点掉输入类 10 个工具常用click、fill、press_key、upload_file想开多页、等加载完成导航类 6 个工具new_page、navigate_page、wait_for覆盖大部分情况页面坏了想知道为什么take_screenshot加take_snapshot看结构list_console_messages查报错list_network_requests看哪个请求挂了evaluate_script直接在页面上跑 JS想知道页面慢在哪performance_start_trace和performance_stop_trace录一段performance_analyze_insight出结论再补一个lighthouse_audit拿完整评分怀疑内存持续上涨内存类 13 个工具实验功能需加--memoryDebugging开启take_heapsnapshot拍快照compare_heapsnapshots做对比每个工具的完整参数在 docs/tool-reference.md 里都有。⚙️ 进阶连接你已经在用的浏览器默认情况下它会新开一个干净的 Chrome。但如果你已经登录了某个网站、想让 AI 复用你的登录态或者 AI 跑在沙箱里自己起不了浏览器就该反过来你先开好浏览器让服务器连过来。两条路。Chrome 144 及以上在浏览器里打开chrome://inspect/#remote-debugging允许远程调试然后给服务器配置加一个--autoConnect参数即可自动接上。老版本手动给 Chrome 开调试端口启动再在args里指定地址{ mcpServers: { chrome-devtools: { command: npx, args: [chrome-devtools-mcplatest, --browser-urlhttp://127.0.0.1:9222] } } }安全上必须说一句开着调试端口的浏览器本机任何程序都能接管它。用完记得关端口开着期间别碰敏感网站。另外如果同时跑多个 AI 会话建议加--isolated让每个会话各用一份临时配置避免互相串状态。⚠️ 新手最容易踩的几个坑连上了但浏览器没弹出来这是正常的。浏览器要等 AI 第一次用到页面工具才会启动不是服务器连上的标志报Target closed多半是 Chrome 没起来。关掉所有 Chrome 实例重试并确认装的是最新稳定版Windows 10 下 VS Code 报 Connection closed把配置里的command改成cmd参数用/c、npx、-y开头用 Edge 或 Brave 出现怪异行为官方只支持 Chrome其他内核浏览器属于自担风险数据相关使用统计默认开启加--no-usage-statistics可退出性能工具还会把 trace 的 URL 发给 Google CrUX API 拉真实用户数据介意就加--no-performance-crux卡住了先在终端跑npx chrome-devtools-mcplatest --help确认服务器本身能启动再翻 troubleshooting 文档 对号入座到这里你手上已经有一个能真正看见页面的 AI 助手了。先跑通默认的全量模式等发现 AI 的上下文被截图和 trace 占得太满再切到--slim或接上你自己的登录浏览器都不迟。下一步就做一件事按上面的配置装好把那句性能检查的原话发给它看它打开 Chrome 跑出一份报告。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考