5分钟上手 Chrome DevTools MCP
让AI助手（如Claude、Cursor）连接并控制Chrome浏览器，实现浏览器自动化和调试
环境要求
支持的操作系统
运行环境
所需工具
安装Node.js包
操作步骤
安装Chrome DevTools MCP
通过npm全局安装MCP服务器
npm install -g chrome-devtools-mcp预期结果：看到安装成功的提示信息，包含版本号
如果遇到权限问题，可以在命令前加上sudo（macOS/Linux）或以管理员身份运行（Windows）
配置MCP客户端（以VS Code/Copilot为例）
在VS Code中配置MCP服务器
code --install-extension ms-vscode.mcp-server-management预期结果：扩展安装成功，可以在VS Code扩展面板中看到MCP服务器管理
不同AI客户端配置方式不同，请参考README中的对应配置
添加MCP服务器配置
在VS Code中创建MCP服务器配置
预期结果：成功添加chrome-devtools-mcp服务器配置
1. 按Ctrl+Shift+P打开命令面板 2. 搜索并选择"MCP: Add New Server" 3. 选择"Local"类型 4. 输入命令：npx -y chrome-devtools-mcp@latest 5. 保存配置
测试连接
向AI助手发送测试指令，验证MCP服务器是否正常工作
预期结果：AI助手能够响应并执行浏览器操作
在AI聊天框中输入："请打开浏览器并记录一个性能追踪"
验证成功
确认MCP服务器已正确配置并可以控制Chrome浏览器
快速提示
首次使用时，MCP服务器会自动启动Chrome浏览器，请确保Chrome已安装
如果不想发送使用统计数据，启动时添加--no-usage-statistics标志
处理敏感信息时请谨慎使用，因为AI可以访问浏览器中的所有内容
常见问题
Chrome浏览器没有自动启动
1. 确保Chrome已安装且版本符合要求 2. 手动启动Chrome并确保没有其他Chrome实例在运行 3. 尝试重启MCP服务器
AI助手无法识别浏览器工具
1. 检查MCP服务器配置是否正确 2. 确认MCP服务器正在运行 3. 重启AI客户端和MCP服务器
权限错误或安装失败
1. 使用管理员权限运行安装命令 2. 检查Node.js版本是否符合要求 3. 清理npm缓存：npm cache clean --force
下一步
探索更多工具
尝试使用其他工具如性能分析、网络请求监控、自动化表单填写等
连接到已运行的Chrome实例
学习如何连接到已运行的Chrome浏览器进行调试
查看工具参考文档
了解所有可用工具的功能和使用方法
相关项目推荐
freeCodeCamp/freeCodeCamp
freeCodeCamp.org开源代码库与课程体系，免费学习数学、编程与计算机科学
kamranahmedse/developer-roadmap
提供交互式学习路线图、指南和其他教育内容，帮助开发者在职业生涯中成长。
openclaw/openclaw
属于你个人的AI助手。全操作系统支持。全平台兼容。龙虾之道。🦞
vuejs/vue
此仓库为Vue 2版本。Vue 3版本请访问https://github.com/vuejs/core
microsoft/vscode
Visual Studio Code
n8n-io/n8n
具备原生AI能力的公平代码工作流自动化平台。支持可视化构建与自定义代码，可选自托管或云端部署，集成400多种服务。