Cursor Chrome DevTools MCP 配置指南 for Windows

Cursor Chrome DevTools MCP 配置指南 for Windows

概述

Chrome DevTools MCP (Model Context Protocol) 是一个强大的工具，它让AI编码助理能够直接与Chrome浏览器交互，使用开发者工具的调试功能。这解决了AI代理无法看到代码在浏览器中实际运行情况的问题。

系统要求

• Node.js v20.19 或更新的LTS版本
• Chrome 当前稳定版或更新版本
• npm
• Cursor 编辑器
• Windows 10/11 操作系统

配置步骤

1. 检查Node.js版本

打开 PowerShell 或命令提示符，运行：

node --version

如果版本低于v20.19，需要升级Node.js。

2. 升级Node.js（如需要）

方法一：使用 nvm-windows（推荐）

如果已安装 nvm-windows：

# 安装Node.js v20
nvm install 20

# 切换到v20版本
nvm use 20

# 设置为默认版本
nvm alias default 20

# 验证版本
node --version

方法二：从官网下载安装

1. 访问 Node.js 官网
2. 下载 Windows 安装包（LTS 版本）
3. 运行安装程序，按提示完成安装
4. 重启终端，验证版本：

node --version

3. 验证Chrome安装

检查Chrome是否已安装：

# 检查默认安装路径
Test-Path "C:\Program Files\Google\Chrome\Application\chrome.exe"

# 或者检查其他可能的位置
Test-Path "$env:LOCALAPPDATA\Google\Chrome\Application\chrome.exe"

如果返回 True，说明Chrome已安装。如果返回 False，请从 Chrome 官网 下载并安装。

4. 测试Chrome DevTools MCP

# 测试MCP服务器
npx chrome-devtools-mcp@latest --version

# 查看帮助信息
npx chrome-devtools-mcp@latest --help

如果命令执行成功，说明工具可以正常使用。

5. 在Cursor中配置MCP

方法一：一键安装（推荐）

直接点击Chrome DevTools MCP文档中的"Install in Cursor"按钮（如果可用）。

方法二：手动配置

1. 打开 Cursor Settings（Cursor设置）

   • 按 Ctrl + , 打开设置
   • 或点击左下角齿轮图标 → Settings

2. 找到 MCP 选项

   • 在设置搜索框中输入 "MCP"
   • 或直接编辑配置文件

3. 编辑配置文件

   • 配置文件位置：%APPDATA%\Cursor\User\settings.json
   • 完整路径示例：C:\Users\你的用户名\AppData\Roaming\Cursor\User\settings.json

4. 添加以下配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=C:/Program Files/Google/Chrome/Application/chrome.exe"
      ]
    }
  }
}

重要提示：

• Windows 路径中的反斜杠 \ 在 JSON 中需要转义为 \\，或直接使用正斜杠 /
• 如果 Chrome 安装在非默认位置，请修改 --executablePath 参数

方法三：指定Chrome路径（如需要）

如果Chrome不在默认位置，可以指定完整路径：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=C:/Program Files/Google/Chrome/Application/chrome.exe"
      ]
    }
  }
}

常见Chrome安装路径：

• 64位系统：C:\Program Files\Google\Chrome\Application\chrome.exe
• 32位系统：C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
• 用户安装：%LOCALAPPDATA%\Google\Chrome\Application\chrome.exe

6. 重启Cursor

配置完成后，必须关闭并重新打开Cursor，让它重新加载MCP配置。

验证安装

基础功能测试

在Cursor中尝试以下提示：

检查 https://developers.chrome.com 的性能

本地项目测试

检查 localhost:8080 的性能（如果有本地服务器运行）

简单页面检查

打开 https://www.baidu.com 并截图

完整测试示例

使用 Chrome DevTools MCP 访问百度首页，输入"Chrome DevTools MCP"进行搜索，并截图保存结果

可用功能

输入自动化 (7个工具)

• click - 点击元素
• drag - 拖拽操作
• fill - 填写表单
• fill_form - 批量填写表单
• handle_dialog - 处理对话框
• hover - 悬停操作
• upload_file - 文件上传

导航自动化 (7个工具)

• close_page - 关闭页面
• list_pages - 列出页面
• navigate_page - 导航到页面
• navigate_page_history - 页面历史导航
• new_page - 新建页面
• select_page - 选择页面
• wait_for - 等待条件

模拟功能 (3个工具)

• emulate_cpu - CPU模拟
• emulate_network - 网络模拟
• resize_page - 调整页面大小

性能分析 (3个工具)

• performance_analyze_insight - 性能分析洞察
• performance_start_trace - 开始性能追踪
• performance_stop_trace - 停止性能追踪

网络监控 (2个工具)

• get_network_request - 获取网络请求
• list_network_requests - 列出网络请求

调试功能 (4个工具)

• evaluate_script - 执行JavaScript
• list_console_messages - 列出控制台消息
• take_screenshot - 截图
• take_snapshot - 页面快照

高级配置选项

配置参数

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=C:/Program Files/Google/Chrome/Application/chrome.exe",
        "--headless=false",
        "--viewport=1920x1080"
      ]
    }
  }
}

常用参数说明

• --executablePath: Chrome可执行文件路径（Windows路径使用正斜杠）
• --headless: 是否无头模式运行（默认false，显示浏览器窗口）
• --viewport: 初始视口大小，例如 1920x1080
• --channel: Chrome版本通道（stable/canary/beta/dev）
• --logFile: 日志文件路径
• --proxyServer: 代理服务器配置

连接已运行的Chrome实例

如果你想连接到已经运行的Chrome实例（例如开启了远程调试的Chrome）：

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

启动Chrome时使用：

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

常见问题排查

问题1：找不到Chrome

错误信息 ：Chrome executable not found

解决方案：

1. 确认Chrome已正确安装
2. 检查配置文件中的路径是否正确
3. 使用正斜杠 / 而不是反斜杠 \ 在JSON中

问题2：Node.js版本过低

错误信息 ：Node.js version must be >= 20.19

解决方案：

1. 升级Node.js到v20.19或更高版本
2. 重启终端和Cursor

问题3：MCP服务器启动超时

错误信息 ：MCP server timeout

解决方案：

1. 检查网络连接
2. 确认npx可以正常访问npm registry
3. 尝试手动运行：npx chrome-devtools-mcp@latest --version

问题4：权限问题

错误信息 ：Permission denied

解决方案：

1. 以管理员身份运行Cursor（如果需要）
2. 检查Chrome安装目录的访问权限
3. 确认用户有执行Chrome的权限

问题5：配置文件格式错误

错误信息 ：Invalid JSON

解决方案：

1. 使用JSON验证工具检查配置文件
2. 确保所有字符串都用双引号
3. 确保路径中的反斜杠已转义或使用正斜杠

Windows 特定注意事项

路径格式

在Windows的JSON配置文件中：

• ✅ 推荐 ：使用正斜杠 /，例如：C:/Program Files/Google/Chrome/Application/chrome.exe
• ⚠️ 可用 ：使用转义反斜杠 \\，例如：C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe
• ❌ 错误 ：直接使用反斜杠 \，会导致JSON解析错误

PowerShell vs CMD

本文档中的命令适用于PowerShell和CMD。如果使用Git Bash，路径格式可能需要调整。

防火墙设置

首次运行时，Windows防火墙可能会询问是否允许Node.js访问网络，请选择"允许访问"。

测试验证清单

完成配置后，请验证以下功能：

• Node.js版本 >= v20.19
• Chrome已正确安装
• npx chrome-devtools-mcp@latest --version 可以执行
• Cursor配置文件中MCP配置正确
• 已重启Cursor
• 可以在Cursor中使用MCP功能（如截图、导航等）

总结

通过以上步骤，你应该已经成功在Windows系统上配置了Chrome DevTools MCP。这个工具将大大增强AI助手在Web开发、调试和测试方面的能力。

如果遇到问题，请检查：

1. Node.js和Chrome的版本是否符合要求
2. 配置文件路径和格式是否正确
3. 是否已重启Cursor
4. 网络连接是否正常

祝你使用愉快！

---

参考资源：

• Chrome DevTools MCP GitHub
• Node.js 官网
• Chrome 官网