Gepubliceerd: 10 november 2026
WeTV is het internationale videostreamingplatform van Tencent. De service biedt dramaseries, anime en variétéshows aan kijkers in Zuidoost-Azië en andere wereldwijde markten. Voor een site die is gebouwd rond video, bepaalt de prestatie of kijkers blijven, of zoekmachines de content tonen en of het afspelen soepel verloopt.
Het webengineeringteam van WeTV levert geen code die de prestatiedoelen niet haalt. Lange tijd betekende het vasthouden van die lijn dat een ontwikkelaar moest stoppen met wat hij aan het doen was, Chrome moest openen en de pagina handmatig moest profileren elke keer dat een build de controle niet doorstond. Het opsporen en oplossen van één regressie kostte ongeveer 4 uur.
Tegenwoordig doet een AI-coderingsagent dat werk als onderdeel van de CI/CD-pipeline. Met Chrome DevTools voor agents inspecteert de agent de pagina in een live browser. Met Modern Web Guidance schrijft de agent oplossingen die voldoen aan de huidige standaarden voor webplatforms. De workflow stelt nu automatisch een diagnose en lost 90% van de mislukte prestatietests op. De tijd tussen een mislukte controle en een geverifieerde oplossing is gedaald van 4 uur naar 30 minuten, inclusief volledige build en handmatige evaluatie.
De uitdaging: een ontwikkelaar die vastzit tussen de editor en de browser
De engineers van WeTV gebruikten al AI-coderingstools in hun IDE. Die tools konden code schrijven, maar ze konden niet zien wat de code deed als deze in een browser werd uitgevoerd. Het werk werd dus in 2 delen gesplitst. Ontwikkelaars schrijven code in de editor en schakelen daarna over naar Chrome om de code te implementeren, te inspecteren en te verifiëren. Voor elke oplossing moest ik die lus opnieuw handmatig doorlopen.
De splitsing was het pijnlijkst bij de releasegate. De CI/CD-pipeline van WeTV voert prestatietraces uit voor elke release en houdt de Cumulative Layout Shift (CLS) op 0,1 of lager. Als een build die grens overschreed, werd deze gemarkeerd door de pipeline, maar de oorzaak moest nog steeds handmatig worden gevonden. Een engineer moest Chrome DevTools openen, een trace opnemen, het element vinden dat was verplaatst, die bevinding terugbrengen naar de editor, een oplossing schrijven en de controle opnieuw uitvoeren. Een enkele CLS-regressie kostte ongeveer 4 uur aan engineeringstijd.
Het team had een agent nodig die beide delen van de taak kon uitvoeren: de actieve pagina bekijken en de code aanpassen aan een bekende standaard.
De oplossing: de agent koppelen aan de browser en aan webstandaarden
WeTV heeft de prestatieverificatie verplaatst naar het proces voor samenvoegingsverzoeken (MR). Als een ontwikkelaar een MR opent, start de CI/CD-pipeline een omgeving waarin de AI-coderingsagent lokaal wordt uitgevoerd met 2 mogelijkheden die de IDE-tools van het team niet hadden:
- Chrome DevTools voor agents: Voert een Model Context Protocol-server (MCP-server) uit en verbindt de agent met een live Chrome-instantie. De agent kan prestatiesporen opnemen (naast andere Chrome DevTools-functies) en controleren hoe de frontend-code daadwerkelijk wordt weergegeven, op dezelfde manier als een ontwikkelaar dat zou doen in DevTools.
- Modern Web Guidance: Een agentvaardigheid die best practices voor webplatforms en gegevens over browsercompatibiliteit bevat. De agent wordt weggeleid van verouderde patronen en naar oplossingen die zijn gebaseerd op moderne webplatformfuncties.
DevTools voor agents vertelt de agent wat er is misgegaan. Modern Web Guidance bepaalt hoe de agent het probleem oplost.
Voorbeeld uit de praktijk: een indelingsverschuiving op de afspeelpagina van een aflevering
Tijdens een samenvoegingsverzoek heeft de agent de tool performance_start_trace uitgevoerd op de afspeelpagina van de desktopaflevering. De trace registreerde een CLS van 0,39, bijna 4 keer de limiet van 0,1.
De agent vragen een diagnose uit te voeren voordat deze bewerkingen uitvoert
WeTV staat niet toe dat de agent improviseert. De prompt die de workflow aanstuurt, vertelt de agent om het probleem te diagnosticeren voordat deze de code aanraakt en om de bevindingen te checken aan de hand van Modern Web Guidance in plaats van te vertrouwen op wat het model standaard zou genereren.
Hier is een voorbeeld van een prompt die het WeTV-team heeft gebruikt:
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 delen van deze prompt zijn het belangrijkst. Met 'Eerst een diagnose stellen, dan de code aanpassen' voorkom je dat de agent symptomen oplost. Stap 2 geeft de agent aan dat deze performance_analyze_insight met insightName: 'CLSCulprits' moet gebruiken, zodat deze het exacte element, de timing en de score rapporteert in plaats van een algemeen vermoeden.
In de volgende video zoekt de agent, wanneer de prompt wordt uitgevoerd, naar de relevante handleiding in Modern Web Guidance om oplossingen te implementeren met moderne webfuncties die verband houden met CLS. De agent gebruikt Chrome DevTools voor agents om een Chrome-browserinstantie te openen en een prestatietrace op te nemen.
Deze combinatie van runtime-diagnostische gegevens en gestructureerde richtlijnen maakt geautomatiseerde oplossingen voor complexe verschuivingen in de indeling mogelijk. Hier is een voorbeeld van een probleem dat is opgelost door de geautomatiseerde workflow.
De hoofdoorzaak vinden
De trace wees naar de videospeler. WeTV rendert de speler op de server, maar de container van de speler heeft geen hoogte gereserveerd. Toen de client de pagina hydrateerde, werd de container hoger en verschoof de content eromheen.
Een op standaarden gebaseerde oplossing toepassen
De oplossing is om de ruimte te reserveren tijdens de weergave aan de serverzijde, zodat de container al de juiste hoogte heeft vóór de hydratatie. Hieronder vind je een voorbeeld van een oplossing die de agent heeft geschreven met verwijzing naar de css-layout-handleiding van Modern Web Guidance:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Nadat de agent de CSS had toegepast, heeft de pipeline de pagina opnieuw opgebouwd en heeft de agent dezelfde trace opnieuw uitgevoerd. Alleen als de CLS lager was dan 0,1, werd de patch doorgegeven aan een menselijke beoordelaar.
Impact: Snellere releases en stabiele lay-outs
WeTV behaalde meetbare verbeteringen in de efficiëntie van engineering en de stabiliteit van de vormgeving toen ze Chrome DevTools voor agents en Modern Web Guidance toevoegden aan de CI/CD-workflow:
- 87% minder tijd nodig voor end-to-end foutopsporing en oplossing (van 4 uur naar 30 minuten).
- 90% van alle terugkerende prestatieproblemen wordt automatisch gediagnosticeerd en opgelost.
Engineers verliezen niet langer een halve werkdag aan profilering. Als een build de drempelwaarde overschrijdt, leest de agent de trace, schrijft een oplossing, test deze en overhandigt een geverifieerde patch aan een menselijke reviewer. Mensen nemen nog steeds de uiteindelijke beslissing, maar ze beginnen met een oplossing die de mislukte controle al heeft doorstaan.
Omdat CLS-regressies worden opgelost in het samenvoegingsverzoek, bereiken ze de productie niet. Zo blijven pagina's onder het doel van 0, 1, wordt de zichtbaarheid van WeTV in de zoekresultaten beschermd en wordt een veelvoorkomende reden verwijderd om een release laat in de cyclus te blokkeren.
Lessen voor je team
De instellingen van WeTV zijn specifiek voor de stack, maar het patroon erachter is van toepassing op de meeste teams die releases beperken op basis van prestaties:
- Voer de agent uit op de plek waar de fout optreedt. WeTV activeert de agent vanuit het samenvoegingsverzoek, zodat niemand een mislukte controle hoeft op te merken en handmatig een sessie hoeft te starten.
- Laat de agent een diagnose uitvoeren voordat deze bewerkingen uitvoert. Als je eerst om een trace en een genoemde dader vraagt, krijg je oplossingen die gericht zijn op het daadwerkelijke element in plaats van een gok.
- Koppel runtime-gegevens aan een standaard. Een trace vertelt de agent welk element is verplaatst. Modern Web Guidance vertelt de agent welke oplossing de huidige platformpraktijk volgt.
- Bewijs vereisen. Als dezelfde trace die eerder mislukte opnieuw wordt uitgevoerd, is dat voor de medewerker het bewijs dat de oplossing werkt. P2ER volgt hetzelfde principe in de verplichte empirische verificatieregel.
- Zorg dat er een mens bij betrokken blijft. De agent voert het onderzoek uit en een engineer beoordeelt een patch die de controle al heeft doorstaan.
Feedback en toekomstplannen
WeTV ontdekte dat door live runtime-telemetrie van Chrome DevTools voor agents te koppelen aan de gestandaardiseerde regels in Modern Web Guidance, handmatige prestatieanalyse uit het releaseproces werd gehaald, terwijl de codewijzigingen van de agent in overeenstemming bleven met de huidige webplatformstandaarden.
"De resultaten zijn zeer effectief, zowel qua snelheid als kwaliteit. De diagnostische inzichten van Chrome DevTools voor agents en Modern Web Guidance gaven ons betrouwbare referenties om complexe lay-outproblemen op te lossen. We voeren na elke oplossing een strenge verificatie uit. Het huidige succespercentage en de stabiliteit hebben ons vertrouwen in de release aanzienlijk verbeterd."
—Yangjie Zheng, Head of Engineering, WeTV (Tencent)
Het technische team van WeTV is van plan om Chrome DevTools voor agents en Modern Web Guidance te gebruiken voor end-to-end tests voor toekomstige codereleases.
Bronnen
Verken deze bronnen om een vergelijkbare workflow in te stellen: