2026-03-27 22:20:25 +08:00
|
|
|
|
# Chrome DevTools MCP 安装和配置说明
|
|
|
|
|
|
|
|
|
|
|
|
## ✅ 安装状态
|
|
|
|
|
|
|
|
|
|
|
|
chrome-devtools-mcp 已通过 pnpm 全局安装完成。
|
|
|
|
|
|
|
|
|
|
|
|
## 📝 配置步骤
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ 已配置（推荐方式）
|
|
|
|
|
|
|
|
|
|
|
|
项目已配置使用包装脚本，确保使用正确的 Node.js 版本。配置文件位于 `.cursor/mcp.json`：
|
|
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"mcpServers": {
|
|
|
|
|
|
"chrome-devtools": {
|
|
|
|
|
|
"command": "/Users/wwzh/Awesome/runfast/competition-management-system/.cursor/scripts/chrome-devtools-mcp.sh"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 方法 1：在 Cursor 用户设置中配置（备选）
|
|
|
|
|
|
|
|
|
|
|
|
如果项目配置不工作，可以在 Cursor 用户设置中添加：
|
|
|
|
|
|
|
|
|
|
|
|
1. 打开 Cursor
|
|
|
|
|
|
2. 按 `Cmd + Shift + P` (macOS) 或 `Ctrl + Shift + P` (Windows/Linux) 打开命令面板
|
|
|
|
|
|
3. 输入 "Preferences: Open User Settings (JSON)"
|
|
|
|
|
|
4. 在 `settings.json` 文件中添加以下配置：
|
|
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"mcpServers": {
|
|
|
|
|
|
"chrome-devtools": {
|
|
|
|
|
|
"command": "/Users/wwzh/Awesome/runfast/competition-management-system/.cursor/scripts/chrome-devtools-mcp.sh"
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 方法 2：使用 npx（需要修复 npm 缓存权限）
|
|
|
|
|
|
|
|
|
|
|
|
如果 npm 缓存权限问题已修复，可以使用：
|
|
|
|
|
|
|
|
|
|
|
|
```json
|
|
|
|
|
|
{
|
|
|
|
|
|
"mcpServers": {
|
|
|
|
|
|
"chrome-devtools": {
|
|
|
|
|
|
"command": "npx",
|
|
|
|
|
|
"args": ["chrome-devtools-mcp@latest"]
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
**修复 npm 缓存权限**（需要 sudo 权限）：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
sudo chown -R $(whoami) ~/.npm
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 🔍 验证安装
|
|
|
|
|
|
|
|
|
|
|
|
安装完成后，重启 Cursor，然后在 Chat 中应该可以看到 Chrome DevTools MCP 相关的工具。
|
|
|
|
|
|
|
|
|
|
|
|
## 📚 使用说明
|
|
|
|
|
|
|
|
|
|
|
|
Chrome DevTools MCP 提供了以下功能：
|
|
|
|
|
|
- 浏览器导航和页面快照
|
|
|
|
|
|
- 控制台消息查看
|
|
|
|
|
|
- 网络请求监控
|
|
|
|
|
|
- 页面元素交互（点击、输入等）
|
|
|
|
|
|
- 截图功能
|
|
|
|
|
|
|
|
|
|
|
|
## ⚠️ 注意事项
|
|
|
|
|
|
|
|
|
|
|
|
1. **Node.js 版本要求**：建议使用 Node.js 22.12.0 或更高版本（当前版本：20.19.0 LTS）
|
|
|
|
|
|
2. **Chrome 浏览器**：需要安装最新版本的 Google Chrome
|
|
|
|
|
|
3. **首次使用**：可能需要登录配置，之后会保存登录状态
|
|
|
|
|
|
|
|
|
|
|
|
## 🔧 故障排除
|
|
|
|
|
|
|
|
|
|
|
|
### 问题：MCP 服务器启动失败
|
|
|
|
|
|
|
|
|
|
|
|
**检查步骤：**
|
|
|
|
|
|
|
|
|
|
|
|
1. **验证包装脚本是否可执行**：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
cd /Users/wwzh/Awesome/runfast/competition-management-system
|
|
|
|
|
|
source ~/.nvm/nvm.sh
|
|
|
|
|
|
.cursor/scripts/chrome-devtools-mcp.sh --version
|
|
|
|
|
|
```
|
|
|
|
|
|
应该输出：`0.10.2`
|
|
|
|
|
|
|
|
|
|
|
|
2. **检查 Node.js 版本**：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
source ~/.nvm/nvm.sh
|
|
|
|
|
|
node --version
|
|
|
|
|
|
```
|
|
|
|
|
|
应该显示：`v20.19.0`
|
|
|
|
|
|
|
|
|
|
|
|
3. **检查配置文件**：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
cat .cursor/mcp.json
|
|
|
|
|
|
```
|
|
|
|
|
|
确认路径正确
|
|
|
|
|
|
|
|
|
|
|
|
4. **手动测试运行**：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
source ~/.nvm/nvm.sh
|
|
|
|
|
|
node /Users/wwzh/Library/pnpm/global/5/.pnpm/chrome-devtools-mcp@0.10.2/node_modules/chrome-devtools-mcp/build/src/index.js --version
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
5. **检查 Cursor 日志**：
|
|
|
|
|
|
- 打开 Cursor
|
|
|
|
|
|
- 查看输出面板（View → Output）
|
|
|
|
|
|
- 选择 "MCP" 或 "Chrome DevTools" 查看错误信息
|
|
|
|
|
|
|
|
|
|
|
|
6. **重启 Cursor IDE**：
|
|
|
|
|
|
配置更改后需要完全重启 Cursor
|
|
|
|
|
|
|
|
|
|
|
|
### 常见错误
|
|
|
|
|
|
|
|
|
|
|
|
**错误：command not found**
|
|
|
|
|
|
- 确保包装脚本路径正确
|
|
|
|
|
|
- 检查脚本是否有执行权限：`chmod +x .cursor/scripts/chrome-devtools-mcp.sh`
|
|
|
|
|
|
|
|
|
|
|
|
**错误：Node.js version mismatch**
|
|
|
|
|
|
- 确保使用 Node.js 20.19.0：`nvm use 20.19.0`
|
|
|
|
|
|
- 检查包装脚本中的 nvm 路径是否正确
|
|
|
|
|
|
|
|
|
|
|
|
**错误：npm cache permission denied**
|
|
|
|
|
|
- 如果使用 npx 方式，需要修复权限：
|
|
|
|
|
|
```bash
|
|
|
|
|
|
sudo chown -R $(whoami) ~/.npm
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 重新安装
|
|
|
|
|
|
|
|
|
|
|
|
如果问题持续存在：
|
|
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
|
# 1. 卸载旧版本
|
|
|
|
|
|
pnpm remove -g chrome-devtools-mcp
|
|
|
|
|
|
|
|
|
|
|
|
# 2. 清理缓存
|
|
|
|
|
|
pnpm store prune
|
|
|
|
|
|
|
|
|
|
|
|
# 3. 重新安装
|
|
|
|
|
|
source ~/.nvm/nvm.sh
|
|
|
|
|
|
pnpm add -g chrome-devtools-mcp@latest
|
|
|
|
|
|
|
|
|
|
|
|
# 4. 验证安装
|
|
|
|
|
|
pnpm list -g chrome-devtools-mcp
|
|
|
|
|
|
```
|
|
|
|
|
|
|
