ChromeDevTools / chrome-devtools-mcp

问题：开发者需要手动在Chrome DevTools中录制性能追踪、分析网络请求和运行时性能，过程繁琐且难以自动化。

方案：通过AI助手调用MCP服务器，自动录制性能追踪、分析网络瀑布图并生成性能报告，实现一键式性能分析。

示例：让AI助手自动打开目标网页，录制Lighthouse性能追踪，分析关键性能指标（FCP、LCP等），并生成优化建议报告。

问题：调试复杂的前端问题时，开发者需要反复在浏览器控制台、网络面板和源代码之间切换，效率低下。

方案：AI助手可以直接通过MCP服务器检查控制台错误（带源码映射）、分析网络请求状态和内容，快速定位问题根源。

示例：网页加载异常时，让AI助手自动检查控制台错误堆栈、分析失败的XHR/Fetch请求，并截图当前页面状态供分析。

问题：传统的浏览器自动化脚本（如Puppeteer）编写和维护复杂，需要处理各种等待条件和异常情况。

方案：AI助手通过MCP服务器控制浏览器，利用Puppeteer的自动等待机制，智能执行点击、输入、导航等操作并验证结果。

示例：让AI助手自动完成一个多步骤的表单填写和提交流程，在每个步骤后检查页面状态，确保操作成功执行。

问题：实验室性能数据与真实用户体验脱节，开发者难以获得全面的性能洞察。

方案：项目可自动将性能追踪数据发送到Google CrUX API，获取真实用户的性能数据，提供实验室与现场数据的对比分析。

示例：分析某电商网站商品详情页时，不仅获得实验室性能指标，还能看到真实用户在该页面的LCP、FID等核心Web指标数据。