让AI直接调试Chrome3分钟跑通浏览器调试MCP服务【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcpchrome-devtools-mcp 把 Chrome DevTools 的浏览器调试能力接到 MCP 协议上让 AI 编码助手直接操作真实 Chrome录性能 trace、查网络请求、读控制台报错50 多个工具随叫随到你只在对话框里下指令。你让 AI 修一个点击没反应的 bug它改了三轮代码最后来一句请你打开控制台看看报错。你一看接口 401跟它改的东西毫无关系。这就是没接上它的日常——AI 能写代码却看不见浏览器里发生了什么。一句话定位给 AI 装上一整套 DevTools传统浏览器自动化是你自己写 Puppeteer 脚本AI 负责生成脚本跑挂了还得你盯着调。chrome-devtools-mcp 把方向反过来——它本身就是一个 MCP 服务器AI 直接调用标准化工具完成看页面 → 操作 → 看结果全程不写一行脚本。类比一下别的方案是教 AI 开车它是直接把 AI 请进驾驶舱方向盘和仪表盘都是现成的。两分钟看懂它怎么工作两层结构各干一件事MCP 协议AI 助手与浏览器之间的标准对话通道。AI 发结构化指令服务器回格式化结果不绑死任何一家模型Claude、Cursor、Copilot 都能接。DevTools 协议 Puppeteer真正驱动 Chrome 的那只手。基于 Puppeteer 执行点击、填表等动作并自动等待操作结果落地避免按钮还没渲染就点的时序翻车。另有两条设计原则值得注意返回语义化摘要而非巨量原始数据比如直接给你LCP 3.2s而不是 5 万行 JSON报错自带上下文和修复建议AI 能自己接着改。 常用工具怎么调快照、性能、网络、控制台take_snapshot click / fill_form交互自动化场景让 AI 走一遍表单提交流程做什么take_snapshot 基于无障碍树生成带 uid 的页面文本快照click、fill_form 按 uid 定位操作多个字段一次填完效果官方文档写明 fill_form 比逐个 fill 更快、更稳、省调用轮次performance_start_trace / stop_trace / analyze_insight性能体检场景首页加载慢不知道慢在哪做什么开 trace 时自动 reload 页面采集数据停止后得到 insight 列表analyze_insight 逐条深挖效果覆盖 LCP、INP、CLS 三大 Core Web Vitals结论直接指向阻塞首屏的具体资源list_network_requests / get_network_request网络排查场景接口偶发失败需要完整请求/响应数据做什么按资源类型筛选最近请求get_network_request 拉请求头与响应体还能存成文件效果AI 直接读响应内容定位 401、字段缺失这类问题不用你手动复制 curllist_console_messages lighthouse_audit控制台与审计场景页面报错看不懂、要做无障碍自查做什么列出控制台消息堆栈经 source-map 映射回源码lighthouse_audit 出无障碍、SEO、最佳实践报告效果报错直接定位到源码文件行号不用人肉翻 DevTools 完整实战让 AI 给网站做性能体检任务找出你的网站首页为什么加载慢并让 AI 给出修复建议。全程你只在对话框里下指令工具由 AI 调用。验证环境发一句 Check the performance of https://developers.chrome.com客户端自动拉起浏览器并录一段 trace看到报告说明链路通了打开目标页让 AI 导航到你的首页它用 navigate_page 完成开始记录AI 调 performance_start_tracereloadtrue边加载边采数据停止并分析performance_stop_trace 结束后AI 用 performance_analyze_insight 展开 LCP 一项得到哪张图、哪段脚本拖了首屏的结论修复并复测AI 改完代码重新跑一遍 trace前后 LCP 数值直接对比留档take_screenshot 存一张修复后的页面截图端到端产物一份 LCP 前后对比的性能报告、可保存的原始 trace 文件、一张现场截图以及改好的代码。你全程没碰 DevTools。⚙️ 安装配置与使用心法前置条件Node.js LTS、Chrome 稳定版、npm。最小配置在 MCP 客户端配置里加一个服务器{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }不用 AI 客户端它也带实验性 CLI命令行直接驱动同一个后台服务npm i chrome-devtools-mcplatest -g chrome-devtools status验证方式在客户端输入Check the performance of https://developers.chrome.com浏览器自动打开并录 trace看到性能报告即安装成功。注意服务器连上不会立刻开浏览器第一次用到需要浏览器的工具时才自动启动。几条心法都是踩坑换来的安全MCP 客户端能读写这个浏览器实例里的所有数据别让它登着敏感账号跑连已有浏览器时用独立--user-data-dir环境加--isolated用临时配置目录关浏览器自动清理避免上次登录态污染下次运行省 token只做基础任务加--slim只暴露 3 个工具截图占上下文就配--screenshot-format jpeg比 PNG 小 3–5 倍隐私使用统计默认开启启动参数加--no-usage-statistics关闭深入排查装不好先看仓库里的docs/troubleshooting.md全部工具参数表在docs/tool-reference.md把 DevTools 交给 AI你只看结果。Agent 越强浏览器调试就越接近说一句话的事。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考