在 Cursor 中配置 chrome-devtools-mcp教程

在 Cursor 中配置 chrome-devtools-mcp 完整教程（实战版）

如果你想让 Cursor 直接“操控”浏览器（比如打开网页、点击按钮、输入内容、抓取页面信息），chrome-devtools-mcp 是目前非常好用的一套方案。你现在的配置已经是标准写法：

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

下面整理成一篇可直接发布的博客内容。

---

一、这套配置能做什么？

配置好后，Cursor 里的 AI Agent 可以通过 MCP 调用 Chrome DevTools 能力，例如：

• 打开新标签页并访问指定网址
• 在页面中输入文字、点击元素、提交表单
• 获取页面快照（a11y tree）、控制台日志、网络请求
• 自动化做一些“半测试 / 半操作”的浏览器任务

一句话：让 AI 不只是“写代码”，还能“动浏览器”。

---

二、前置条件

• 已安装 Node.js（建议 LTS 版本）
• 已安装 Cursor（最新版）
• 本机可正常启动 Chrome 浏览器
• 网络可访问 npm（首次会下载 chrome-devtools-mcp）

---

三、核心配置文件位置

你给出的文件是：

• c:\Users\zhouc\.cursor\mcp.json

这是 用户级 MCP 配置（全局生效）。也可以在项目级使用 .cursor/mcp.json（仅当前项目生效，具体看你的团队约定）。

---

四、最小可用配置（推荐）

将以下内容写入 mcp.json：

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

字段解释

• mcpServers：定义可用的 MCP 服务列表
• chrome-devtools：你给这个服务起的名字（可改，但建议语义清晰）
• command: "npx"：通过 npx 直接运行包
• args: ["-y", "chrome-devtools-mcp@latest"]：
  • -y：跳过交互确认
  • @latest：每次取最新版（省心，但可能带来版本变更）

---

五、配置完成后的验证方法

可用这类自然语言指令测试：

1. “打开 Chrome 并访问百度”
2. “在搜索框输入 abc 并搜索”
3. “抓取当前页面快照”

如果能正常执行，说明 MCP 服务已可用。