Chrome DevTools MCP 实用指南让 AI 助手直接接管 Chrome 完成调试与性能追踪【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp让 AI 编程助手改完前端代码后往往还要你自己打开浏览器手动验证。Chrome DevTools MCP包名chrome-devtools-mcp是一个模型上下文协议MCP服务器让 Claude、Cursor、Copilot、Gemini CLI 等编码助手能够直接控制和检查一个运行中的 Chrome 实例操作页面、查看控制台、录制性能追踪、截取屏幕截图不用在 IDE 和浏览器之间来回切换。运行前提Node.js LTS、npm以及稳定版或更新的 Chrome。官方仅支持 Chrome 和 Chrome for Testing其他 Chromium 内核浏览器行为不保证。它适合谁想让 AI 直接验证自己生成的页面而不是口述应该没问题需要排查网络请求、控制台报错或加载性能但不想手工逐项检查希望把浏览器操作写成可重复的步骤由代理自动执行在沙箱环境跑 LLM但浏览器在沙箱外如果你只写后端逻辑、几乎不碰页面渲染这个工具收益不大。三步跑通最小 MCP 配置第一步确认环境满足上面的三项前提。第二步在 MCP 客户端配置中添加入口。VS Code、Cursor、Copilot、Gemini CLI、Claude Code 等都支持标准 JSON 配置其中不少还提供一键安装命令如 Claude Code 的claude mcp add{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }第三步发一句验证提示例如检查 https://developers.chrome.com 的性能。客户端会自动打开浏览器并录一段性能追踪。注意只有在客户端真正调用需要浏览器的工具时浏览器才会启动连上服务器本身不会拉起 Chrome。如果只做基础浏览任务可以加--slim和--headless参数只暴露导航、脚本执行、截图 3 个工具上下文开销更小。按场景使用高频能力工具按类别组织完整清单见 docs/tool-reference.md页面操作click、fill、fill_form一次填多个表单项官方建议优先用它代替多次单独 fill、press_key、hover、drag、upload_file配合navigate_page、new_page、list_pages、wait_for处理多标签导航。操作基于 Puppeteer会自动等待执行结果减少脚本偶发失败。性能分析performance_start_trace开始录制、performance_stop_trace结束、performance_analyze_insight提取可执行的优化建议lighthouse_audit跑 Lighthouse 审计。调试排查list_console_messages查看控制台堆栈带 source map、take_screenshot截图、take_snapshot获取页面结构快照、evaluate_script执行脚本、list_network_requests/get_network_request查网络。进阶类别默认关闭需开关内存堆快照--memoryDebugging、扩展程序自动化--categoryExtensions、PWA 安装与启动--categoryPwa。连接已运行的 Chrome默认情况下服务器会启动一个专用 profile 的新 Chrome用户数据目录在~/.cache/chrome-devtools-mcp/chrome-profile同目录同一时间只能被一个浏览器使用。想共享登录态、手动/代理测试切换或把 LLM 关在沙箱里时可以改为连接现有实例用 --autoConnect 自动连接Chrome 144 支持先在chrome://inspect/#remote-debugging开启远程调试并按提示放行再在配置里追加--autoConnect参数即可。通过调试端口手动连接启动 Chrome 时加参数注意 Chrome 要求使用非默认数据目录/usr/bin/google-chrome --remote-debugging-port9222 --user-data-dir/tmp/chrome-profile-stable然后在 MCP 配置的 args 中加--browserUrlhttp://127.0.0.1:9222或用--wsEndpoint指定 WebSocket 端点。其他常用开关--headless无界面运行、--channel选 stable/canary/beta/dev、--isolated用临时 profile 且关闭后自动清理、--viewport1280x720设置初始窗口。多个代理共用一个服务器时默认的--pageIdRouting会要求页面级工具显式传pageId避免操作错标签页。常见问题与安全边界排查问题加--logFile写调试日志配合DEBUG*环境变量看详细输出更多已知限制见 docs/troubleshooting.md。服务器会把浏览器实例的内容暴露给 MCP 客户端能查看、修改其中任何数据。不要让它访问你不愿意与客户端共享的敏感账号和页面。打开远程调试端口后本机任何程序都能连接并控制该浏览器。端口开着时不要浏览敏感网站。使用统计默认开启可加--no-usage-statistics关闭性能工具默认会把追踪中的 URL 发给 CrUX API 获取真实用户数据可用--no-performance-crux禁用。下一步建议先用性能场景试跑一遍熟悉三个 performance 工具的完整输出格式只读浏览需求多的话切到--slim模式并参考 docs/slim-tool-reference.md不依赖 MCP 客户端时可全局安装后试用实验性 CLIchrome-devtools status查状态navigate_page等命令直接操作用完chrome-devtools stop停掉后台进程详见 docs/cli.md把fill_form、wait_for的用法过一遍这两处是自动化脚本里最容易踩坑的地方【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考