Chrome Devtools MCP Cursor Guide

Chrome DevTools MCP × Cursor IDE — 指南与入门

**创建光标 *看* 您的网页应用。 这个仓库展示了如何将官方（组件/服务/接口等）进行连接配置 Chrome DevTools MCP服务器 to Cursor 集成开发环境（IDE）** 因此，您的AI助手可以实时调试网页：检查DOM、捕获网络追踪、运行Lighthouse、截取屏幕截图，以及执行更多操作。

为什么选择这个仓库？

像……这样的社区项目 browser-tools-mcp 证明Cursor能够控制无头浏览器。\ 本指南整合了 Chrome官方的DevTools MCP服务器 由Chrome DevTools团队维护——解锁 满的；完全的 开发者工具（DevTools）功能：

• ✅ DOM（文档对象模型）与样式检查
• ✅ 控制台日志 & JavaScript 错误
• ✅ 网络瀑布流及时间安排
• ✅ Lighthouse（灯塔工具）与核心网页性能指标
• ✅ 可访问性（a11y）检查
• ✅ 截图、移动设备模拟、视觉差异对比
• ✅ 无头模式 & 适合持续集成的标志

长话短说：这是 真正的调试，而不仅仅是截图。

______________________________________________________________________

快速入门

🚀 最简单的安装（Cursor为您完成）

如果你正在使用 Cursor 集成开发环境 (IDE)，你可以直接 请求 Cursor 安装并配置 Chrome DevTools MCP光标将承担繁重的工作 只要你授予完全磁盘访问权限 (macOS) 并提供 DevTools MCP 包的链接。

将此粘贴到Cursor聊天中：

*“安装 Chrome DevTools MCP（注：MCP可能是一个特定上下文中的缩写或项目名，直接翻译为“MCP”在中文中保持原样，因为没有具体的上下文来确定其确切含义，但通常在技术文档或产品名称中，缩写会保留原样以保持专业性和准确性。） 并为我启用它。\ 授予任何所需的权限。\ 使用官方软件包 Chrome开发者工具-MCP（注：MCP可能代表某个特定的模块、插件或配置，具体含义需根据上下文确定） 并将其添加到我的MCP服务器中。\ 如有需要，请更新 settings.json 并重新启动 Cursor。”*

• 在 macOS 上，确保 系统设置 → 隐私与安全性 → 全盘访问 → 光标 = 开启.
• Cursor 将安装 MCP 并为您连接好线路 settings.json。
• 您可以立即运行DevTools命令（请参阅下方的提示）。

不想授予完全磁盘访问权限？ 没问题——用这个 手动设置 在......下面

先决条件

在哪里 settings.json 在每个操作系统上吗？

如果 User 文件夹或 settings.json 不存在，就创造它们。

• Node.js v20+
• npm
• Cursor 集成开发环境（IDE） v1.7.38+
• Chrome（稳定版/测试版/开发者版/Canary版）

1) 安装DevTools MCP服务器（手动）

npm install -g chrome-devtools-mcp
chrome-devtools-mcp --version

2) 配置光标（手动）

编辑您的光标设置（显示的是 macOS 路径；请根据您的操作系统进行调整）：

~/Library/Application Support/Cursor/User/settings.json

选项A — 全局安装

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

选项 B — npx（自动更新）

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

3) 重启光标（手动）

就是这样。Cursor 会根据需要启动 MCP 服务器。

______________________________________________________________________

工具

你可以使用以下方法快速打开你的 Cursor 设置文件：

• macOS/Linux： ./tools/edit-settings.sh
• Windows： ./tools/edit-settings.ps1

这些脚本会检测您的操作系统路径，并打开或创建 settings.json 文件以供编辑。

高级配置

操作系统备注： 这个（或：该） settings.json 位置因操作系统而异（见上表）。编辑该文件并在更改后重启 Cursor。

使用 args 控制Chrome：

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "chrome-devtools-mcp",
      "args": ["--channel", "canary", "--viewport", "1280x720", "--headless"]
    }
  }
}

• --channel
• --headless
• --viewport 1280x720
• --browserUrl http://127.0.0.1:9222 （附加到现有的Chrome浏览器）

______________________________________________________________________

在Cursor中尝试这些提示

• “检查 https://example.com 的性能指标并提出改进建议。”
• “分析 https://github.com 的网络请求；列出缓慢的资源。”
• “检查页眉的DOM；显示计算后的样式和布局。”
• “对https://example.com网站进行移动截图，并标出布局问题。”
• “运行Lighthouse审核并总结核心网页指标。”

启用MCP时的预期行为：

• Chrome启动（或连接）
• 您能获取到真实的控制台/DOM/网络数据
• 你可以在Cursor内部截取屏幕截图和进行审计

______________________________________________________________________

为什么这比（其他）功能更丰富 browser-tools-mcp)

______________________________________________________________________

故障排除

1. 服务器无法启动

- 确认 Node.js 版本 ≥ 20： node -v - 确保全局安装成功： chrome-devtools-mcp --version - 已安装Chrome？尝试手动启动Chrome。

1. Cursor 无法看到服务器

- 验证 settings.json JSON语法。 - 编辑设置后重启光标。 - 在 macOS/Linux 上，请检查确切的设置路径。

1. 需要日志

   export DEBUG=*
   chrome-devtools-mcp --logFile /tmp/chrome-devtools-mcp.log

______________________________________________________________________

安全注意事项

这个MCP（可能是指某种中间件或组件协议）将浏览器内容暴露给Cursor内部的工具。请将其视为一个真实的调试器来使用：

• 不要打开包含敏感数据的页面。
• 为测试使用一个单独的Chrome配置文件。
• 在持续集成（CI）中，更倾向于使用无头（headless）+ 隔离的环境。

______________________________________________________________________

“Repo Structure”翻译成中文是“回购协议结构”或“逆回购协议结构”，具体取决于上下文中的金融或商业场景。在金融领域，这通常指的是用于短期资金借贷的回购协议（Repo）的结构安排

chrome-devtools-mcp-cursor-guide/
├─ README.md
├─ LICENSE
├─ .gitignore
├─ examples/
│  ├─ cursor-settings.json
│  ├─ prompts.md
├─ scripts/
│  ├─ quick-test.sh
│  └─ ci-headless-example.sh
├─ .github/
│  ├─ ISSUE_TEMPLATE/bug_report.md
│  └─ workflows/lint.yml
└─ assets/
   └─ cover.png  (placeholder)

______________________________________________________________________

路线图

• \[ \] 添加Windows/Linux设置路径表
• \[ \] 添加演示GIF（Lighthouse运行、DOM检查、控制台错误捕获）
• \[ \] 添加CI示例（GitHub Actions和无头Chrome）
• \[ \] 添加示例提示库

______________________________________________________________________

🤖 让 Cursor 为您创建 GitHub 仓库

如果你想要 使用 Cursor 创建公共 GitHub 仓库 从这个模板中导出，压缩成zip文件，然后我来帮你推送，把这段内容粘贴到Cursor聊天界面：

*“创建一个新 公共GitHub仓库 （被）命名 chrome-devtools-mcp-cursor-guide。\ 解压附带的压缩包，并初始化一个Git仓库。\ 添加所有文件，创建初始提交，并推送到GitHub（主分支）。\ 添加主题：光标、Chrome开发者工具、MCP（多线程计算平台/模型控制协议等，具体根据上下文确定）、人工智能开发、网页性能。\ 然后回复仓库的URL。”*

如果Cursor需要凭据，它会提示您进行GitHub身份验证。

致谢/贡献者名单

• Chrome DevTools MCP（多平台客户端）: https://github.com/ChromeDevTools/chrome-devtools-mcp
• 模型上下文协议：https://modelcontextprotocol.io
• Cursor 集成开发环境（IDE）: https://cursor.sh

______________________________________________________________________

许可证

MIT —— 参见 许可证。