Loading... ### 在 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` 部分，先创建它）： ```json { "mcpServers": { "chrome-devtools": { "command": "chrome-devtools-mcp", "args": [] } } } ``` 或使用自动更新版本（推荐）： ```json { "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 启动选项，例如： ```json { "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）。如果遇到具体错误，提供更多上下文，我可以进一步帮助！ 最后修改：2025 年 12 月 23 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏