איך WeTV קיצרה את זמן ניפוי הבאגים בביצועים ב-87% באמצעות כלי פיתוח ל-Chrome לסוכני AI ו-Modern Web Guidance

Junhey
Junhey Software Engineer, WeTV (Tencent)
Stephani Kurniawan
Stephani Kurniawan
Cecilia Cong
Cecilia Cong

תאריך פרסום: 10 בנובמבר 2026

‫WeTV היא פלטפורמת סטרימינג בינלאומית של Tencent. היא מציעה סדרות דרמה, אנימה ותוכניות בידור לצופים בדרום-מזרח אסיה ובשווקים גלובליים אחרים. באתר שמבוסס על וידאו, הביצועים קובעים אם הצופים יישארו, אם מנועי החיפוש יציגו את התוכן ואם ההפעלה תהיה חלקה.

צוות הנדסת האינטרנט של WeTV לא משיק קוד שלא עומד ביעדי הביצועים שלו. במשך זמן רב, כדי לשמור על הקו הזה, המפתח היה צריך להפסיק את מה שהוא עשה, לפתוח את Chrome ולנתח את הדף באופן ידני בכל פעם שה-build נכשל בבדיקה. איתור ותיקון של רגרסיה אחת נמשכו כארבע שעות.

היום, סוכן AI לתכנות מבצע את העבודה הזו כחלק מצינור עיבוד הנתונים של CI/CD. באמצעות כלי הפיתוח ל-Chrome לסוכני AI, הסוכן בודק את הדף בדפדפן פעיל. בעזרת Modern Web Guidance, הוא כותב תיקונים שתואמים לתקנים הנוכחיים של פלטפורמת האינטרנט. תהליך העבודה מאבחן ופותר עכשיו 90% מבדיקות הביצועים שנכשלו באופן אוטומטי, והזמן מבדיקה שנכשלה ועד לתיקון מאומת ירד מארבע שעות ל-30 דקות – כולל פיתוח מלא והערכה ידנית.

האתגר: מפתח שתקוע בין כלי העריכה לדפדפן

המהנדסים של WeTV כבר השתמשו בכלי תכנות מבוססי-AI בסביבת הפיתוח המשולבת (IDE) שלהם. הכלים האלה יכלו לכתוב קוד, אבל לא יכלו לראות מה הקוד עשה כשהוא פעל בדפדפן. אז העבודה התפצלה לשניים. המהנדסים כותבים קוד בעורך, ואז עוברים ל-Chrome כדי לפרוס, לבדוק ולאמת אותו. כל תיקון הצריך לחזור על הלולאה הזו שוב באופן ידני.

הפיצול פגע הכי הרבה בשער השחרור. ב-WeTV, צינור עיבוד הנתונים של CI/CD מריץ מעקבי ביצועים בכל גרסה, ושומר על ערך של 0.1 או פחות במדד היציבות החזותית (CLS). כשה-build חצה את הקו הזה, צינור עיבוד הנתונים סימן אותו, אבל עדיין היה צריך למצוא את הסיבה באופן ידני. מהנדס היה צריך לפתוח את כלי הפיתוח ל-Chrome, לתעד מעקב, למצוא את הרכיב שזז, להעביר את הממצא הזה חזרה לעורך, לכתוב תיקון ולהריץ את הבדיקה שוב. רגרסיה אחת של CLS עלתה כארבע שעות של זמן הנדסה.

תרשים זרימה של תהליך העבודה המקורי. קוד שנכתב ב-IDE באמצעות סוכן AI לכתיבת קוד עובר לאימות ידני, שבו מפתח פותח את הדף בדפדפן ומתעד מעקב אחר הביצועים. אם הביצועים לא עומדים בסף, העבודה חוזרת ל-IDE. אם כן, הקוד מופץ.
תהליך העבודה המקורי: מפתח אימת באופן ידני את הביצועים לפני כל גרסה.

הצוות היה צריך נציג שיכול לטפל בשני חלקי המשימה: לבחון את הדף שפועל, ואז לתקן את הקוד לפי תקן ידוע.

הפתרון: לחבר את הסוכן לדפדפן ולתקני האינטרנט

ב-WeTV העבירו את אימות הביצועים לתהליך של בקשת המיזוג (MR). כשמפתח פותח בקשת מיזוג, צינור עיבוד הנתונים של ה-CI/CD מפעיל סביבה שבה סוכן ה-AI לכתיבת קוד פועל באופן מקומי עם שתי יכולות שלא היו קיימות בכלים של סביבת הפיתוח המשולבת (IDE) של הצוות:

  • כלי פיתוח ל-Chrome לסוכני AI: מריצים שרת Model Context Protocol‏ (MCP) ומחברים את הסוכן למכונה פעילה של Chrome. הסוכן יכול לתעד עקבות ביצועים (בין תכונות אחרות של כלי הפיתוח ל-Chrome) ולבדוק איך הקוד של ממשק המשתמש מוצג בפועל, באותו אופן שבו מפתח היה עושה זאת בכלי הפיתוח.
  • ‫Modern Web Guidance: מיומנות של הסוכן שכוללת שיטות מומלצות לפלטפורמות אינטרנט ונתוני תאימות לדפדפנים. הוא מנחה את הנציג להתרחק מדפוסים ישנים ולהתמקד בתיקונים שמבוססים על תכונות מודרניות של פלטפורמת האינטרנט.

כלי הפיתוח לסוכנים מסבירים לסוכן מה השתבש. הכלי Modern Web Guidance משפיע על אופן התיקון.

דוגמה מהעולם האמיתי: שינוי פריסה בדף ההפעלה של הפרק

במהלך בקשת מיזוג אחת, הנציג הפעיל את הכלי performance_start_trace בדף הפעלת הפרק במחשב. המעקב תיעד CLS של 0.39, כמעט פי 4 מהמגבלה של 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, ומשתמש בכלי הפיתוח ל-Chrome לסוכני AI כדי לפתוח מופע של דפדפן Chrome ולתעד מעקב אחר ביצועים.

סרטון שמדגים את תהליך העבודה של ניפוי באגים בביצועים באמצעות סוכנים.

השילוב הזה של אבחון בזמן ריצה והנחיות מובנות מאפשר תיקונים אוטומטיים של שינויי פריסה מורכבים. הנה דוגמה לבעיה שתהליך העבודה האוטומטי פתר.

מציאת שורש הבעיה

המעקב הצביע על נגן הווידאו. ‫WeTV מעבד את הנגן בשרת, אבל הקונטיינר של הנגן לא שומר לו מקום בגובה. כשהלקוח ביצע הידרציה של הדף, הגובה של מאגר התגים גדל והתוכן שסביבו זז.

החלת תיקון שמבוסס על תקנים

הפתרון הוא לשמור את המקום במהלך העיבוד בצד השרת, כך שהמאגר כבר יהיה בגובה הנכון לפני ההידרציה. הנה דוגמה לתיקון שהסוכן כתב בהתאם למדריך css-layout של Modern Web Guidance:

.play__block--player .play__aside--left {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16/9;
}

אחרי שהנציג החיל את ה-CSS, הצינור עיבד מחדש את הדף והנציג הפעיל שוב את אותו מעקב. רק כשה-CLS היה נמוך מ-0.1, התיקון עבר לבדיקה אנושית.

ההשפעה: גרסאות שמופצות מהר יותר ופריסות יציבות

ב-WeTV השיגו שיפורים משמעותיים ביעילות ההנדסית וביציבות הפריסה כשהם הוסיפו את כלי הפיתוח ל-Chrome לסוכני AI ואת Modern Web Guidance לתהליך העבודה של CI/CD:

  • הפחתה של 87% בזמן ניפוי הבאגים ופתרון הבעיות מקצה לקצה (מ-4 שעות ל-30 דקות).
  • ‫90% מכל הירידות החוזרות בביצועים מאובחנות ונפתרות באופן אוטומטי.

המהנדסים כבר לא צריכים להקדיש חצי יום עבודה ליצירת פרופילים. כשה-build חורג מהסף, הסוכן קורא את המעקב, כותב תיקון, בודק אותו ומעביר תיקון מאומת לבודק אנושי. ההחלטה הסופית עדיין נתונה בידי בני אדם, אבל הם מתחילים מתיקון שכבר עבר את הבדיקה שנכשלה.

מכיוון שרגרסיות של CLS מתוקנות בתוך בקשת המיזוג, הן לא מגיעות לסביבת הייצור. כך הדפים נשארים מתחת ליעד של 0.1, החשיפה של WeTV בחיפוש נשמרת, ומוסרת סיבה נפוצה לחסימת גרסה בשלב מאוחר במחזור.

שיעורים לצוות שלך

ההגדרה של WeTV ספציפית למקבץ שלה, אבל הדפוס שמאחוריה עובר לרוב הצוותים שמתנים את ההשקות בביצועים:

  • מפעילים את הסוכן במקום שבו מתרחש הכשל. ‫WeTV מפעילה את הנציג מבקשת המיזוג, כך שאף אחד לא צריך לשים לב לבדיקה שנכשלה ולהתחיל סשן באופן ידני.
  • בקשו מהסוכן לאבחן את הבעיה לפני שהוא עורך את הקוד. אם תבקשו קודם מעקב וזיהוי של הגורם לבעיה, תקבלו תיקונים שמטרגטים את הרכיב בפועל במקום ניחוש.
  • התאמה בין נתוני זמן הריצה לבין תקן. המעקב אומר לסוכן איזה רכיב זז. הכלי Modern Web Guidance אומר לו איזה תיקון תואם לשיטות העבודה הנוכחיות בפלטפורמה.
  • דרישת הוכחה. ההרצה מחדש של אותו מעקב שנכשל היא ההוכחה של הנציג שהתיקון עובד. העיקרון הזה מיושם גם ב-P2ER, בכלל האימות האמפירי המחייב.
  • האדם שבתהליך. הסוכן מבצע את הבדיקה, ומהנדס בודק תיקון שכבר עבר את הבדיקה.

משוב ותוכניות לעתיד

ב-WeTV גילו ששילוב של נתוני טלמטריה בזמן אמת מכלי הפיתוח ל-Chrome לסוכני AI עם הכללים הסטנדרטיים ב-Modern Web Guidance, מאפשר להוציא את הניתוח הידני של הביצועים מתהליך ההשקה, תוך שמירה על השינויים בקוד של הסוכן בהתאם לסטנדרטים הנוכחיים של פלטפורמת האינטרנט.

"התוצאות היו יעילות מאוד מבחינת המהירות והאיכות. התובנות שקיבלנו מכלי הפיתוח ל-Chrome לסוכני AI ומהמיומנות Modern Web Guidance סיפקו לנו מקורות מידע מהימנים לפתרון בעיות פריסה מורכבות. אנחנו מבצעים אימות קפדני אחרי כל תיקון, ושיעור ההצלחה והיציבות הנוכחיים שיפרו באופן משמעותי את הביטחון שלנו בגרסה".

‫—יאנגג'י ז'נג, מנהל הנדסה, WeTV (Tencent)

בשלב הבא, צוות ההנדסה של WeTV מתכנן להשתמש בכלי הפיתוח ל-Chrome לסוכני AI וב-Modern Web Guidance לבדיקות מקצה לקצה של גרסאות קוד עתידיות.

משאבים

כדי להגדיר תהליך עבודה דומה, אפשר לעיין במקורות המידע הבאים: