给AI助手装上真实浏览器Chrome DevTools MCP 浏览器自动化与性能分析接入手册【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpAI写完了代码谁来替它打开浏览器验证助手吐出一串DOM操作页面是否正常渲染、控制台有没有报错它自己确认不了。Chrome DevTools MCP 是一个基于 MCP 协议的服务器构建在 Puppeteer Chrome DevTools 之上让 Gemini、Claude、Cursor、Copilot 这类 AI 编程助手能够控制并检查一个真实的 Chrome 实例。5 分钟跑起来在客户端的 MCP 服务器配置里粘贴以下最小配置{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }重启客户端让 AI“检查 https://developers.chrome.com 的性能”能返回追踪结果即接入成功。它到底能替你干什么17 个工具三类分类工具数代表工具解决什么问题输入自动化8click、fill、press_key、upload_file点击、表单填写、按键、文件上传导航自动化6navigate_page、new_page、wait_for跳转、开新页、等待条件性能分析3performance_start_trace、performance_stop_trace、performance_analyze_insight抓性能追踪、提取洞察各工具的参数细节见 工具参考。性能追踪可随时停止performance_analyze_insight直接给结论而非原始数据网络请求与控制台消息用list_network_requests、get_console_message逐条查看操作经wait_for等结果出现脚本不抢跑。10 客户端兼容清单客户端客户端Gemini CLIGemini Code AssistClaude CodeAntigravityCursorCopilotVS CodeVisual StudioWarpWindsurf进阶连接指定浏览器与通道不想让它新起一个浏览器时用以下参数连接运行中的 Chrome 或改变启动方式完整说明见 CLI 文档参数用途--browserUrl连接运行中的 Chrome如http://127.0.0.1:9222--wsEndpoint经 WebSocket 端点连接与上项二选一--headless无头模式不弹 UI 窗口--channel切换 Chrome 通道--logFile交互日志写文件便于排查通道四选一stable默认、canary、beta、dev。安全边界接入后浏览器实例内的内容对 MCP 客户端可见别在其中登录或处理不愿共享给客户端的敏感数据远程调试端口打开期间连接运行中 Chrome 的前提该实例中不要浏览敏感网站。两个实战示例性能体检把“检查 https://developers.chrome.com 的性能”复制发给 AI它会自动完成追踪开始、停止与洞察分析返回结论。自动化调试流程不稳时在 args 里追加--logFile记录交互日志打开DEBUG*环境变量出详细日志配合 故障排查 文档定位卡在哪一步。接入链路很短npx 拉起来、JSON 挂上去、17 个工具覆盖输入、导航与性能。下一步把上面的配置块粘进客户端的 MCP 设置先跑一遍那条性能检查。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考