在 Cursor 中安装和使用 Chrome DevTools MCP

Chrome DevTools MCP 是一个开源工具，用于将 Chrome DevTools Protocol 集成到 AI 编码助手（如 Cursor 的 AI 代理）中。它允许 AI 代理自动化浏览器任务、调试网页、分析性能等。下面是基于官方文档、GitHub 仓库和相关教程的详细步骤指南。假设你已安装 Cursor 编辑器（版本至少 v1.7.38+）和 Node.js（v20+）。

前置条件

• 软件要求：

  • Cursor 编辑器（从 cursor.com 下载）。
  • Node.js v20 或更高版本（用于运行 MCP 服务器）。
  • npm（Node.js 自带）。
  • Chrome 浏览器（稳定版、Beta、Dev 或 Canary 版）。

• 权限要求（macOS 用户）：

  • 转到 系统设置 > 隐私与安全 > 完全磁盘访问，启用 Cursor 的权限（否则安装可能失败）。

• 安全注意：

  • 使用隔离的 Chrome 配置，避免在 MCP 中处理敏感认证会话。
  • 验证 MCP 服务器来源，确保使用官方包。

安装步骤

有两种主要方式：自动安装（推荐，简单快捷）和手动安装。Cursor 支持 Model Context Protocol (MCP)，Chrome DevTools MCP 可以作为 MCP 服务器集成。

1. 自动安装（通过 Cursor 聊天界面）

• 打开 Cursor 编辑器，进入聊天界面（Chat 或 Composer 模式）。

• 输入类似以下提示，让 Cursor 的 AI 助手自动处理：

  请安装 Chrome DevTools MCP 并启用它。使用官方包 chrome-devtools-mcp@latest，将它添加到我的 MCP 服务器。如果需要，更新 settings.json 并重启 Cursor。授予任何所需权限。

• Cursor 会自动下载包、配置设置，并提示你授予权限。
• 安装完成后，重启 Cursor 以激活。
• 验证：在聊天界面检查“Available Tools”部分是否出现 Chrome DevTools 相关的工具（如 navigate_page、take_screenshot 等）。

2. 手动安装

• 步骤 1：全局安装 MCP 服务器
  在终端运行：

  npm install -g chrome-devtools-mcp

  （这会安装最新版本的 chrome-devtools-mcp 包。）

• 步骤 2：编辑 Cursor 的 settings.json
  找到并打开 settings.json 文件：

  • macOS：~/Library/Application Support/Cursor/User/settings.json
  • Windows：%APPDATA%\Cursor\User\settings.json
  • Linux：~/.config/Cursor/User/settings.json

  添加以下配置到文件中（如果没有 mcpServers 部分，先创建它）：

  {
    "mcpServers": {
      "chrome-devtools": {
        "command": "chrome-devtools-mcp",
        "args": []
      }
    }
  }

  或使用自动更新版本（推荐）：

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

• 步骤 3：重启 Cursor
  保存文件后，重启 Cursor。MCP 服务器会自动启动。
• 备选：使用 mcp.json 文件（项目级配置）
  如果你想针对特定项目配置，在项目根目录创建 .cursor/mcp.json 文件，并添加类似上面的 JSON 配置。全局配置则放在 ~/.cursor/mcp.json。
• 验证安装：
  在 Cursor 聊天界面输入：“列出可用的 MCP 工具。” 如果看到 Chrome DevTools 相关工具，安装成功。

使用步骤

一旦安装，Cursor 的 AI 代理（如在 Chat 或 Composer 模式下）可以自动检测并使用 Chrome DevTools MCP。MCP 会启动一个 Chrome 实例，进行浏览器自动化和调试。

1. 基本使用

• 打开 Cursor 的聊天界面。

• 描述任务，AI 会自动调用工具。例如：

  • “导航到 https://example.com 并截取屏幕截图。”（使用 navigate_page 和 take_screenshot 工具）。
  • “分析 https://developers.chrome.com 的性能，并给出优化建议。”（使用 performance_start_trace 和 performance_analyze_insight）。
• AI 会显示工具调用参数和结果（包括截图、日志或报告）。如果结果包含图像，它会以 base64 格式显示。

2. 切换和批准工具

• 在聊天界面，点击工具名称（如 “chrome-devtools”）来启用/禁用它。
• 默认情况下，AI 会请求批准工具使用（点击箭头查看参数）。
  你可以在设置中启用 Auto-run 以自动执行，无需批准。
• 工具响应会出现在聊天中，可展开查看详情。

3. 高级配置和选项

• 在 settings.json 的 args 中添加 Chrome 启动选项，例如：

  {
    "mcpServers": {
      "chrome-devtools": {
        "command": "chrome-devtools-mcp",
        "args": ["--channel", "canary", "--viewport", "1280x720", "--headless"]
      }
    }
  }

  • --channel：选择 Chrome 版本（stable、beta、dev、canary）。
  • --viewport：设置视口大小（如手机模拟）。
  • --headless：无头模式（无 UI，适合 CI）。
  • --browserUrl：附加到现有浏览器实例。

4. 示例

• 性能分析：
  输入：“检查 https://myapp.com 的性能指标，并建议改进。”
  AI 会打开浏览器、记录跟踪，并返回 Core Web Vitals 等洞察。
• 浏览器自动化：
  输入：“在 https://github.com 上搜索 'chrome-devtools-mcp' 并列出结果。”
  AI 使用 click、fill 等工具模拟交互。
• 调试：
  输入：“调试 https://example.com 的 JS 错误，并查看控制台日志。”
  AI 使用 evaluate_script 和 list_console_messages 返回错误详情。
• 网络请求分析：
  输入：“捕获 https://github.com 的网络请求，并突出慢加载资源。”
  返回网络跟踪报告。

常见问题排查

• 安装失败：检查 Node.js 版本和权限。尝试运行 npx chrome-devtools-mcp 测试服务器。
• 工具未出现：确保 MCP 配置正确，重启 Cursor。
• 性能问题：使用 headless 模式减少资源消耗。
• 更新：运行 npm update -g chrome-devtools-mcp 更新包。

更多详情可参考官方 GitHub 仓库（https://github.com/ChromeDevTools/chrome-devtools-mcp）或 Cursor 文档（https://cursor.com/docs/context/mcp）。如果遇到具体错误，提供更多上下文，我可以进一步帮助！