Chrome DevTools MCP 教程（2026年8月更新）：安装配置与调试实战
Chrome DevTools MCP 2026 年 8 月更新教程：最新稳定版 v1.7.0 的新功能、Claude Code/Cursor/VS Code/Codex 四种安装方式、auto-connect 接管已登录浏览器、WebStorm 内置与 WebMCP 源试用，以及从控制台报错到修复的调试工作流。
先说结论
Chrome DevTools MCP（Chrome 官方维护、让 AI 编程助手直接控制浏览器的 MCP 服务器）最新稳定版 v1.7.0，8 月 10 日发布，安装一行：npx -y chrome-devtools-mcp@latest。这是 5 月版基础教程的 8 月更新。
一、8 月版本变化
MCP（Model Context Protocol，模型上下文协议）让 AI 连接外部工具。7-8 月官方发了三个版本：
- v1.5.0（7/3）内存快照聚合过滤；
- v1.6.0（7/14）Lighthouse 13.4.0、--allow-unrestricted-paths；
- v1.7.0（8/10）get_heapsnapshot_object_details、native context 过滤、localhost 检查；telemetry 默认开，可 --no-usage-statistics 关（来源：官方 Releases）。
二、客户端配置
- Claude Code：
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest；要官方 skills 用/plugin marketplace add ChromeDevTools/chrome-devtools-mcp+/plugin install chrome-devtools-mcp@chrome-devtools-plugins。 - Cursor：Settings → MCP → New MCP Server，填官方 README 的 npx 配置。
- VS Code：命令面板 Chat: Install Plugin From Source，粘贴仓库名即可。
- Codex CLI：
codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest；Windows 11 用 cmd /c 包装，startup_timeout_ms 调到 20000。
三、接管已登录浏览器
Chrome 144+ 在 chrome://inspect/#remote-debugging 开远程调试，配置加 --autoConnect 即可操作带登录态的浏览器；沙箱用 --browser-url=http://127.0.0.1:9222。用完记得关调试端口。
四、8 月新动向
- WebStorm 2026.2.1 内置 Chrome DevTools Connect，IDE 里 AI agent 直接读控制台、看网络请求、截图、操作页面（官方博客）。
- WebMCP 进 Chrome 149 源试用，已带 execute_webmcp_tool / list_webmcp_tools（官方公告）；试验期 API 会变。
五、从报错到修复
把问题丢给 AI：「查 http://localhost:3000 登录页，点提交没反应，看控制台、network、按钮 DOM 事件，给方案。」AI 用 list_console_messages、list_network_requests、take_snapshot 自查，改完刷新再点，控制台干净才算好。装完先让它列标签页、跑一次性能 trace。
❓ 常见问题
最新稳定版是 v1.7.0，2026 年 8 月 10 日发布，npm 上 chrome-devtools-mcp@latest 就是它。主要变化是新增堆快照对象详情工具、快照对象按 native context 过滤和 localhost 检查工具，另外默认收集使用统计，可用 --no-usage-statistics 关闭。
两种方式：CLI 一条命令 claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest；或者 /plugin marketplace add ChromeDevTools/chrome-devtools-mcp 之后 /plugin install chrome-devtools-mcp@chrome-devtools-plugins，重启后生效。
用 Chrome 144 以上版本，先打开 chrome://inspect/#remote-debugging 开启远程调试，再在 MCP 配置里加 --autoConnect 参数，重启客户端后 AI 就能操作带登录态的当前浏览器会话。
Chrome DevTools MCP 是 Chrome 官方项目，适合调试控制台、网络、性能、内存和扩展，只支持 Chrome；Playwright MCP 适合 E2E 测试和跨浏览器场景。选型对比可以看站内的浏览器 MCP 实战教程。
先确认客户端支持 MCP 且配置 JSON 没写错；npx 缓存问题可以加 -y 强制用最新包；Windows 上启动超时就把 startup_timeout_ms 调到 20000，必要时用 cmd /c 包装 npx 命令。