發布日期：2026 年 11 月 10 日
WeTV 是騰訊的國際影片串流平台，為東南亞和其他全球市場的觀眾提供戲劇、動畫和綜藝節目。對於以影片為主的網站，效能決定了觀眾是否會留下來、搜尋引擎是否會顯示內容，以及播放是否流暢。
WeTV 網頁工程團隊不會發布未達效能目標的程式碼。長期以來，為了維持這條線，開發人員必須在每次建構失敗時，停止手邊的工作，開啟 Chrome，然後手動剖析網頁。追蹤並修正一個迴歸問題大約需要四小時。
現在，AI 程式設計代理會在 CI/CD 管道中執行這項工作。透過代理專用 Chrome 開發人員工具，代理會在實際運作的瀏覽器中檢查頁面。在 Modern Web Guidance 的協助下，代理會根據目前的網路平台標準編寫修正程式。現在，工作流程會自動診斷並解決 90% 的失敗效能測試，從檢查失敗到驗證修正的時間也從四小時縮短到 30 分鐘，包括完整建構和手動評估。
挑戰：開發人員在編輯器和瀏覽器之間來回切換
WeTV 工程師已在 IDE 中使用 AI 程式設計工具。這些工具可以編寫程式碼，但無法查看程式碼在瀏覽器中執行後的結果。因此，工作分為兩部分。工程師在編輯器中編寫程式碼，然後切換至 Chrome 部署、檢查及驗證程式碼。每次修正都必須手動重複這個循環。
在發布階段，拆分作業造成的影響最大。WeTV 的 CI/CD 管道會對每個版本執行效能追蹤，並將 Cumulative Layout Shift (CLS) 保持在 0.1 以下。當建構作業超過該行時，管道會標記該作業，但仍需手動找出原因。工程師必須開啟 Chrome 開發人員工具、記錄追蹤記錄、找出移動的元素、將結果帶回編輯器、編寫修正程式，然後再次執行檢查。單一 CLS 迴歸大約需要四小時的工程時間。
團隊需要一個能同時處理這兩項工作的代理：查看執行中的網頁，然後根據已知標準修正程式碼。
解決方案：將代理連結至瀏覽器和網路標準
WeTV 將效能驗證納入合併要求 (MR) 流程。開發人員開啟 MR 時，CI/CD 管道會啟動環境，讓 AI 程式設計代理在本機執行，並提供團隊 IDE 工具所缺乏的兩項功能：
- 代理專用 Chrome 開發人員工具：執行 Model Context Protocol (MCP) 伺服器，並將代理連至實際運作的 Chrome 執行個體。代理程式可以記錄效能追蹤記錄 (以及其他 Chrome 開發人員工具功能)，並檢查前端程式碼的實際算繪方式，就像開發人員在開發人員工具中操作一樣。
- Modern Web Guidance：這項代理技能包含網頁平台最佳做法和瀏覽器相容性資料。它會引導代理程式遠離舊版模式，並採用以現代網路平台功能建構的修正程式。
代理專用開發人員工具會告訴代理哪裡出錯，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 會指示代理程式搭配 insightName: 'CLSCulprits' 使用 performance_analyze_insight，以便回報確切的元素、時間和分數，而非一般可疑項目。
在下方影片中，執行提示詞後，代理會搜尋 Modern Web Guidance 中的相關指南，使用與 CLS 相關的新型網路功能實作修正，並使用代理專用 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 在 CI/CD 工作流程中加入代理專用 Chrome 開發人員工具和 Modern Web Guidance 後，工程效率和版面配置穩定性都有顯著提升：
- 端對端偵錯和解決時間縮短 87% (從 4 小時縮短至 30 分鐘)。
- 90% 的週期性效能迴歸問題會自動診斷並解決。
工程師不必再花半個工作天進行剖析。當建構作業超過門檻時，代理會讀取追蹤記錄、編寫修正程式、進行測試，並將經過驗證的修補程式交給人工審查員。雖然最終決定權仍在人類手中，但他們可以從已通過失敗檢查的修正開始。
由於 CLS 迴歸問題會在合併要求中修正，因此不會進入正式環境。這樣一來，網頁就能維持在 0.1 的目標值以下，保護 WeTV 的搜尋能見度，並移除在週期後期封鎖發布的常見原因。
團隊課程
WeTV 的設定是針對其堆疊，但其背後的模式適用於大多數根據效能限制發布的團隊：
- 在發生失敗的位置執行代理程式。WeTV 會透過合併要求觸發代理，因此不必有人注意到檢查失敗，並手動啟動工作階段。
- 讓代理在編輯前先診斷。先要求追蹤記錄和具體原因，就能針對實際元素進行修正，而非憑空猜測。
- 將執行階段資料與標準配對。追蹤記錄會告訴代理哪個元素移動了。Modern Web Guidance 會指出哪項修正符合目前的平台做法。
- 要求提供證明。重新執行失敗的追蹤記錄，是服務專員證明修正有效的依據。P2ER 在強制性經驗驗證規則中也遵循相同原則。
- 落實人工介入迴路。代理會進行調查，工程師則會審查已通過檢查的修補程式。
意見回饋和未來計畫
WeTV 發現，將代理專用 Chrome 開發人員工具的即時執行階段遙測資料，與 Modern Web Guidance 的標準化規則搭配使用，可將手動效能分析從發布程序中移除，同時確保代理的程式碼變更符合目前的網路平台標準。
「無論是速度還是品質，結果都非常有效。代理專用 Chrome 開發人員工具和 Modern Web Guidance 提供的診斷洞察，為我們修正複雜的版面配置問題提供了可靠的參考依據。每次修正後，我們都會進行嚴格驗證，目前的成功率和穩定性大幅提升了我們對發布版本的信心。」
— WeTV (騰訊) 工程主管鄭陽傑
接下來，WeTV 工程團隊計劃在即將推出的程式碼版本中，將代理專用 Chrome 開發人員工具和 Modern Web Guidance 導入端對端測試。
資源
如要設定類似的工作流程，請參閱下列資源：