157 lines
3.6 KiB
Markdown
157 lines
3.6 KiB
Markdown
# 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
|
||
```
|
||
|