chrome-devtools-mcp

Chrome 官方出品的 DevTools MCP——让 AI 打开真实浏览器调试页面：截图、控制台、网络请求、性能 trace

浏览器Chrome调试性能分析

内容更新于 2026-08-09 19:25

关于

作者: ChromeDevTools
分类: 浏览器
仓库: GitHub

安装

npx -y chrome-devtools-mcp@latest

上方是「服务器命令」，不能直接在对话里使用：CLI 客户端用 <客户端> mcp add <名称> -- <此命令> 挂载（如 claude mcp add）
配置文件类客户端把命令拆成 command / args 填进配置的 mcpServers 块
挂载并重启客户端会话后，对话中 AI 会自动调用它提供的工具

卸载命令

命令行

# 按接入方式选对应命令：
claude mcp remove chrome-devtools   # Claude Code
codex mcp remove chrome-devtools    # Codex
grok mcp remove chrome-devtools     # Grok
# 配置文件接入：从 mcpServers 配置删除 chrome-devtools 条目并重启客户端

场景示例

「打开这个页面看看控制台报什么错」——直接读控制台消息定位报错
「首页 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 关
远程调试端口 = 浏览器控制权，开着时本机任意进程都能连，用完即关