Chrome DevTools AI前端性能优化协作

Chrome DevTools 内置的 Gemini，在网站性能分析上确实非常方便。

这次优化个人博客的照片墙，我尝试了一种新的协作方式：让 IDE 里的项目 AI 负责修改代码，让 Chrome DevTools 里的 Dev AI 负责检查和审计。效果比我预想的好。

注：文中的 Dev AI，指 Chrome 开发者工具（F12）里的 AI Assistance。

本人也非前端开发，纯vibe coding

最近在改个人博客的关于页面，想做一个以图片为主的照片墙。找了一些现成模板，都不太符合我的理念，最后还是让 AI 手搓了一个。

但照片比较多，页面加载非常慢。

我平时会直接用 iPhone 访问本地调试页面，感受实际效果。结果发现，微信里打开页面会不停刷新，偶尔才能进去；用 Safari 虽然能正常显示，但快速下滑时也经常崩溃。

我用 Gemini 3.8 Flash，在 Google Antigravity 里来回问了好几轮，还是没找到根因。每次给出的方案都信心满满，但问题始终没有解决。

后来，我在 Chrome 开发者工具里发现了一个 AI Assistance 功能。之前一直以为它和 Gemini 侧栏差不多，就没怎么用过。

实际用下来，最大的优势是它可以结合开发者工具里的 Trace 数据分析问题。

通过它的分析，我发现了一些异常，但它建议我继续用 Safari 调试。

于是，我把 iPhone 连接到 Mac，通过 Mac 上的 Safari 检查网页，终于发现了一个关键问题：页面内存占用高达 780MB。

顺便说一句，我还尝试过让 Antigravity 通过 Safari 的 MCP 进行调试，但效果一般，一直在通过截图获取信息，后来就放弃了。

找到内存问题后，我把信息反馈给 Dev AI，让它继续检查代码。

它发现，主要问题出在图片加载上。

此前，项目 AI 已经告诉我图片压缩优化完成了，但 Dev AI 检查后发现，压缩实际上并没有生效。

我把这个问题交回 Antigravity，让项目 AI 继续排查。最后发现，是图片压缩的规则匹配出了问题。

修复之后，我再让 Dev AI 检查修改结果。之后每次项目 AI 调整完代码，我都会再用 Dev AI 检查一遍。

最终，影集页面的内存占用从约 770MB 降到了 350MB 左右，加载速度也有了明显提升。

这次让我意识到，AI 不一定非要在同一个 Agent 里完成所有工作。

项目 AI 的优势是了解整个项目的架构和上下文，知道代码应该怎么改。

Dev AI 的优势是能结合网页实际运行情况和调试数据，独立分析问题。

两者的局限也很明显：Dev AI 不太了解项目架构，给出的建议需要项目 AI 再评估；而项目 AI 即使了解整个项目，也不一定能准确发现运行时的问题。

所以，我现在的分工是：

我目前更倾向于让两个 AI 在独立的窗口中协作，而不是把所有事情都放在同一个聊天框里。

一方面，可以避免不同任务不断堆叠上下文；另一方面，项目修改和网页测试各自独立，问题更容易定位。

当然，这种方式需要人工在两个窗口之间传递信息，但我觉得是值得的。

至少这次，它解决了一个项目 AI 来回折腾多轮都没能解决的问题。

后续我还打算尝试 Dev AI 的 MCP 能力，看看能不能进一步减少人工介入。

目录