如何使用 Claude Chrome DevTools MCP Server (2026)

Chrome DevTools MCP (Model Context Protocol) 服务端充当了 Claude 与 Chrome 浏览器之间的桥梁，允许 AI 实时检查页面、读取控制台日志、执行 JavaScript、截图、监控网络请求以及调试 Web 应用程序。这是为 Web 开发者提供的最强大的 MCP 集成之一，本指南将带你完成完整的配置和使用流程。

什么是 Chrome DevTools MCP Server？

MCP (Model Context Protocol) 是由 Anthropic 创建的开放标准，它使像 Claude 这样的 AI 助手能够与外部工具和数据源进行交互。Chrome DevTools MCP server 专门将 Chrome 的调试协议开放给 Claude，赋予 AI 以下能力：

检查并读取任何网页的 DOM
在浏览器控制台中执行 JavaScript
监控和分析网络请求
读取控制台日志和错误
对当前页面进行截图
与页面元素交互（点击、输入、导航）
分析 CSS 样式和计算后的布局

为什么要使用它？

传统调试方式	使用 Chrome DevTools MCP
手动检查元素	让 Claude 查找有问题的元素
亲自阅读控制台错误	Claude 自动读取并解释错误
手动编写调试脚本	Claude 实时编写并执行调试脚本
截图并粘贴给 AI	Claude 自行截图并进行分析
在浏览器和 AI 之间切换	Claude 在单一工作流中直接访问浏览器

前提条件

在设置 Chrome DevTools MCP server 之前，请确保你拥有：

Google Chrome (版本 120 或更高)
Node.js (版本 18 或更高)
Claude Desktop 应用（最新版）或 Claude Code CLI
对终端（Terminal）有基本了解

验证你的 Node.js 安装：

node --version
# 应输出 v18.x.x 或更高版本

npm --version
# 应输出 9.x.x 或更高版本

分步设置指南

第 1 步：启动开启远程调试的 Chrome

启动 Chrome 时必须启用远程调试端口。首先关闭所有 Chrome 实例，然后从终端启动：

macOS:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug

Windows (PowerShell):

& "C:\Program Files\Google\Chrome\Application\chrome.exe" `
  --remote-debugging-port=9222 `
  --user-data-dir="$env:TEMP\chrome-debug"

Linux:

google-chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/chrome-debug

你可以通过在另一个浏览器或标签页中访问 http://localhost:9222/json 来验证调试端口是否激活。你应该能看到一个列出已打开标签页的 JSON 数组。

第 2 步：配置 Claude Desktop

打开你的 Claude Desktop MCP 配置文件：

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Windows: %APPDATA%\Claude\claude_desktop_config.json

将 Chrome DevTools MCP server 添加到配置中：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/chrome-devtools-mcp-server"
      ],
      "env": {
        "CHROME_DEBUGGING_URL": "http://localhost:9222"
      }
    }
  }
}

保存文件并重启 Claude Desktop。

第 3 步：配置 Claude Code（备选方案）

如果你使用的是 Claude Code (CLI) 而非桌面端应用，请将 MCP server 添加到你项目的 .mcp.json 文件中：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "@anthropic-ai/chrome-devtools-mcp-server"
      ],
      "env": {
        "CHROME_DEBUGGING_URL": "http://localhost:9222"
      }
    }
  }
}

或者通过 CLI 全局添加：

claude mcp add chrome-devtools \
  --command "npx" \
  --args "-y" "@anthropic-ai/chrome-devtools-mcp-server" \
  --env CHROME_DEBUGGING_URL=http://localhost:9222

第 4 步：验证连接

在 Claude Desktop 或 Claude Code 中，开启新对话并询问：

你能看到我的 Chrome 浏览器吗？请列出当前打开的标签页。

如果设置正确，Claude 将使用 MCP 工具查询 Chrome 并返回带有 URL 和标题的打开标签页列表。

可用的 MCP 工具

连接后，Claude 可以访问以下 Chrome DevTools 工具：

工具	描述	使用示例
`navigate`	导航到特定 URL	"访问 https://example.com"
`screenshot`	捕获当前页面截图	"对页面进行截图"
`get_console_logs`	读取浏览器控制台输出	"显示所有控制台错误"
`execute_javascript`	在页面上下文中运行 JS	"获取搜索输入框的值"
`get_page_content`	读取页面的 DOM/HTML	"这个页面上有哪些元素？"
`get_network_logs`	查看网络请求	"显示所有失败的 API 请求"
`click_element`	点击页面元素	"点击提交按钮"
`type_text`	在输入框中输入文本	"在邮箱栏输入 'test@email.com'"
`get_styles`	读取元素的 CSS 样式	"这个页眉应用了哪些样式？"

实际应用场景

1. 调试 UI 异常

导航到有问题的页面，并让 Claude 进行调查：

导航到 http://localhost:3000/dashboard 并截图。
侧边栏菜单渲染不正确。
请检查控制台错误，并检查侧边栏组件的 CSS，找出导致布局问题的原因。

Claude 将截图、读取控制台错误、检查 DOM 并分析 CSS —— 然后解释根本原因并建议修复方案。

2. 监控 API 调用

访问 http://localhost:3000/users 并监控网络请求。
我发现加载速度很慢。请识别哪些 API 调用耗时最长，并检查是否有返回错误。

Claude 将分析网络瀑布流并以结构化格式呈现发现结果。

3. 自动化测试与验证

导航到 http://localhost:3000/signup 并测试表单验证：
1. 尝试提交空字段
2. 尝试无效的邮箱格式
3. 尝试少于 8 个字符的密码
4. 每次尝试后截图显示错误信息

4. 性能审计

导航到 https://mysite.com 并分析页面性能：
- 检查网络请求总数
- 识别任何大于 1MB 的请求
- 查找阻塞渲染的资源
- 检查控制台中的 JavaScript 错误

5. 提取页面数据

导航到 https://example.com/pricing 并将所有价格计划信息
提取为结构化的 JSON 格式，包括计划名称、价格和功能列表。

故障排除

Chrome DevTools 连接失败

如果 Claude 无法连接到 Chrome，请检查以下常见问题：

# 验证 Chrome 调试端口是否激活
curl http://localhost:9222/json/version

# 预期输出（示例）：
# {
#   "Browser": "Chrome/122.0.6261.94",
#   "Protocol-Version": "1.3",
#   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/browser/..."
# }

常见错误及解决方案

错误	原因	解决方案
"Cannot connect to Chrome"	Chrome 运行时未带调试标志	使用 `--remote-debugging-port=9222` 重启 Chrome
"Connection refused on port 9222"	端口冲突或防火墙拦截	检查是否有其他进程占用 9222 端口；尝试更换端口
"No tabs found"	Chrome 已启动但未打开标签页	在调试版 Chrome 实例中至少打开一个标签页
MCP server 未出现在 Claude 中	配置文件语法错误	验证你的 JSON 配置；重启 Claude Desktop
macOS 上显示 "Permission denied"	Node.js 权限问题	运行 `chmod +x $(which npx)` 或重新安装 Node.js

使用不同的端口

如果 9222 端口被占用，可以使用任何可用端口：

# 在 9333 端口启动 Chrome
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9333 \
  --user-data-dir=/tmp/chrome-debug

# 相应地更新你的 MCP 配置
"env": {
  "CHROME_DEBUGGING_URL": "http://localhost:9333"
}

安全注意事项

切勿将调试端口暴露给网络。 --remote-debugging-port 标志应仅在本地主机 (localhost) 上使用。任何能够访问此端口的人都可以完全控制你的浏览器。
使用独立的 Chrome 配置文件。 --user-data-dir 标志会创建一个隔离的配置文件，使你的调试会话与个人浏览数据、Cookie 和密码分开。
完成后关闭调试实例。 不主动与 Claude 配合使用时，请不要保持启用调试功能的 Chrome 运行。

结论

对于使用 Claude 的 Web 开发者来说，Chrome DevTools MCP server 是一个改变游戏规则的存在。你不再需要手动复制错误消息并在文本中描述视觉 Bug，而是可以直接让 Claude 看到并与你的浏览器交互。这极大地加速了调试、测试和前端开发的工作流程。

对于需要 AI 生成视觉内容来补充其 Web 应用的团队 —— 从产品演示视频到用于客户支持的 AI 人工数字人 —— Hypereal AI 提供了价格合理的 API 访问，涵盖了最先进的视频生成、对话数字人创建和图像合成技术，能够与现代开发工作流无缝集成。