AI 调试浏览器终于不用反复登录了：Chrome DevTools MCP 实战指南

调试 Web 应用时，你是不是经常遇到这个场景：让 AI 帮你分析一个需要登录才能看到的页面，但 AI 每次都启动一个全新的浏览器实例，什么 Cookie 都没有，根本进不去。

Chrome DevTools MCP 就是来解决这个问题的。

---

什么是 Chrome DevTools MCP？

Chrome DevTools MCP 是 Google 官方发布的一个 MCP Server，让 AI 编程助手（Claude Code、Cursor、Gemini CLI、Copilot）可以直接操控和检查 Chrome 浏览器。

最新版本的核心突破：支持直接接入你正在使用的 Chrome 实例，而不是每次都启动一个干净的新浏览器。这意味着：

• ✅ AI 能访问你已经登录的网站
• ✅ AI 能看到你正在调试的页面
• ✅ 你可以手动探索到某个问题，然后直接”丢”给 AI 分析

能做什么？

MCP Server 共暴露了 26 个工具，分为 6 大类：

类别	工具	能做什么
导航	navigate_page、new_page、list_pages	打开页面、切换标签页
输入自动化	click、fill、fill_form、hover、drag	模拟用户操作
调试	console_messages、network_requests	查看控制台、抓网络请求
截图	screenshot、snapshot	截图、获取 DOM 结构
性能	性能追踪、DevTools 分析	分析页面性能瓶颈
等待	wait_for、handle_dialog	等待元素、处理弹窗

简单说：DevTools 里能看到的，AI 现在都能访问了。

安装配置

前置条件

• Node.js v20.19+
• Chrome 当前稳定版（无需 Beta）

Claude Code 一行安装

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Cursor / 其他支持 MCP 的工具

在 MCP 配置文件（~/.cursor/mcp.json 或对应位置）中添加：

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

Gemini CLI

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--autoConnect",
        "--channel=beta"
      ]
    }
  }
}

连接已登录的 Chrome 实例（高级用法）

默认配置下，MCP Server 每次都会启动一个隔离的全新 Chrome 实例——干净、但没有任何登录状态。

如果你需要访问需要身份验证的页面，要分两步走：

第一步：启动 Chrome 开启远程调试

macOS：

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222

Windows：

"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

然后在 Chrome 地址栏输入 chrome://inspect/#remote-debugging，确认远程调试已启用。

注意：Chrome 136+ 出于安全考虑，默认禁止在正常 profile 上开启远程调试。需要你主动到 chrome://inspect/#remote-debugging 授权，Chrome 会弹出确认对话框，同时在页面顶部显示”automated test software”横幅提示。

第二步：配置 MCP Server 接入你的 Chrome

claude mcp add --transport stdio chrome-devtools -- \
  npx -y chrome-devtools-mcp@latest \
  --browserUrl=http://127.0.0.1:9222

或在配置文件中：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browserUrl=http://127.0.0.1:9222"
      ]
    }
  }
}

配置完成后，AI 就能访问你已经登录的 Chrome 了。

实际使用场景

场景一：调试需要登录的 API

你在 Chrome 里登录了公司内网系统，打开了某个响应异常的页面。直接对 Claude 说：

“帮我分析当前页面的网络请求，找出哪个接口返回了错误”

AI 会自动接入你的浏览器，扫描网络请求，定位问题。

场景二：性能分析

检查 https://your-app.com 的性能，找出 LCP 超慢的原因

AI 会自动录制性能追踪、分析关键渲染路径，给出具体的优化建议。

场景三：自动化填表测试

帮我在当前打开的表单页面填入测试数据并提交，截图保存结果

无需写 Playwright 脚本，AI 直接操作就行。

场景四：抓取控制台报错

打开一个出现白屏的页面，然后：

看看控制台有什么错误，帮我定位问题

隐私说明

默认情况下，Google 会收集工具调用成功率、延迟、环境信息等匿名统计数据。如果不想上报，加一个参数：

"args": ["-y", "chrome-devtools-mcp@latest", "--no-usage-statistics"]

总结

Chrome DevTools MCP 的价值不只是”让 AI 能开浏览器”，更关键的是打通了人工操作和 AI 调试之间的上下文壁垒。你手动探索到的问题现场，可以直接移交给 AI 分析，不需要截图、描述、粘贴日志——AI 自己去看。

对于日常做 Web 开发调试的人，这个工具值得立刻装上试试。一行命令的事。

---

参考链接：Chrome DevTools MCP 官方公告 · GitHub 仓库