chrome-devtools-mcp

June 23, 2026 · 4 min read

Chrome DevTools MCP 特点是让 AI 编码助手直接接管 Chrome，复用登录态 + 拿到原生 DevTools 数据。

写在前面

AI 编码助手想调试一个登录后才能访问的页面，过去只有两条路：写一套登录脚本，或者截图贴回去——前者维护成本高，后者 AI 看不到当前 DOM 状态，等于盲人摸象。

Chrome DevTools MCP 解决的就是这个上下文断层。

一个 MCP 服务器（chrome-devtools-mcp），底层用 Puppeteer，通过 Chrome DevTools Protocol 把浏览器能力暴露给 AI 客户端。

它不是浏览器自动化的替代品（Playwright、Selenium 仍在），而是把"AI 编码助手"和"你正在用的 Chrome DevTools"打通——AI 能拿到原生面板数据，你也能在 DevTools 里选中元素直接让 AI 接着排查。

类别	代表工具
输入自动化	`click`、`fill`、`drag`、`press_key`、`upload_file`
导航	`navigate_page`、`new_page`、`list_pages`、`wait_for`
性能	`performance_start_trace`、`performance_analyze_insight`
网络	`list_network_requests`、`get_network_request`
调试	`take_snapshot`、`take_screenshot`、`evaluate_script`、`get_console_message`
仿真	`emulate`、`resize_page`
内存	堆快照捕获与分析
扩展	`install_extension`、`reload_extension`

想最小化暴露面，可用 --slim 模式，只剩 3 个工具：导航、脚本执行、截图。

这是新手最容易踩坑的地方。服务器默认会自己拉起一个 Chrome 实例，跟你日常用的浏览器完全隔离——登录态、Cookie、扩展全无。

按场景选：

复用当前会话：--autoConnect（Chrome 144+ Beta），需先在 chrome://inspect/#remote-debugging 启用远程调试，每次连接弹授权对话框。
远程调试端口：--browser-url=http://127.0.0.1:9222，适合沙箱环境或自定义 Chrome 启动参数。
直连 WebSocket：--wsEndpoint，可带自定义 headers（鉴权场景）。
隔离实例：--isolated，临时 user-data-dir，关闭即清理。

标准配置一行：

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

跟 Playwright 不一样，Chrome DevTools MCP 强制 take_snapshot 在点击/填表之前——快照返回无障碍树 + 每个元素的 uid，AI 必须用 uid 定位，不能靠坐标盲点。

这避免了"按钮被广告覆盖，AI 点错位置"这类幻觉。

登录态调试：让 AI 直接打开已登录的内部后台排查问题，不用重写登录脚本。
性能分析：performance_start_trace → 跑一段交互 → performance_analyze_insight 给出可执行优化建议。
失败请求定位：在 DevTools Network 面板选中一条 500 请求，让 AI 分析完整堆栈和响应体。

远程调试端口无鉴权。一旦启用 --remote-debugging-port=9222，同机任何应用都能连。生产环境千万别开。

MCP 客户端能读到浏览器全部数据。Cookie、localStorage、扩展 Token 一视同仁地暴露给 AI 厂商（除非本地跑模型）。共享 MCP 实例前确认数据范围。

默认还会向 Google 上报使用统计，禁用：

CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS=1