# 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
```