{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

如果用 Claude Code CLI，更是一行命令就能搞定安装：claude mcp add chrome-devtools npx chrome-devtools-mcp@latest，剩下的所有工作都由谷歌原生支持，不用自己折腾任何配置。

3. 优化 Token 消耗，更省钱高效

对于 AI agent 重度用户来说，Token 就是金钱，也是 AI 能否记住长对话内容的关键。

第三方 MCP 工具在传递信息时，需要额外的 “中间翻译” 步骤，会产生大量冗余信息，相当于 “话痨”，吃掉不少 Token。而 Chrome DevTools MCP 因为是原生对接，信息传递没有多余环节，废话更少、效率更高。

实测数据很有说服力：完成相同的 Web 任务，Playwright MCP 会消耗 26% 的上下文 Token（约 52k/200k），而 Chrome DevTools MCP 仅消耗 21%（约 43k/200k）。这 5% 的差距，在长对话中可能就是 AI 会不会 “提前失忆” 的关键，长期使用下来，能节省不少真金白银，也能提升 AI 协作的效率。

4. 功能强大，覆盖专业 Web 调试全场景

如果说第三方 MCP 工具的核心能力是 “模拟用户操作”（比如点鼠标、填表单），那 Chrome DevTools MCP 就是直接把 F12 开发者工具的全部能力交给了 AI，实现了从 “模拟操作” 到 “专业调试” 的维度升级，核心能力包括：

• 实时调试样式和布局问题：AI 可以连接到浏览器的实时页面，直接检查 dom 结构和 css 样式，针对元素溢出、字体错位、颜色不符等复杂布局问题，给出具体的修复方案，甚至能直接修改样式看到效果；
• 自动化性能审计：AI 可以启动 Chrome 的性能跟踪功能，记录页面加载、交互过程中的性能数据，然后分析这些数据，定位卡顿、加载缓慢等具体性能问题，还能给出优化建议；
• 分析控制台与网络问题：AI 可以读取浏览器控制台的所有日志，自动发现 JS 报错、警告信息；同时能分析所有网络请求，定位 api 接口 404、500 错误、请求超时、跨域等问题，不用开发者自己手动翻看网络面板。

应用场景

Chrome DevTools MCP 的实用场景非常广泛，无论是个人开发者高效排障，还是团队提升 Web 开发协作效率，都能发挥作用，核心场景包括：

1. 个人 Web 开发高效排障

平时开发网页时，不用再自己手动 F12 查错、看网络请求、测性能。可以直接让 AI 通过 Chrome DevTools MCP 帮你：

• 快速定位前端控制台的 JS 报错，甚至给出修复代码；
• 排查接口调用失败的原因（是参数错误、服务器问题还是跨域配置不当）；
• 分析页面加载缓慢的瓶颈（是资源过大、请求过多还是渲染阻塞）。

2. AI 协作完成 Web 相关任务

和 AI 助手协作时，能让任务完成得更精准、更全面，不用再手动辅助提供信息：

• 批量获取网站信息：比如让 AI 打开 B 站，搜索指定 UP 主，总结其最近一个月的视频链接；
• 模拟用户操作 + 结果验证：比如让 AI 完成电商网站的下单流程模拟，同时验证每一步是否有报错，流程是否通顺；
• 快速修改页面样式验证方案：比如在不改动项目源码的情况下，让 AI 临时修改目标网站的特定元素样式，验证设计方案的可行性。

3. 团队 Web 项目自动化调试与优化

在团队协作中，可以将 Chrome DevTools MCP 集成到自动化工作流中，提升团队效率：

• 对项目上线前的页面进行自动化性能审计，生成标准化的性能报告；
• 批量检查多页面的控制台错误和网络问题，避免手动测试的遗漏；
• 让新人开发者借助 AI+Chrome DevTools MCP 快速熟悉项目，减少对资深开发者的依赖。

4. AI 助手升级为专业 Web 开发助手

对于做 AI 工具开发的团队来说，Chrome DevTools MCP 可以为 AI 代理赋能，让 AI 从 “只会写代码” 升级为 “能理解、调试、优化 Web 应用” 的专业助手：

• 给 AI 加上 “浏览器感知” 能力，不再局限于纯文字理解，能基于真实页面数据做决策；
• 让 AI 完成更复杂的 Web 任务，比如从页面中提取结构化数据、优化页面加载性能、修复前端布局 bug 等。

快速上手

想要快速体验 Chrome DevTools MCP，只需要满足两个简单要求，再完成几步操作即可：

1. 前置要求

• 安装 Node.js 22.12.0 及以上版本；
• 安装 npm（一般随 Node.js 一起安装）；
• 验证方式：打开终端，输入node -v和npm -v，能正常显示版本号即满足要求。

2. 安装对接

• 核心步骤：将前文提到的 JSON 配置复制粘贴到你的 MCP 客户端中，保存即可完成对接；
• 若使用 Claude Code CLI：直接在终端输入claude mcp add chrome-devtools npx chrome-devtools-mcp@latest，一键完成安装。

3. 简单案例演示

• 案例 1：模拟用户行为 —— 让 AI 打开 B 站，搜索 “影视飓风”，总结其最近一个月的视频链接；
• 案例 2：诊断错误 —— 让 AI 查看 B 站前端控制台是否有报错，以及网络请求是否存在问题；
• 案例 3：调试样式 —— 让 AI 找到 “影视飓风” B 站主页，将账号名称的文字颜色修改为绿色，查看实时效果。

总结

Chrome DevTools MCP 看似只是一个工具升级，实则带来了 AI 协作处理 Web 任务的能力飞跃。它给 AI 赋予了 “视觉”（页面截图）和 “感知”（DevTools 专业调试数据），让 AI 解决 Web 问题的能力呈指数级增长。

通过它，AI 不再是一个单纯的代码编写者，而是能真正理解 Web 应用、排查各类 bug、优化页面性能的专业助手，无论是对于个人开发者提升效率，还是对于团队优化协作流程，都有着极高的实用价值。