用 chrome-devtools-mcp 让 AI 接管浏览器5 分钟从配置到跑通性能报告【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp你写代码时用的 AI 编程助手Claude、Cursor 或 Copilot通常只看得到代码看不到页面。chrome-devtools-mcp 是一个 MCP 服务器它让 AI 真正打开 Chrome、操作页面、查网络请求、采集性能数据省掉你手动开 DevTools 的重复劳动。先解决一个问题AI 看不到页面你可能遇到过这些情况AI 给你写好了页面但渲染出来什么样还得你自己刷新浏览器确认某个网络请求一直报错手动开 DevTools 复制响应内容太机械页面卡慢不录 trace 根本说不清卡在哪个环节。这些问题有个共同点AI 缺一个能看、能摸的真实浏览器。5 分钟跑通环境要求很简单Node.js LTS、稳定版 Chrome、npm。第一步把下面这段配置贴进你的 MCP 客户端设置里。{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }第二步重新加载客户端发送提示词Check the performance of https://developers.chrome.com。客户端会自动启动 Chrome 并录下性能追踪看到报告就说明配置生效了。这段配置是通用的Gemini CLI、Claude Code、Cursor、Copilot、VS Code、Windsurf 等 10 客户端都适用各客户端的具体入口写法见 README 里的配置说明。它能帮你干三类事让 AI 自己操作页面它会先拍页面快照再用click、fill、fill_form点按钮、填表单用navigate_page换页面wait_for等结果落地。复杂的多字段表单一句话对话就能跑完。采集并分析性能数据performance_start_trace录一段追踪performance_analyze_insight再从中提取结论。它给你的不是一堆 JSON而是LCP 花了 3.2 秒瓶颈在 XX这类可以直接动手改的建议。远程诊断与调试list_network_requests列请求、take_screenshot截图、控制台日志直接读还能抓堆快照排查内存泄漏。出问题的现场你不用自己截图标注交给它看。完整工具清单在 工具参考。按需调优默认情况下服务器会自动拉起一个独立的 Chrome 实例。需要时再加参数如果你希望复用已经打开的 Chrome可以加--browserUrl指向调试地址如果不想弹窗口加--headless跑无头模式只想要导航、执行脚本、截图这三个基础工具加--slim即可如果不想上报使用统计加--no-usage-statistics。用之前先看这里⚠️ 隐私浏览器实例里的内容会原样暴露给 MCP 客户端。别让那个浏览器里留着登录态、账号、个人隐私。⚠️ 远程调试端口打开期间别用它访问敏感网站且它官方只支持 Google Chrome 和 Chrome for Testing 的稳定版。⚠️ 连不上的话先在终端跑npx chrome-devtools-mcplatest --help确认服务本身能启动更多常见报错和日志收集方法见 故障排查指南。这个项目的核心就一件事给 AI 一个能用的 Chrome把那些本该你手动做的浏览器工作交给它。打开你的 MCP 客户端配置把上面那段配置贴进去发第一个 prompt 试试。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 用 chrome-devtools-mcp 让 AI 接管浏览器：5 分钟从配置到跑通性能报告
用 chrome-devtools-mcp 让 AI 接管浏览器5 分钟从配置到跑通性能报告【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp你写代码时用的 AI 编程助手Claude、Cursor 或 Copilot通常只看得到代码看不到页面。chrome-devtools-mcp 是一个 MCP 服务器它让 AI 真正打开 Chrome、操作页面、查网络请求、采集性能数据省掉你手动开 DevTools 的重复劳动。先解决一个问题AI 看不到页面你可能遇到过这些情况AI 给你写好了页面但渲染出来什么样还得你自己刷新浏览器确认某个网络请求一直报错手动开 DevTools 复制响应内容太机械页面卡慢不录 trace 根本说不清卡在哪个环节。这些问题有个共同点AI 缺一个能看、能摸的真实浏览器。5 分钟跑通环境要求很简单Node.js LTS、稳定版 Chrome、npm。第一步把下面这段配置贴进你的 MCP 客户端设置里。{ mcpServers: { chrome-devtools: { command: npx, args: [-y, chrome-devtools-mcplatest] } } }第二步重新加载客户端发送提示词Check the performance of https://developers.chrome.com。客户端会自动启动 Chrome 并录下性能追踪看到报告就说明配置生效了。这段配置是通用的Gemini CLI、Claude Code、Cursor、Copilot、VS Code、Windsurf 等 10 客户端都适用各客户端的具体入口写法见 README 里的配置说明。它能帮你干三类事让 AI 自己操作页面它会先拍页面快照再用click、fill、fill_form点按钮、填表单用navigate_page换页面wait_for等结果落地。复杂的多字段表单一句话对话就能跑完。采集并分析性能数据performance_start_trace录一段追踪performance_analyze_insight再从中提取结论。它给你的不是一堆 JSON而是LCP 花了 3.2 秒瓶颈在 XX这类可以直接动手改的建议。远程诊断与调试list_network_requests列请求、take_screenshot截图、控制台日志直接读还能抓堆快照排查内存泄漏。出问题的现场你不用自己截图标注交给它看。完整工具清单在 工具参考。按需调优默认情况下服务器会自动拉起一个独立的 Chrome 实例。需要时再加参数如果你希望复用已经打开的 Chrome可以加--browserUrl指向调试地址如果不想弹窗口加--headless跑无头模式只想要导航、执行脚本、截图这三个基础工具加--slim即可如果不想上报使用统计加--no-usage-statistics。用之前先看这里⚠️ 隐私浏览器实例里的内容会原样暴露给 MCP 客户端。别让那个浏览器里留着登录态、账号、个人隐私。⚠️ 远程调试端口打开期间别用它访问敏感网站且它官方只支持 Google Chrome 和 Chrome for Testing 的稳定版。⚠️ 连不上的话先在终端跑npx chrome-devtools-mcplatest --help确认服务本身能启动更多常见报错和日志收集方法见 故障排查指南。这个项目的核心就一件事给 AI 一个能用的 Chrome把那些本该你手动做的浏览器工作交给它。打开你的 MCP 客户端配置把上面那段配置贴进去发第一个 prompt 试试。【免费下载链接】chrome-devtools-mcpChrome DevTools for coding agents项目地址: https://gitcode.com/GitHub_Trending/chr/chrome-devtools-mcp创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考