发布时间：2026 年 11 月 10 日
WeTV 是腾讯的国际视频在线播放平台。它为东南亚和其他全球市场的观看者提供电视剧、动漫和综艺节目。对于以视频为核心的网站，性能决定了观看者是否会留下来、搜索引擎是否会展示内容，以及播放是否流畅。
WeTV Web 工程团队不会发布未达到性能目标的代码。长期以来，为了坚守这条底线，开发者不得不停下手中的工作，打开 Chrome，并在每次构建失败时手动分析页面。追踪并修复一个回归问题大约需要 4 个小时。
现在，AI 编码智能体会在 CI/CD 流水线中完成这项工作。借助面向智能体的 Chrome 开发者工具，智能体可以在实时浏览器中检查网页。借助 Modern Web Guidance，它会编写符合当前 Web 平台标准的修复代码。现在，该工作流可自动诊断并解决 90% 的失败性能测试，从检查失败到验证修复的时间从 4 小时缩短至 30 分钟，其中包括完整构建和手动评估。
挑战：开发者在编辑器和浏览器之间来回切换
WeTV 工程师已经在其 IDE 中使用了 AI 编码工具。这些工具可以编写代码，但无法查看代码在浏览器中运行后的效果。所以工作一分为二。工程师在编辑器中编写代码，然后切换到 Chrome 进行部署、检查和验证。每次修复都意味着要手动重复该循环。
拆分对发布控制关口的影响最大。WeTV 的 CI/CD 流水线会对每个版本运行性能跟踪，并将累积布局偏移 (CLS) 保持在 0.1 或更低。 当 build 越过该线时，流水线会对其进行标记，但仍需手动查找原因。工程师必须打开 Chrome 开发者工具，记录跟踪记录，找到移动的元素，将该发现带回编辑器，编写修复程序，然后再次运行检查。一次 CLS 回归大约需要四个小时的工程时间。
该团队需要一个能够同时处理这两部分工作的智能体：查看正在运行的页面，然后将代码修复到已知标准。
解决方案：将智能体连接到浏览器和网络标准
WeTV 将性能验证纳入其合并请求 (MR) 流程。当开发者打开 MR 时，CI/CD 流水线会启动一个环境，其中 AI 编码智能体在本地运行，并具备团队 IDE 工具所不具备的两项功能：
- 面向智能体的 Chrome 开发者工具：运行 Model Context Protocol (MCP) 服务器，并将智能体连接到实时 Chrome 实例。智能体可以记录性能跟踪记录（以及其他 Chrome 开发者工具功能），并检查前端代码的实际渲染方式，就像开发者在开发者工具中一样。
- Modern Web Guidance：一项智能体技能，包含 Web 平台最佳实践和浏览器兼容性数据。它会引导代理避开旧版模式，并采用基于现代 Web 平台功能构建的修复方案。
面向智能体的开发者工具会告知智能体哪里出了问题。Modern Web Guidance 会影响其修复方式。
实际示例：分集播放页面上的布局偏移
在一次合并请求期间，智能体在桌面版剧集播放页面上运行了 performance_start_trace 工具。跟踪记录显示 CLS 为 0.39，几乎是 0.1 限制的四倍。
让代理在编辑前先进行诊断
WeTV 不允许代理即兴发挥。驱动工作流的提示会指示它在接触任何代码之前先诊断问题，并根据《Modern Web Guidance》检查其发现结果，而不是依赖于模型默认生成的内容。
以下是 WeTV 团队使用的提示示例：
Context:
"The CLS (Cumulative Layout Shift) of this page needs inspection. Diagnose
first, then modify the code, do not guess."
Mandatory Execution Steps:
1. Performance Trace: Use Chrome DevTools for agents to run performance traces
on both Desktop and Mobile views.
2. Identify Culprits: Use CLSCulprits insight to pinpoint the exact DOM elements
causing shifts (capture class/id, timing, and score).
3. Use web best practices for performance and CSS to optimize CLS.
4. Multi-Agent Parallelism: Enable parallel agents for efficiency:
- Agent A: Investigate Player/Main Layout SSR placeholders.
- Agent B: Investigate Sidebar Ads, VIP buttons, Tabs, and late-injected
lists.
- Agent C: Investigate Fonts and other minor factors.
Constraint: Each agent modifies only files within its scope to prevent
conflicts.
5. Root Cause Confirmation: Confirm the root cause before applying fixes.
Prioritize reserving space over changing interaction semantics just to fix
CLS.
6. Verification: After modification, re-test CLS via equivalent CSS injection
or local build. Target: CLS < 0.1.
此提示中有两个部分起着关键作用。“先诊断，再修改代码”可防止智能体只解决表面问题。第 2 步指示代理将 performance_analyze_insight 与 insightName: 'CLSCulprits' 搭配使用，以便报告确切的元素、时间和得分，而不是一般性的怀疑。
在以下视频中，执行提示后，代理会在 Modern Web Guidance 中搜索相关指南，以使用与 CLS 相关的现代 Web 功能实现修复，并使用 Chrome 开发者工具代理打开 Chrome 浏览器实例并记录性能跟踪。
这种运行时诊断与结构化指导相结合的方式，可实现对复杂布局偏移的自动修复。以下是自动化工作流修复的问题示例
找出根本原因
跟踪结果指向了视频播放器。WeTV 在服务器上呈现播放器，但播放器的容器未为其预留任何高度。当客户端对网页进行水合时，容器的高度会扩大，其周围的内容也会发生偏移。
应用基于标准的修复
解决方法是在服务器端渲染期间预留空间，以便容器在水合之前就已具有正确的高度。以下是智能体参考 Modern Web Guidance css-layout 指南编写的修复示例：
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
代理应用 CSS 后，流水线重新构建了页面，代理再次运行了相同的跟踪。只有当 CLS 低于 0.1 时，补丁才会进入人工审核阶段。
影响：发布速度更快，布局更稳定
WeTV 将 Chrome 开发者工具（代理）和 Modern Web Guidance 添加到其 CI/CD 工作流后，在工程效率和布局稳定性方面取得了可衡量的改进：
- 端到端调试和解决时间缩短了 87%（从 4 小时缩短到 30 分钟）。
- 90% 的周期性性能回归问题都会自动诊断和解决。
工程师们不再需要花费半个工作日的时间来分析性能。当构建版本超出阈值时，智能体会读取跟踪记录、编写修复程序、进行测试，并将经过验证的补丁交给人工审核员。最终决定仍由人工做出，但他们会从已通过失败检查的修复开始。
由于 CLS 回归问题会在合并请求中得到修复，因此不会影响到生产环境。这样可以使网页保持在 0.1 的目标值以下，保护 WeTV 的搜索曝光度，并消除在周期后期阻止发布的常见原因。
团队课程
WeTV 的设置是针对其技术栈量身定制的，但其背后的模式适用于大多数根据性能来控制发布的团队：
- 在发生故障的位置运行代理。WeTV 会通过合并请求触发代理，因此无需有人注意到检查失败并手动启动会话。
- 让智能体先诊断，再修改。先请求跟踪和指定罪魁祸首，可以生成针对实际元素而非猜测的修复。
- 将运行时数据与标准配对。跟踪记录会告知代理哪个元素发生了移动。Modern Web Guidance 会告诉它哪种修复方式符合当前的平台实践。
- 要求提供证明。重新运行失败的同一跟踪记录是代理证明修复有效的证据。P2ER 在其强制性经验验证规则中遵循相同的原则。
- 保持人机协同。智能体负责调查，工程师负责审核已通过检查的补丁。
反馈和未来计划
WeTV 发现，将 Chrome 开发者工具中代理的实时运行时遥测数据与 Modern Web Guidance 中的标准化规则相结合，可以消除发布流程中的手动性能分析，同时使代理的代码更改符合当前的 Web 平台标准。
“无论是在速度还是质量方面，结果都非常出色。Chrome 开发者工具提供的诊断数据分析和现代 Web 指南为我们修复复杂的布局问题提供了可靠的参考。每次修复后，我们都会进行严格的验证，当前的成功率和稳定性显著提升了我们对发布的信心。”
—Yangjie Zheng，WeTV（腾讯）工程主管
接下来，WeTV 工程团队计划在即将发布的代码的端到端测试中引入面向智能体的 Chrome 开发者工具和 Modern Web Guidance。
资源
如需设置类似的工作流，请参阅以下资源：