/ 目录 / 演练场 / Chrome DevTools
← 全部服务器 ↗ GitHub
● 官方 ChromeDevTools ⚡ 即开即用

Chrome DevTools

作者 ChromeDevTools · ChromeDevTools/chrome-devtools-mcp

让 Claude 拥有和你的 DevTools 一样的视角 — 性能追踪、网络请求、控制台、实时 DOM。官方工具，由 Chrome 团队维护。

官方的 Chrome DevTools MCP。底层驱动真实的 Chromium 浏览器，暴露导航、DOM 检查、网络录制、控制台读取、性能追踪和 JavaScript 求值功能。让 Agent 可以调试网页，验证刚刚构建的内容。

▶ 观看演示 📦 安装 💡 使用场景

为什么要用

核心特性

实时演示

实际使用效果

chrome-devtools.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标，然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "chrome-devtools",
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp"
      ]
    }
  ]
}

Continue 使用服务器对象数组，而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "chrome-devtools": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "chrome-devtools-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp

一行命令搞定。用 claude mcp list 验证，claude mcp remove 卸载。

使用场景

实战用法： Chrome DevTools

用 Lighthouse 风格的追踪诊断页面为什么慢

👤 前端和性能工程师 ⏱ ~20 min intermediate

何时使用： 页面感觉反应迟缓，你想让 Claude 运行追踪并指出真正的瓶颈，而不是凭感觉猜测。

前置条件
  • 目标 URL 可以不登录加载（或者你提前处理好身份验证） — 用 navigate_page 加上 URL；如果页面需要身份验证，先用 chrome-devtools 的点击/输入工具登录
步骤
  1. 运行性能追踪
    打开 https://example.com/product/123。运行性能追踪，CPU 节流 4 倍，使用 slow-3G 网络配置。告诉我 LCP、CLS 和 TBT 的数据。✓ 已复制
    → 三个指标数据加上追踪总结
  2. 找出最主要的元凶
    哪个单一资源或脚本对 LCP 延迟贡献最大？显示请求耗时。✓ 已复制
    → 确定具体的 URL，带有耗时分解（DNS/connect/TTFB/download）
  3. 提出具体的修复方案
    最便宜的修复方案是什么，能把 LCP 控制在 2.5 秒以内？提出一个改进方案（preconnect、preload、defer、lazy 或 bundle-split），并指出具体要添加的代码行。✓ 已复制
    → 可执行的 HTML/JS diff，不是通用列表

结果： 一个有明确原因的性能回归和具体的修复方案，应用修复后可以通过重新运行追踪来验证。

注意事项
  • 追踪每次运行都不一样 — 一次性的数据会误导 — 运行追踪 3 次，取中位数后再下结论
  • 本地/开发版本和生产版本不同 — 针对生产 URL 或 CDN 预览版进行追踪，不要针对没有压缩的 localhost
搭配使用： filesystem · github

验证 Claude 刚编写的功能在浏览器中确实能正常工作

👤 闭环验证 Agent 输出的 AI 辅助开发者 ⏱ ~10 min beginner

何时使用： Claude 刚修改了一些前端代码。在说'完成'之前，你想让它打开页面、点击按钮，确认一切正常。

前置条件
  • 开发服务器在运行 — 在另一个终端运行 npm run dev；记下 URL
步骤
  1. 打开功能并获取截图
    打开 http://localhost:3000/new-feature。获取截图。描述你看到了什么 — 是否符合意图？✓ 已复制
    → 截图加上诚实的描述（可能会指出'按钮被渲染在屏幕外'）
  2. 执行交互操作
    点击'Submit'按钮，提交测试数据：{email: '[email protected]'}。捕获发出的网络请求和响应。✓ 已复制
    → 网络条目显示 200 响应，负载匹配
  3. 检查控制台是否有错误
    这个过程中有任何控制台错误或警告吗？包括 React hydration 警告或缺少 key 的警告。✓ 已复制
    → 干净的控制台，或者针对发现的任何警告的具体修复

结果： 一个自我测试过的功能，带有截图和网络追踪作为证据。消除'AI 写的代码实际上不工作'的困境。

注意事项
  • 截图看起来没问题，但交互被破坏了 — 总是执行用户流程（点击/输入），不要只是视觉检查
  • HMR 和 Claude 的截图有竞速问题 — 导航后，等待 networkidle 再进行任何断言
搭配使用： filesystem · github

调试前端 API 调用失败的原因

👤 追踪'在本地不会出现'的 4xx/5xx 错误的全栈开发者 ⏱ ~15 min intermediate

何时使用： 浏览器控制台显示 fetch 失败，你不相信自己的记忆关于发送的请求头/请求体。

步骤
  1. 触发失败的调用
    打开页面，执行导致失败的动作。捕获失败请求的完整 URL、方法、请求头和请求体。✓ 已复制
    → 准确的请求负载可见 — 无需猜测
  2. 与预期进行比较
    后端期望请求头 X-Client-Id 和包含 user_id 字段的 JSON 体。实际发送的是什么？进行对比。✓ 已复制
    → 确定了具体的缺失或错误的字段
  3. 修复并重新验证
    修复源代码使请求匹配。然后重新加载页面，确认调用现在返回 200。✓ 已复制
    → 最终网络条目显示 200，不是原始错误

结果： 一个修复后的 API 调用，带有网络选项卡的证明 — 不再有'在我的机器上可以工作'的说法。

注意事项
  • 会话 cookie 或 CORS preflight 掩盖了真实的请求 — 不要只看失败的请求 — 检查 preflight OPTIONS 和 Set-Cookie 历史
搭配使用： filesystem · postgres

在 CSS 重构后发现视觉回归

👤 进行设计系统迁移的前端开发者 ⏱ ~20 min intermediate

何时使用： 你重构了 CSS/token。你想在合并前抓住'哦天哪按钮现在是粉红色的'这类问题。

步骤
  1. 快照 main 分支上的关键页面
    在 http://localhost:3000（main 分支）上，对 /、/pricing、/dashboard 进行截图。保存到 /tmp/visual/main/。✓ 已复制
    → 3 张截图已保存
  2. 快照你的分支上的相同页面
    切换到 'css-refactor' 分支并重启开发服务器。对相同的 3 个页面截图到 /tmp/visual/branch/。✓ 已复制
    → 3 张路径匹配的截图已保存
  3. 对比并描述
    对每对进行视觉对比，描述任何变化。忽略像素级反锯齿；标记设计师会注意到的任何东西。✓ 已复制
    → 逐页的对比总结，不要说'看起来一样'

结果： 一个可供审查的对比，捕获意外的视觉变化。

注意事项
  • 动态内容（日期、随机问候）在截图间变化 — 模拟时间和冻结随机数生成器，或者将这些区域裁剪掉
搭配使用： filesystem · github

组合

与其他 MCP 搭配，撬动十倍杠杆

chrome-devtools + filesystem

编辑源码 → 重新加载页面 → 验证，形成紧密循环

打开 localhost:3000/checkout。表单的提交按钮颜色不对。在 src/ 中找到相关 CSS 并修复它，然后重新加载并获取截图来确认。✓ 已复制
chrome-devtools + github

从问题中复现 bug，验证修复，带着截图打开 PR

Issue #482 报告了 /pricing 在 375px 宽度时的布局 bug。用 chrome-devtools 复现它（在 375px 宽度下获取截图），修复 CSS，打开包含前后对比截图的 PR。✓ 已复制
chrome-devtools + sentry

在你的本地浏览器中复现在 Sentry 中找到的真实用户错误

对于 Sentry issue WEB-3a91，面包屑显示用户导航到 /cart 然后点击'Checkout'。在 chrome-devtools 中重放该过程，并捕获实际破损的情况。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
navigate_page url: str, wait_for?: 'load'|'networkidle' 启动任何页面交互 free
take_screenshot fullPage?: bool, selector?: str 导航或交互后的视觉确认 free
take_snapshot none 以文本形式的结构化页面内容 — 比截图更便于 Claude 推理 free
click selector: str | uid: str 通过 CSS 选择器或快照 UID 点击元素 free
fill selector: str, value: str 向输入框输入内容 free
evaluate_script script: str 在页面上下文中运行任意 JavaScript 进行检查 free
list_console_messages none 读取页面中的控制台日志和错误 free
list_network_requests filter?: str 检查发生的所有 XHR/fetch free
get_network_request requestId: str 获取一个请求的完整请求头和请求体 free
performance_start_trace reload?: bool, cpu_throttle?: number, network?: 'slow3g'|'fast3g' 开始性能录制 free
performance_stop_trace none 停止并分析正在运行的性能追踪 free
emulate_cpu rate: number 模拟慢速设备（4x = 中档手机） free
emulate_network profile: 'slow3g'|'fast3g'|'offline' 在受限网络下进行测试 free
new_page / close_page / select_page various 管理多个选项卡 free

成本与限制

运行它的成本

API 配额
无 — 在本地浏览器中运行
每次调用 Token 数
快照和网络转储可能很大（5-30k token）；take_snapshot 通常比完整截图加 DOM 转储更节省 token
费用
免费
提示
优先使用 take_snapshot 而不是 take_screenshot，让 Claude 进行结构推理 — 快照更紧凑且基于文本。保存截图用于人工审查。

安全

权限、密钥、影响范围

凭据存储： 在 MCP 层没有凭据存储；如果你在会话中登录了某个网站，cookie 会保存在 Chromium 配置文件中直到你关闭它
数据出站： Chromium 代表你浏览开放网络 — 目标网站接收你的 IP。除了 Chromium 默认发送的内容外，不向 Google 发送遥测数据。
切勿授予： 不要指向包含保存的登录信息/密码的真实浏览器配置文件

故障排查

常见错误与修复

Chromium 无法启动 — Linux 上缺少依赖

安装缺失的系统库：sudo apt-get install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libxkbcommon0 libasound2。MCP 包含 Chromium 但不包括所有运行时依赖。

验证： 运行 `npx chrome-devtools-mcp --version` — 错误会显示缺失的库名称
navigate_page 在慢速页面上超时

传递 wait_for: 'load' 而不是默认的 networkidle；或在客户端的 MCP 配置中增加超时时间。

click 失败：找不到元素

选择器已失效或被隐藏。先重新调用 take_snapshot，然后使用快照中的新 UID。

性能追踪为空

你需要在追踪期间重新加载页面（reload: true）或与之交互 — 空闲的选项卡不会产生时间线。

替代方案

Chrome DevTools 对比其他方案

替代方案何时用它替代权衡
Playwright MCP你需要跨浏览器测试（Firefox、WebKit）或更喜欢 Playwright 的 API 表面能力相当；chrome-devtools 有更深的性能追踪，playwright 有更广泛的自动化
Puppeteer MCP你想要更底层的 Puppeteer API仅 Chrome，与 chrome-devtools MCP 重叠很大
browser-tools MCP你想通过 DevTools Protocol 扩展连接到你现有的 Chrome没有新的沙箱 — 使用你真实的浏览器会话，包括它的登录状态

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills