当前位置：首页 > news >正文

Cursor Chrome DevTools MCP 配置指南 for Windows

news 2025/11/16 6:57:40

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

方法二：从官网下载安装

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

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"按钮（如果可用）。

方法二：手动配置

打开 Cursor Settings（Cursor设置）
- 按 Ctrl + , 打开设置
- 或点击左下角齿轮图标 → Settings
找到 MCP 选项
- 在设置搜索框中输入 “MCP”
- 或直接编辑配置文件
编辑配置文件
- 配置文件位置：%APPDATA%\Cursor\User\settings.json
- 完整路径示例：C:\Users\你的用户名\AppData\Roaming\Cursor\User\settings.json
添加以下配置：

{"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

解决方案：

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

问题2：Node.js版本过低

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

解决方案：

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

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

错误信息：MCP server timeout

解决方案：

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

问题4：权限问题

错误信息：Permission denied

解决方案：

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

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

错误信息：Invalid JSON

解决方案：

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

Windows 特定注意事项

路径格式

在Windows的JSON配置文件中：

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