Opublikowano: 10 listopada 2026 r.
WeTV to międzynarodowa platforma streamingowa firmy Tencent. Oferuje seriale, anime i programy rozrywkowe widzom w Azji Południowo-Wschodniej i na innych rynkach na całym świecie. W przypadku witryny opartej na filmach wydajność decyduje o tym, czy widzowie zostaną, czy wyszukiwarki będą wyświetlać treści i czy odtwarzanie będzie płynne.
Zespół inżynierów WeTV nie publikuje kodu, który nie spełnia celów dotyczących wydajności. Przez długi czas utrzymanie tej linii oznaczało, że programista musiał przerwać pracę, otworzyć Chrome i ręcznie profilować stronę za każdym razem, gdy kompilacja nie przeszła testu. Wykrycie i naprawienie jednej regresji zajęło około 4 godzin.
Obecnie agent AI do kodowania wykonuje tę pracę w ramach potoku CI/CD. Za pomocą Narzędzi deweloperskich w Chrome dla agentów agent sprawdza stronę w przeglądarce na żywo. Dzięki Przewodnikowi po współczesnych technologiach internetowych pisze poprawki zgodne z aktualnymi standardami platform internetowych. Obecnie przepływ pracy automatycznie diagnozuje i rozwiązuje 90% nieudanych testów wydajności, a czas od nieudanej kontroli do zweryfikowanej poprawki skrócił się z 4 godzin do 30 minut – w tym pełna kompilacja i ręczna ocena.
Wyzwanie: deweloper utknął między edytorem a przeglądarką
Inżynierowie WeTV korzystali już z narzędzi do kodowania opartych na AI w swoim IDE. Te narzędzia mogły pisać kod, ale nie mogły zobaczyć, co robi kod po uruchomieniu w przeglądarce. Praca została podzielona na 2 części. Inżynierowie piszą kod w edytorze, a następnie przełączają się na Chrome, aby go wdrożyć, sprawdzić i zweryfikować. Każda poprawka oznaczała ręczne powtórzenie całej pętli.
Podział najbardziej zaszkodził na etapie wydawania. Potok CI/CD WeTV przeprowadza ślady wydajności przy każdej wersji i utrzymuje skumulowane przesunięcie układu (CLS) na poziomie 0,1 lub niższym. Gdy kompilacja przekroczyła tę granicę, potok oznaczał ją, ale znalezienie przyczyny nadal wymagało ręcznej pracy. Inżynier musiał otworzyć Narzędzia deweloperskie w Chrome, zarejestrować ślad, znaleźć element, który się przesunął, przenieść to odkrycie z powrotem do edytora, napisać poprawkę i ponownie przeprowadzić kontrolę. Jedna regresja CLS kosztowała około 4 godzin pracy inżyniera.
Zespół potrzebował agenta, który mógłby wykonać obie części zadania: przeanalizować działającą stronę, a następnie poprawić kod zgodnie ze znanym standardem.
Rozwiązanie: połączenie agenta z przeglądarką i standardami internetowymi
WeTV przeniosła weryfikację wydajności do procesu prośby o scalenie (MR). Gdy deweloper otwiera MR, potok CI/CD uruchamia środowisko, w którym agent kodowania AI działa lokalnie z 2 funkcjami, których brakowało w narzędziach IDE zespołu:
- Narzędzia deweloperskie w Chrome dla agentów: uruchamia serwer Model Context Protocol (MCP) i łączy agenta z aktywną instancją Chrome. Agent może rejestrować ślady wydajności (między innymi funkcje Narzędzi deweloperskich w Chrome) i sprawdzać, jak faktycznie renderuje się kod frontendu, tak samo jak deweloper w Narzędziach deweloperskich.
- Przewodnik po współczesnych technologiach internetowych: umiejętność agenta, która zawiera sprawdzone metody dotyczące platformy internetowej i dane o zgodności z przeglądarkami. Kieruje agenta z dala od starszych wzorców i w stronę poprawek opartych na nowoczesnych funkcjach platformy internetowej.
Narzędzia deweloperskie dla agentów informują agenta o tym, co się zepsuło. Przewodnik po współczesnych technologiach internetowych wpływa na sposób, w jaki agent naprawia błąd.
Przykład z życia: przesunięcie układu na stronie odtwarzania odcinka
Podczas jednej prośby o scalenie agent uruchomił narzędzie performance_start_trace na stronie odtwarzania odcinka na komputerze. Ślad zarejestrował CLS na poziomie 0,39, czyli prawie 4 razy więcej niż limit 0,1.
Poproś agenta o przeprowadzenie diagnozy przed wprowadzeniem zmian
WeTV nie pozwala agentowi na improwizację. Prompt, który steruje przepływem pracy, nakazuje mu zdiagnozowanie problemu przed wprowadzeniem zmian w kodzie i sprawdzenie wyników na podstawie Przewodnika po współczesnych technologiach internetowych, zamiast polegać na tym, co model wygenerowałby domyślnie.
Oto przykład prompta, którego użył zespół 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.
Dwie części tego prompta mają największe znaczenie. „Najpierw zdiagnozuj, a potem zmodyfikuj kod” zapobiega łataniu objawów przez agenta. Krok 2 wskazuje agentowi, że ma używać performance_analyze_insight z insightName: 'CLSCulprits', dzięki czemu zgłasza on dokładny element, czas i wynik, a nie ogólne podejrzenie.
W poniższym filmie po wykonaniu prompta agent wyszukuje odpowiedni przewodnik w Przewodniku po współczesnych technologiach internetowych, aby wdrożyć poprawki z użyciem nowoczesnych funkcji internetowych związanych z CLS, i używa Narzędzi deweloperskich w Chrome dla agentów, aby otworzyć instancję przeglądarki Chrome i zarejestrować ślad wydajności.
To połączenie diagnostyki w czasie działania i uporządkowanych wskazówek umożliwia automatyczne naprawianie złożonych przesunięć układu. Oto przykład problemu rozwiązanego przez automatyczny przepływ pracy.
Znajdowanie głównej przyczyny
Ślad wskazywał na odtwarzacz. WeTV renderuje odtwarzacz na serwerze, ale kontener odtwarzacza nie zarezerwował dla niego żadnej wysokości. Gdy klient wyrenderował stronę, wysokość kontenera wzrosła, a treści wokół niego przesunęły się.
Zastosowanie rozwiązania opartego na standardach
Rozwiązaniem jest zarezerwowanie miejsca podczas renderowania po stronie serwera, aby kontener miał odpowiednią wysokość jeszcze przed hydratacją. Poniżej znajdziesz przykład poprawki, którą agent napisał na podstawie przewodnika po układzie CSS w Przewodniku po współczesnych technologiach internetowych:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Po zastosowaniu arkusza CSS przez agenta potok ponownie utworzył stronę, a agent ponownie uruchomił ten sam ślad. Dopiero gdy CLS spadł poniżej 0,1, poprawka została przekazana do sprawdzenia przez człowieka.
Wpływ: szybsze publikowanie i stabilne układy
Po dodaniu do przepływu pracy CI/CD Narzędzi deweloperskich w Chrome dla agentów i Przewodnika po współczesnych technologiach internetowych firma WeTV osiągnęła wymierne korzyści w zakresie wydajności programistów i stabilności układu:
- 87% skrócenie czasu debugowania i rozwiązywania problemów (z 4 godzin do 30 minut).
- 90% wszystkich powtarzających się regresji wydajności jest diagnozowanych i rozwiązywanych automatycznie.
Inżynierowie nie tracą już połowy dnia roboczego na profilowanie. Gdy kompilacja przekroczy próg, agent odczytuje logi, pisze poprawkę, testuje ją i przekazuje zweryfikowaną poprawkę do weryfikatora. Ostateczną decyzję nadal podejmują ludzie, ale zaczynają od poprawki, która przeszła już test, który wcześniej się nie powiódł.
Ponieważ regresje CLS są naprawiane w ramach prośby o scalenie, nie trafiają do środowiska produkcyjnego. Dzięki temu strony nie przekraczają wartości docelowej 0, 1, co chroni widoczność WeTV w wyszukiwarce i eliminuje częstą przyczynę blokowania wersji na późnym etapie cyklu.
Lekcje dla Twojego zespołu
Konfiguracja WeTV jest specyficzna dla stosu tej aplikacji, ale wzorzec, na którym się opiera, można zastosować w przypadku większości zespołów, które uzależniają wydawanie wersji od wydajności:
- Uruchom agenta w miejscu, w którym występuje błąd. WeTV uruchamia agenta z poziomu prośby o scalenie, więc nikt nie musi zauważyć nieudanego sprawdzenia i ręcznie rozpoczynać sesji.
- Zanim agent wprowadzi zmiany, musi przeprowadzić diagnozę. Poproszenie o ślad i wskazanie winnego najpierw pozwala uzyskać poprawki, które są ukierunkowane na rzeczywisty element, a nie na domysły.
- Połącz dane środowiska wykonawczego ze standardem. Ślad informuje agenta, który element się poruszył. Przewodnik po współczesnych technologiach internetowych podpowiada, która poprawka jest zgodna z aktualnymi praktykami platformy.
- Wymagaj dowodu. Ponowne uruchomienie tego samego śledzenia, które się nie powiodło, jest dla agenta dowodem na to, że poprawka działa. P2ER stosuje tę samą zasadę w swojej regule obowiązkowej weryfikacji empirycznej.
- Zapewnij udział człowieka w procesie. Agent przeprowadza analizę, a inżynier sprawdza poprawkę, która przeszła już weryfikację.
Opinie i plany na przyszłość
Firma WeTV odkryła, że połączenie danych telemetrycznych z czasu działania na żywo z Narzędzi deweloperskich w Chrome dla agentów ze standaryzowanymi regułami w Przewodniku po współczesnych technologiach internetowych pozwoliło wyeliminować ręczną analizę wydajności z procesu publikowania, a jednocześnie zachować zgodność zmian w kodzie agenta z aktualnymi standardami platformy internetowej.
„Wyniki są bardzo dobre zarówno pod względem szybkości, jak i jakości. Statystyki diagnostyczne dostarczane przez Narzędzia deweloperskie w Chrome dla agentów i Przewodnik po współczesnych technologiach internetowych dostarczyły nam wiarygodnych informacji, które pomogły nam rozwiązać złożone problemy z układem. Po każdej poprawce przeprowadzamy rygorystyczną weryfikację, a obecny wskaźnik sukcesu i stabilność znacznie zwiększyły nasze zaufanie do wersji”.
– Yangjie Zheng, dyrektor ds. inżynierii, WeTV (Tencent)
Następnie zespół inżynierów WeTV planuje wykorzystać Narzędzia deweloperskie w Chrome dla agentów i Przewodnik po współczesnych technologiach internetowych do kompleksowego testowania nadchodzących wersji kodu.
Zasoby
Aby skonfigurować podobny przepływ pracy, zapoznaj się z tymi materiałami:
- Pierwsze kroki z Narzędziami deweloperskimi w Chrome dla agentów
- Pierwsze kroki z Przewodnikiem po współczesnych technologiach internetowych
- Optymalizacja skumulowanego przesunięcia układu
- Jak firma P2ER stworzyła środowisko o wysokim poziomie zaufania do kodowania opartego na agentach za pomocą Narzędzi deweloperskich w Chrome dla agentów