Ngày xuất bản: 10 tháng 11 năm 2026
WeTV là nền tảng phát trực tuyến video quốc tế của Tencent. Nền tảng này cung cấp các bộ phim truyền hình, anime và chương trình tạp kỹ cho người xem ở Đông Nam Á và các thị trường khác trên toàn cầu. Đối với một trang web được xây dựng xoay quanh video, hiệu suất sẽ quyết định liệu người xem có ở lại hay không, liệu công cụ tìm kiếm có hiển thị nội dung hay không và liệu quá trình phát có mượt mà hay không.
Nhóm kỹ thuật web của WeTV không phát hành mã không đạt mục tiêu hiệu suất. Trong một thời gian dài, việc duy trì ranh giới đó đồng nghĩa với việc nhà phát triển phải dừng việc họ đang làm, mở Chrome và lập hồ sơ trang theo cách thủ công mỗi khi một bản dựng không vượt qua được quy trình kiểm tra. Việc theo dõi và khắc phục một lỗi hồi quy mất khoảng 4 giờ.
Giờ đây, một tác nhân lập trình AI sẽ thực hiện công việc đó trong quy trình CI/CD. Với Chrome DevTools cho tác nhân, tác nhân sẽ kiểm tra trang trong một trình duyệt đang hoạt động. Với Modern Web Guidance, Gemini Code Assist sẽ viết các bản sửa lỗi tuân thủ các tiêu chuẩn hiện hành của nền tảng web. Quy trình làm việc hiện tự động chẩn đoán và giải quyết 90% số lần kiểm thử hiệu suất không thành công, đồng thời thời gian từ khi kiểm tra không thành công đến khi khắc phục được xác minh đã giảm từ 4 giờ xuống còn 30 phút, bao gồm cả quá trình xây dựng đầy đủ và đánh giá thủ công.
Thử thách: Nhà phát triển bị kẹt giữa trình chỉnh sửa và trình duyệt
Các kỹ sư của WeTV đã sử dụng các công cụ lập trình AI trong IDE của họ. Những công cụ đó có thể viết mã nhưng không thể xem mã đã làm gì sau khi chạy trong trình duyệt. Vì vậy, công việc được chia làm hai. Các kỹ sư viết mã trong trình chỉnh sửa, sau đó chuyển sang Chrome để triển khai, kiểm tra và xác minh mã. Mỗi lần sửa lỗi đều phải lặp lại quy trình đó bằng tay.
Việc chia tách này gây ảnh hưởng nhiều nhất ở cổng phát hành. Quy trình CI/CD của WeTV chạy dấu vết hiệu suất trên mọi bản phát hành và giữ cho Mức thay đổi bố cục tích luỹ (CLS) ở mức 0,1 trở xuống. Khi một bản dựng vượt qua ranh giới đó, quy trình sẽ gắn cờ bản dựng đó, nhưng việc tìm nguyên nhân vẫn phải thực hiện thủ công. Kỹ sư phải mở Chrome DevTools, ghi lại dấu vết, tìm phần tử đã di chuyển, đưa kết quả tìm được trở lại trình chỉnh sửa, viết bản sửa lỗi và chạy lại quy trình kiểm tra. Một lần hồi quy CLS duy nhất tốn khoảng 4 giờ thời gian kỹ thuật.
Nhóm cần một tác nhân có thể xử lý cả hai phần của công việc: Xem trang đang chạy, sau đó sửa mã theo một tiêu chuẩn đã biết.
Giải pháp: Kết nối tác nhân với trình duyệt và các tiêu chuẩn web
WeTV đã chuyển quy trình xác minh hiệu suất vào quy trình yêu cầu hợp nhất (MR). Khi một nhà phát triển mở một MR, quy trình CI/CD sẽ khởi động một môi trường nơi tác nhân lập trình AI chạy cục bộ với hai chức năng mà các công cụ IDE của nhóm thiếu:
- Chrome DevTools cho tác nhân: Chạy một máy chủ Giao thức ngữ cảnh mô hình (MCP) và kết nối tác nhân với một phiên bản Chrome đang hoạt động. Tác nhân có thể ghi lại dấu vết hiệu suất (trong số các tính năng khác của Công cụ của Chrome cho nhà phát triển) và kiểm tra cách mã giao diện người dùng thực sự hiển thị, giống như cách nhà phát triển thực hiện trong Công cụ cho nhà phát triển.
- Modern Web Guidance: Một kỹ năng của tác nhân chứa các phương pháp hay nhất về nền tảng web và dữ liệu về khả năng tương thích với trình duyệt. Công cụ này giúp tác nhân tránh xa các mẫu cũ và hướng đến các bản sửa lỗi được xây dựng trên các tính năng hiện đại của nền tảng web.
DevTools cho tác nhân cho tác nhân biết lỗi xảy ra. Modern Web Guidance định hình cách khắc phục vấn đề.
Ví dụ thực tế: Sự thay đổi bố cục trên trang phát tập podcast
Trong một yêu cầu hợp nhất, nhân viên hỗ trợ đã chạy công cụ performance_start_trace trên trang phát tập podcast trên máy tính. Dữ liệu theo dõi ghi nhận CLS là 0,39, gần gấp bốn lần giới hạn 0,1.
Yêu cầu tác nhân chẩn đoán trước khi chỉnh sửa
WeTV không cho phép tác nhân ứng biến. Câu lệnh điều khiển quy trình làm việc yêu cầu tác nhân chẩn đoán vấn đề trước khi can thiệp vào mã và kiểm tra kết quả tìm được bằng Modern Web Guidance thay vì dựa vào bất cứ nội dung nào mà mô hình tạo ra theo mặc định.
Dưới đây là ví dụ về một câu lệnh mà nhóm WeTV đã sử dụng:
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.
Hai phần của câu lệnh này đóng vai trò quan trọng nhất. "Chẩn đoán trước, sau đó sửa đổi mã" giúp tác nhân không vá lỗi triệu chứng. Bước 2 hướng dẫn tác nhân sử dụng performance_analyze_insight với insightName: 'CLSCulprits' để báo cáo chính xác phần tử, thời gian và điểm số thay vì nghi ngờ chung chung.
Trong video sau, khi câu lệnh được thực thi, tác nhân sẽ tìm hướng dẫn có liên quan trong Modern Web Guidance để triển khai các bản sửa lỗi bằng các tính năng web hiện đại liên quan đến CLS, đồng thời sử dụng Chrome DevTools cho tác nhân để mở một phiên bản trình duyệt Chrome và ghi lại dấu vết hiệu suất.
Sự kết hợp giữa thông tin chẩn đoán trong thời gian chạy và hướng dẫn có cấu trúc này cho phép tự động khắc phục các thay đổi phức tạp về bố cục. Sau đây là ví dụ về một vấn đề được khắc phục bằng quy trình công việc tự động.
Tìm nguyên nhân gốc
Dấu vết này trỏ đến trình phát video. WeTV kết xuất trình phát trên máy chủ, nhưng vùng chứa của trình phát không dành riêng chiều cao cho trình phát. Khi ứng dụng bù nước cho trang, chiều cao của vùng chứa sẽ mở rộng và nội dung xung quanh vùng chứa đó sẽ thay đổi.
Áp dụng cách khắc phục dựa trên tiêu chuẩn
Cách khắc phục là đặt trước không gian trong quá trình kết xuất phía máy chủ, nhờ đó vùng chứa đã có chiều cao phù hợp trước khi hydrat hoá. Sau đây là ví dụ về một bản sửa lỗi mà tác nhân đã viết dựa trên hướng dẫn về bố cục CSS của Modern Web Guidance:
.play__block--player .play__aside--left {
inline-size: 100%;
block-size: auto;
aspect-ratio: 16/9;
}
Sau khi tác nhân áp dụng CSS, quy trình đã tạo lại trang và tác nhân chạy lại cùng một dấu vết. Chỉ khi CLS dưới 0,1 thì bản vá mới được chuyển sang quy trình đánh giá thủ công.
Tác động: Phát hành nhanh hơn và bố cục ổn định
WeTV đã đạt được những cải tiến đáng kể về hiệu suất kỹ thuật và độ ổn định của bố cục khi thêm Chrome DevTools cho tác nhân và Modern Web Guidance vào quy trình CI/CD:
- Giảm 87% thời gian gỡ lỗi và giải quyết từ đầu đến cuối (từ 4 giờ xuống còn 30 phút).
- 90% tất cả các lỗi hồi quy hiệu suất định kỳ đều được chẩn đoán và giải quyết tự động.
Các kỹ sư không còn mất nửa ngày làm việc để lập hồ sơ nữa. Khi một bản dựng vượt quá ngưỡng, tác nhân sẽ đọc dấu vết, viết bản sửa lỗi, kiểm thử và chuyển bản vá đã xác minh cho nhân viên đánh giá. Con người vẫn đưa ra quyết định cuối cùng, nhưng họ bắt đầu từ một bản sửa lỗi đã vượt qua quy trình kiểm tra không thành công.
Vì các lỗi hồi quy CLS được khắc phục trong yêu cầu hợp nhất, nên chúng không được đưa vào phiên bản chính thức. Điều này giúp các trang duy trì dưới mục tiêu 0, 1, bảo vệ khả năng hiển thị của WeTV trên kết quả tìm kiếm và loại bỏ một lý do phổ biến khiến bản phát hành bị chặn vào cuối chu kỳ.
Bài học cho nhóm của bạn
Cách thiết lập của WeTV dành riêng cho ngăn xếp của họ, nhưng mẫu phía sau cách thiết lập này áp dụng cho hầu hết các nhóm có bản phát hành dựa trên hiệu suất:
- Chạy tác nhân tại nơi xảy ra lỗi. WeTV kích hoạt tác nhân từ yêu cầu hợp nhất, vì vậy, không ai phải chú ý đến một lần kiểm tra không thành công và bắt đầu một phiên theo cách thủ công.
- Yêu cầu tác nhân chẩn đoán trước khi chỉnh sửa. Việc yêu cầu dấu vết và thủ phạm có tên trước tiên sẽ tạo ra các bản sửa lỗi nhắm đến phần tử thực tế thay vì phỏng đoán.
- Ghép nối dữ liệu thời gian chạy với một tiêu chuẩn. Dấu vết cho tác nhân biết phần tử nào đã di chuyển. Modern Web Guidance cho biết cách khắc phục nào tuân theo quy tắc hiện tại của nền tảng.
- Yêu cầu bằng chứng. Việc chạy lại cùng một dấu vết không thành công là bằng chứng cho thấy tác nhân đã khắc phục được vấn đề. P2ER tuân theo nguyên tắc tương tự trong quy tắc xác minh thực nghiệm bắt buộc.
- Giữ con người nằm trong quy trình. Tác nhân thực hiện điều tra và một kỹ sư xem xét bản vá đã vượt qua quy trình kiểm tra.
Ý kiến phản hồi và kế hoạch trong tương lai
WeTV nhận thấy rằng việc kết hợp dữ liệu đo từ xa trong thời gian chạy trực tiếp từ Chrome DevTools cho tác nhân với các quy tắc chuẩn hoá trong Modern Web Guidance đã giúp loại bỏ quy trình phân tích hiệu suất thủ công khỏi quy trình phát hành, đồng thời đảm bảo các thay đổi về mã của tác nhân tuân thủ các tiêu chuẩn hiện tại của nền tảng web.
"Kết quả đạt được rất ấn tượng, cả về tốc độ lẫn chất lượng. Thông tin chẩn đoán chi tiết do Chrome DevTools cho tác nhân và Modern Web Guidance cung cấp đã mang đến cho chúng tôi những thông tin tham khảo đáng tin cậy để khắc phục các vấn đề phức tạp về bố cục. Chúng tôi thực hiện quy trình xác minh nghiêm ngặt sau mỗi lần khắc phục, đồng thời tỷ lệ thành công và độ ổn định hiện tại đã giúp chúng tôi tự tin hơn rất nhiều khi phát hành."
—Yangjie Zheng, Trưởng bộ phận kỹ thuật, WeTV (Tencent)
Tiếp theo, nhóm kỹ thuật của WeTV dự định đưa Chrome DevTools cho tác nhân và Modern Web Guidance vào quy trình kiểm thử toàn diện cho các bản phát hành mã sắp tới.
Tài nguyên
Để thiết lập quy trình làm việc tương tự, hãy tham khảo các tài nguyên sau: