Cursor MCP：chrome-devtools-mcp

• 打开浏览器，自动控制浏览器，就像Python中的selenium一样
• 打开浏览器并截图(很多需求文档都是在线版的如飞书、语雀等)
• 分析控制台
• 执行js脚本

一：安装 chrome-devtools-mcp

# 检查Node.js版本，要求v20.19 或更新的LTS版本
node --version

# 安装
npx chrome-devtools-mcp@latest --version

# 帮助
npx chrome-devtools-mcp@latest --help

二：Cursor添加自定义MCP

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executablePath=C:/Users/11437/AppData/Local/Google/Chrome/Application/chrome.exe"
      ]
    }
  }
}

其它参数：

--executablePath: Chrome可执行文件路径（Windows路径使用正斜杠），通过右键桌面快捷图标通过打开文件所在的位置查看。Windows 路径中的反斜杠 \ 在 JSON 中需要转义为 \\，或直接使用正斜杠 /。
--headless: 是否无头模式运行（默认false，显示浏览器窗口）
--viewport: 初始视口大小，例如 1920x1080
--channel: Chrome版本通道（stable/canary/beta/dev）
--logFile: 日志文件路径
--proxyServer: 代理服务器配置

配置完成后重启一下Cursor，绿色表示MCP可用。

三：工具列表

chrome-devtools-mcp机会支持像Chrome中的所有功能。

1.调试功能

• evaluate_script - 执行JavaScript
• list_console_messages - 列出控制台消息
• take_screenshot - 截图
• take_snapshot - 页面快照

2.导航自动化

• close_page - 关闭页面
• list_pages - 列出页面
• navigate_page - 页面导航（URL、前进、后退、刷新）
• navigate_page_history - 页面历史导航
• new_page - 新建页面
• select_page - 选择活动页面
• resize_page - 调整页面尺寸
• wait_for - 等待条件

3.输入自动化

• click - 点击元素
• drag - 拖拽操作
• fill - 填写表单
• press_key - 键盘输入
• fill_form - 批量填写表单
• handle_dialog - 处理对话框
• hover - 悬停操作
• upload_file - 文件上传

4.网络监控

• get_network_request - 获取网络请求
• list_network_requests - 列出网络请求
• list_console_messages - 列出控制台消息
• get_console_message - 获取特定控制台消息

5.模拟功能

• emulate_cpu - CPU模拟
• handle_dialog - 处理浏览器对话框
• emulate_network - 网络模拟
• resize_page - 调整页面大小

6.性能分析

• performance_start_trace - 开始性能追踪
• performance_stop_trace - 停止性能追踪
• performance_analyze_insight - 性能分析洞察

四：常用场景

1. 性能分析与优化

• 页面性能分析：测量 LCP、FCP、CLS 等 Core Web Vitals
• 性能瓶颈定位：识别渲染阻塞资源、第三方脚本影响
• 网络依赖分析：分析资源加载链和依赖关系
• 性能报告生成：自动生成性能分析报告

1. navigate_page → 导航到目标页面
2. performance_start_trace → 开始性能跟踪
3. wait_for → 等待页面加载完成
4. performance_stop_trace → 停止跟踪
5. performance_analyze_insight → 分析性能问题

2. 自动化测试与验证

• 页面功能自动化测试：点击、填写表单、导航等
• 跨浏览器兼容性测试：模拟不同设备和网络条件
• 回归测试：自动化验证页面功能
• 截图对比：自动截图用于视觉回归测试

1. navigate_page → 打开测试页面
2. take_snapshot → 获取页面结构
3. fill / click → 执行操作
4. wait_for → 等待结果
5. take_screenshot → 截图验证
6. evaluate_script → 验证数据

3. 页面监控与调试

• 实时页面监控：监控页面加载状态和错误
• 控制台日志分析：收集和分析 JavaScript 错误
• 网络请求监控：跟踪和分析网络请求
• DOM 结构分析：检查页面可访问性和结构

1. navigate_page → 打开页面
2. list_console_messages → 检查错误
3. list_network_requests → 检查请求
4. take_snapshot → 检查页面结构

4. 自动化操作

• 表单自动填写：批量处理表单提交
• 数据抓取：从页面提取结构化数据
• 页面交互模拟：模拟用户操作流程
• 文件上传测试：测试文件上传功能

总是先 take_snapshot 获取最新页面结构
操作后使用 wait_for 等待响应
关键步骤使用 take_screenshot 记录
使用 evaluate_script 进行复杂验证
网络相关操作使用 list_network_requests 监控

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