Cursor × Chrome DevTools MCP 完整配置指南

1.原理描述

Cursor (MCP, Model Context Protocol) => chrome-devtools-mcp server (npx) => Chrome Devtools Protocol (CDP) => 浏览器

chrome-devtools-mcp 是一个 MCP Server，通过 Chrome DevTools Protocol (CDP) 桥接 AI Agent 与 Chrome 浏览器，让 AI 可以：截图、点击、填表、执行 JS、抓取网络请求、做性能分析等。

2.快速安装

安装NodeJS，这步大家在官网直接选适合操作系统的就行。
接着，在命令终端里输入以下指令安装：

npx chrome-devtools-mcp@latest --help

3.在cursor中配置MCP服务

新版的cursor启动时是以下界面，选择右上角的editor window或者在File里选择Open Editor Window：

接着会出现以下的Editor模式界面，在这个界面里按下Ctrl+Shift+P打开命令窗口（Windows环境，Linux或Mac使用对应的快捷键）

点击“Open MCP Settings”，会出现以下界面，这里作者因为已经配置过了，所以才会出现已有MCP配置。大家选择Add新增就行：

新建时，cursor会默认出现"mcpServers"，大家只需要在下面新增内容就行：

有以下几种方案可选：

• 在配置之前，先在chrome中打开 chrome://inspect/#remote-debugging
• 在页面上允许启用远程调试
  

方案A：复用当前浏览器 Session —— --autoConnect（推荐，需 Chrome 144+）

直接连接你正在使用的 Chrome，保留所有 Cookie、登录状态、当前打开的页面

{
  "mcpServers": {
    "chrome-devtools": {
      // "name": "Chrome DevTools",
      "command": "npx",
      "args": ["-y", "chrome-devtools-mcp@latest", "--autoConnect"]
    }
  }
}

如果你的 Chrome 版本是 Beta/Canary（144 尚未正式发布时）：

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

方案B：复用当前浏览器 Session —— --browser-url（任意 Chrome 版本）

适用于已手动启动带调试端口的 Chrome。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--browser-url=http://127.0.0.1:9222"
      ]
    }
  }
}

方案C：通过 WebSocket 直连

适合需要鉴权头或精确控制 Tab 的场景。

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--wsEndpoint=ws://127.0.0.1:9222/devtools/browser/<id>",
        "--wsHeaders={\"Authorization\":\"Bearer YOUR_TOKEN\"}"
      ]
    }
  }
}

注意：1.配置完MCP后，需要重启Cursor；2.首次调试时，Chrome顶部会出现“浏览器受远程控制”等类似字样，需要同意

完整参数参考

1.连接参数

参数	类型	说明
–autoConnect	boolean	连接当前运行的 Chrome（需 144+），触发用户授权弹窗
–browser-url	string	指定 Chrome 调试 HTTP 端点，如 http://127.0.0.1:9222
–wsEndpoint	string	直接指定 WebSocket 端点
–wsHeaders	string	WebSocket 连接的自定义 HTTP 头（JSON 字符串）

内部逻辑：只要提供了 --browser-url、–wsEndpoint 或 --autoConnect 任一参数，就会连接已有浏览器；否则自动启动新浏览器。

2.新浏览器启动参数

参数	类型	说明
–headless	false	无头模式（无 UI）
–channel	stable	Chrome 渠道：stable / beta / canary / dev
–isolated	false	使用临时 Profile（退出后自动删除）
–user-data-dir	~/.cache/chrome-devtools-mcp/…	自定义 Profile 目录
–viewport	—	视窗尺寸，如 1280x720
–executablePath	自动检测	指定 Chrome 可执行文件路径
–acceptInsecureCerts	false	忽略 SSL 证书错误
–chromeArg	—	传递额外的 Chrome 启动参数

3.功能开关参数

参数	类型	说明
–slim	false	精简模式：仅保留 3 个工具（navigate、evaluate_script、screenshot）
–headless	false	无头运行
–categoryPerformance	true	启用性能分析工具
–categoryNetwork	true	启用网络请求工具
–categoryEmulation	true	启用设备模拟工具
–usageStatistics	true	是否发送遥测数据到 Google（设为 false 可关闭）

4.可用工具列表

参数	类型	说明
截图/快照	take_screenshot	截取当前页面截图
截图/快照	take_snapshot	获取 DOM 快照
导航	navigate_page	打开/跳转 URL
导航	new_page	打开新标签页
导航	close_page	关闭标签页
导航	list_pages	列出所有标签页
导航	select_page	切换到指定标签页
交互	click	点击元素
交互	fill	填写输入框
交互	fill_form	批量填写表单
交互	type_text	模拟键盘输入
交互	press_key	按下按键
交互	hover	鼠标悬停
交互	drag	拖拽操作
交互	handle_dialog	处理 alert/confirm 弹窗
交互	upload_file	上传文件
JS 执行	evaluate_script	在页面上下文执行 JavaScript
调试	list_console_messages	查看控制台日志
调试	get_console_message	获取特定控制台消息
调试	lighthouse_audit	运行 Lighthouse 审计
性能	performance_start_trace	开始性能录制
性能	performance_stop_trace	停止性能录制并分析
性能	performance_analyze_insight	分析性能洞察
性能	take_memory_snapshot	内存快照
网络	list_network_requests	列出网络请求
网络	get_network_request	获取特定请求详情
等待	wait_for	等待条件满足

成功连接的展示

参考引用：https://www.cnblogs.com/max/p/19749818#4-%E9%80%90%E6%AD%A5%E6%93%8D%E4%BD%9C%E5%A4%8D%E7%94%A8%E7%8E%B0%E6%9C%89%E6%B5%8F%E8%A7%88%E5%99%A8-session