3.2 Chrome DevTools：给前端调试用的浏览器

它是什么

ChromeDevTools/chrome-devtools-mcp，约 53957 star——这个数字比 Playwright MCP 还高，TypeScript，npm 包 chrome-devtools-mcp（实测版本 1.11.0），可执行名 chrome-devtools。

官方定位一句话：Chrome DevTools for coding agents（给编码 agent 用的 Chrome DevTools）。

它和 Playwright MCP 的分工

两者都驱动浏览器，但服务对象完全不同：

维度 Playwright MCP Chrome DevTools MCP
定位 浏览器自动化 前端调试
强项 稳定的多步流程、跨浏览器 控制台、网络、性能、DOM 检查
典型任务 填表、抓数、回归 定位报错、看请求、分析性能
内核 Chromium / Firefox / WebKit Chrome
star 数 约 38.5k 约 54k

选型一句话：要“操作页面”用 Playwright，要“看清页面”用 Chrome DevTools。

它通常暴露什么

从“Chrome DevTools for coding agents”的定位推断，这类服务器一般把 DevTools 面板的能力暴露成工具：

面板 对应能力
Console 读取控制台日志与错误
Network 查看请求 / 响应、状态码、耗时
Elements 检查与修改 DOM
Performance 性能轨迹分析
Sources 脚本调试

对 agent 来说，Console 与 Network 最有价值——模型终于能看到“页面到底报了什么错”，而不再靠猜。一个典型的 debug 循环是：打开页面 → 触发操作 → 读控制台报错 → 读失败的网络请求 → 定位到代码。这正是人类前端工程师的日常动作，现在能交给 agent。

安装与配置

npm install --global chrome-devtools-mcp

- insert:
    - id: chrome-devtools
      name: '@deepseek-ai/dsh-mcp-client'
      config:
        serverName: chrome_devtools
        transport: stdio
        command: chrome-devtools
        cwd: !!js process.cwd()

注意 serverName 用 chrome_devtools（带下划线），工具前缀为 mcp__chrome_devtools__...。

典型用法

定位前端报错：

用 chrome-devtools 打开本地 5173，
触发一次提交操作，读取控制台全部输出，
定位报错的文件与行号，给出修复建议。

接口排查：

用 chrome-devtools 打开 /orders 页面，
列出所有失败的网络请求（状态码 ≥ 400），
含 URL、状态码、响应体前 500 字。

性能初判：

用 chrome-devtools 记录首页加载的性能轨迹，
列出最慢的三个资源与耗时。

DOM 状态检查：

用 chrome-devtools 打开页面，展开被折叠的评论区，
确认"加载更多"按钮点击后 DOM 里新增了多少节点。

谁该装

情况 建议
做前端开发 必装，性价比极高
做全栈，常要调前端 建议
纯后端 / 运维 不必，用 Playwright 即可

与 Playwright 的组合

两者不互斥，反而常一起用：Playwright 负责“把流程跑起来、把表单填完”，Chrome DevTools 负责“流程跑挂了时看清楚为什么挂”。一个管“做”，一个管“看”。如果你只装一个，按你的主要痛点选——要写自动化流程选 Playwright，要修前端 bug 选 Chrome DevTools。

排错

现象 原因
连不上浏览器 Chrome 未安装或版本不匹配
读不到控制台 页面用框架吞了错误，需主动捕获
网络面板为空 没在正确时机开始记录
性能数据缺失 需显式开启性能录制

小结

  • Chrome DevTools MCP star 数（约 54k）甚至超过 Playwright MCP。
  • 定位是前端调试而非自动化：Console 与 Network 最有价值。
  • 选型：操作页面用 Playwright，看清页面用 Chrome DevTools。

延伸阅读