tonytech/library-picturebook-activity

Fork 0

王伟志 5d34307a69 feat: 学校模块与比赛模块

2025-12-09 11:10:36 +08:00

3.6 KiB

Raw Blame History

Chrome DevTools MCP 安装和配置说明

✅ 安装状态

chrome-devtools-mcp 已通过 pnpm 全局安装完成。

📝 配置步骤

✅ 已配置（推荐方式）

项目已配置使用包装脚本，确保使用正确的 Node.js 版本。配置文件位于 .cursor/mcp.json：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/Users/wwzh/Awesome/runfast/competition-management-system/.cursor/scripts/chrome-devtools-mcp.sh"
    }
  }
}

方法 1：在 Cursor 用户设置中配置（备选）

如果项目配置不工作，可以在 Cursor 用户设置中添加：

打开 Cursor
按 Cmd + Shift + P (macOS) 或 Ctrl + Shift + P (Windows/Linux) 打开命令面板
输入 "Preferences: Open User Settings (JSON)"
在 settings.json 文件中添加以下配置：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "/Users/wwzh/Awesome/runfast/competition-management-system/.cursor/scripts/chrome-devtools-mcp.sh"
    }
  }
}

方法 2：使用 npx（需要修复 npm 缓存权限）

如果 npm 缓存权限问题已修复，可以使用：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": ["chrome-devtools-mcp@latest"]
    }
  }
}

修复 npm 缓存权限（需要 sudo 权限）：

sudo chown -R $(whoami) ~/.npm

🔍 验证安装

安装完成后，重启 Cursor，然后在 Chat 中应该可以看到 Chrome DevTools MCP 相关的工具。

📚 使用说明

Chrome DevTools MCP 提供了以下功能：

浏览器导航和页面快照
控制台消息查看
网络请求监控
页面元素交互（点击、输入等）
截图功能

⚠️ 注意事项

Node.js 版本要求：建议使用 Node.js 22.12.0 或更高版本（当前版本：20.19.0 LTS）
Chrome 浏览器：需要安装最新版本的 Google Chrome
首次使用：可能需要登录配置，之后会保存登录状态

🔧 故障排除

问题：MCP 服务器启动失败

检查步骤：

验证包装脚本是否可执行：

cd /Users/wwzh/Awesome/runfast/competition-management-system
source ~/.nvm/nvm.sh
.cursor/scripts/chrome-devtools-mcp.sh --version

应该输出：0.10.2

检查 Node.js 版本：
```
source ~/.nvm/nvm.sh
node --version
```
应该显示：v20.19.0
检查配置文件：
```
cat .cursor/mcp.json
```
确认路径正确

手动测试运行：

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

检查 Cursor 日志：
- 打开 Cursor
- 查看输出面板（View → Output）
- 选择 "MCP" 或 "Chrome DevTools" 查看错误信息
重启 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 方式，需要修复权限：
```
sudo chown -R $(whoami) ~/.npm
```

重新安装

如果问题持续存在：

# 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

3.6 KiB Raw Blame History Unescape Escape