Cursor Chrome DevTools MCP 配置指南 for macOS

原创于 2025-10-09 21:20:04 发布 · 1.3k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#chrome devtools #macos #前端

Chrome DevTools MCP 配置指南

概述

Chrome DevTools MCP (Model Context Protocol) 是一个强大的工具，它让AI编码助理能够直接与Chrome浏览器交互，使用开发者工具的调试功能。这解决了AI代理无法看到代码在浏览器中实际运行情况的问题。

系统要求

Node.js v20.19 或更新的LTS版本
Chrome 当前稳定版或更新版本
npm
Cursor 编辑器

配置步骤

1. 检查Node.js版本

node --version

如果版本低于v20.19，需要升级Node.js。

2. 升级Node.js（如需要）

使用nvm管理Node.js版本：

# 安装Node.js v20
nvm install 20

# 切换到v20版本
nvm use 20

# 设置为默认版本
nvm alias default 20

# 验证版本
node --version

3. 验证Chrome安装

检查Chrome是否已安装：

# macOS
ls -la "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

# 或检查PATH中的Chrome
which google-chrome || which chrome || which chromium

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设置）
找到 MCP 选项
点击 New MCP Server（新建MCP服务器）
使用以下配置：

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

方法三：指定Chrome路径（如需要）

如果Chrome不在PATH中，可以指定完整路径：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--executablePath=/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
      ]
    }
  }
}

6. 重启Cursor

配置完成后，关闭并重新打开Cursor，让它重新加载MCP配置。

验证安装

基础功能测试

在Cursor中尝试以下提示：

检查 https://developers.chrome.com 的性能

本地项目测试

检查 localhost:8080 的性能（如果有本地服务器运行）

简单页面检查

打开 https://www.google.com 并截图

可用功能

输入自动化 (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": [
        "chrome-devtools-mcp@latest",
        "--channel=stable",        // Chrome版本：stable, canary, beta, dev
        "--headless=false",        // 是否无头模式
        "--isolated=true",         // 使用临时用户数据目录
        "--viewport=1280x720",     // 视口大小
        "--logFile=/tmp/log.txt"   // 日志文件路径
      ]
    }
  }
}

常用配置示例

开发环境配置

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless=false",
        "--isolated=true",
        "--viewport=1920x1080"
      ]
    }
  }
}

测试环境配置

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "chrome-devtools-mcp@latest",
        "--headless=true",
        "--isolated=true",
        "--viewport=1280x720"
      ]
    }
  }
}

故障排除

常见问题

1. “No tools, prompts, or resources” 错误

原因：Node.js版本过低
解决：升级到Node.js v20.19或更新版本

2. Chrome启动失败

原因：Chrome未安装或路径不正确
解决：

确保Chrome已安装
在配置中指定Chrome路径：--executablePath=/path/to/chrome

3. MCP服务器连接失败

原因：配置错误或权限问题
解决：

检查JSON配置格式
确保npx可以正常运行
重启Cursor

调试步骤

检查Node.js版本
```
node --version
```

测试MCP服务器

npx chrome-devtools-mcp@latest --version

检查Chrome安装

ls -la "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

查看详细日志

DEBUG=* npx chrome-devtools-mcp@latest --logFile=/tmp/debug.log

使用示例

性能分析

分析 https://example.com 的页面性能，重点关注LCP和FCP指标

调试本地项目

打开 localhost:3000 并检查控制台错误

自动化测试

在 https://example.com 上填写登录表单并提交

网络监控

监控 https://api.example.com 的网络请求

最佳实践

开发环境：使用非无头模式，便于观察调试过程
测试环境：使用无头模式，提高执行效率
性能测试：使用isolated模式，确保测试环境干净
调试复杂问题：启用详细日志记录

更新日志

2025-10-09: 初始配置文档创建
支持Chrome DevTools MCP v0.6.1
验证在macOS上的配置流程

本文档基于Chrome DevTools MCP v0.6.1版本编写，适用于macOS系统。