MCP：cursor、claude code接入chrome-devtools-mcp。
文章目录
- chrome-devtools-mcp介绍
- 配置
- 接入
- 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"]}}
}
注意
- 需要开启梯子。
- cursor使用的是你默认的node，把node默认设置为22。
nvm alias default 22
测试
prompt：
Check the performance of https://developers.chrome.com, use mcp
会自动让你添加权限
然后会自动打开网站，然后进行操作和分析：
部分结果：
