Chrome DevTools MCP：让 AI 直接操作浏览器调试网站

Fri, 24 Jul 2026 17:28:00 +0800

以前使用 Codex、Claude Code 或 Cursor 修改网页时，AI 通常只能查看代码，却不知道网页实际运行后是什么样子。

Chrome DevTools MCP 可以把 AI 编程助手连接到真实的 Chrome 浏览器，让 AI 像开发者一样打开网页、点击按钮、查看报错并分析网站性能。它由 Chrome DevTools 团队维护。

它能做什么？

安装后，AI 可以直接：

简单理解：

它相当于给 AI 安装了一双“浏览器眼睛”，让 AI 不再只看代码猜问题。

使用前需要安装：

在终端执行：

`1`	`codex mcp add chrome-devtools -- npx chrome-devtools-mcp@latest`

`1`	`claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest`

打开：

`1`	`Cursor Settings → MCP → New MCP Server`

填入：

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

这些都是项目官方提供的安装方式。

安装完成并重启 AI 编程工具，然后输入：

`1`	`使用 Chrome DevTools 检查 https://developers.chrome.com 的性能。`

如果配置正确，AI 会自动打开 Chrome，并开始记录网页性能数据。浏览器通常要等 AI 第一次调用工具时才会自动启动。

它特别适合：

需要注意，Chrome DevTools MCP 可以读取和操作浏览器中的网页内容，因此不要让它连接到包含隐私、密码或敏感账户信息的浏览器页面。