MCP:cursor、claude code接入chrome-devtools-mcp。
Chrome DevTools MCP(Chrome 开发者工具 MCP 协议)的核心作用是建立 AI 工具(如 Cursor、Claude 等)与 Chrome 浏览器 / 开发者工具之间的 “数据桥梁”,让 AI 能直接获取、分析甚至操控浏览器中的内容和调试信息,从而更精准地辅助开发工作。
·
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
会自动让你添加权限
然后会自动打开网站,然后进行操作和分析:
部分结果:
火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。
更多推荐
所有评论(0)