返回 MCP Server 列表
chrome-devtools-mcp
Chrome 官方出品的 DevTools MCP——让 AI 打开真实浏览器调试页面：截图、控制台、网络请求、性能 trace
browserChrome调试性能分析
场景示例
- 「打开这个页面看看控制台报什么错」——直接读控制台消息定位报错
- 「首页 LCP 怎么这么慢？」——录性能 trace，AI 分析瓶颈给优化建议
- 「帮我把这个表单填了提交试试」——基于页面快照定位元素，自动填写点击
- 「这个接口返回了什么？」——列出网络请求、查看请求/响应体
使用注意
受控浏览器里的内容会全部暴露给模型，注意三点：
- 别在受控实例里登录敏感账号、浏览隐私内容，建议
--isolated临时目录 - 匿名使用统计默认开启，
--no-usage-statistics关闭；性能工具可能向 Google CrUX 发送 URL，--no-performance-crux关闭 - 开着远程调试端口时，本机任意程序都能控制这个浏览器，用完即关
提供的工具
| 工具族 | 说明 |
|---|---|
| 输入自动化 | click / fill_form / drag / upload_file，基于页面快照的 uid 定位元素 |
| 导航与页面 | 开关标签页、跳转、等待文本、截图、a11y 文本快照 |
| 调试 | 控制台消息、执行脚本、网络请求列表与详情 |
| 性能与仿真 | 性能 trace 录制分析、CPU/网络节流、设备仿真 |
需要 Node.js LTS + 本机 Chrome 稳定版；仅官方 Chrome 受支持，其它 Chromium 内核浏览器会有怪毛病。
避坑清单
- 优先
take_snapshot，少用截图：文本快照可检索、能拿到元素 uid，比截图省一个数量级的 token；截图只在真要看视觉效果时用 - uid 会过期：元素操作必须用最新一次快照里的 uid，页面一变旧 uid 就失效——操作报错先重新 snapshot 再试
- 默认 profile 是持久化的（
$HOME/.cache/chrome-devtools-mcp/）：上次的登录态、cookie 都还在；要干净环境加--isolated（临时目录，关浏览器即清） - 接管已运行的 Chrome 有两个前提：启动时带
--remote-debugging-port=9222，且必须配非默认 user-data-dir（新版 Chrome 硬限制）；然后服务器命令加--browserUrl http://127.0.0.1:9222——调试带登录态的页面用这条路，不用新开实例 - 一个浏览器实例别同时喂给多个 agent：并发操作会互相打架（官方为此出了实验性
--experimentalPageIdRouting）
安全与隐私
- 受控实例的页面内容与网络响应对模型全可见——测试账号与生产账号分离
- 匿名使用统计默认开启：
--no-usage-statistics关；性能工具会把 trace 里的 URL 发给 Google CrUX：--no-performance-crux关 - 远程调试端口 = 浏览器控制权，开着时本机任意进程都能连，用完即关