MCP：cursor、claude code接入chrome-devtools-mcp。

文章目录

• chrome-devtools-mcp介绍
• 配置
• 接入
• [claude code](#claude code)
• cursor
• 注意
• 测试

chrome-devtools-mcp介绍

git地址：https://github.com/ChromeDevTools/chrome-devtools-mcp

Chrome DevTools MCP（Chrome 开发者工具 MCP 协议）的核心作用是建立 AI 工具（如 Cursor、Claude 等）与 Chrome 浏览器 / 开发者工具之间的 "数据桥梁"，让 AI 能直接获取、分析甚至操控浏览器中的内容和调试信息，从而更精准地辅助开发工作。

配置

node22+版本

nvm install 22

接入

claude code

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

cursor

进入设置

点击mcp添加

添加

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

注意

1. 需要开启梯子。

2. cursor使用的是你默认的node，把node默认设置为22。

   nvm alias default 22

测试

prompt：

Check the performance of https://developers.chrome.com, use mcp

会自动让你添加权限

然后会自动打开网站，然后进行操作和分析：

部分结果：