Ngày xuất bản: 10 tháng 11 năm 2026
Trong kỷ nguyên mới của hoạt động phát triển web dựa trên tác nhân, các nhà phát triển web mong đợi các tác nhân lập trình của họ sẽ là chuyên gia trong việc xây dựng cho web. Mặc dù các mô hình lập trình tiên tiến nhất hiện nay khá mạnh mẽ và thường có thể tạo ra mã hoạt động được, nhưng nếu bạn nhờ một nhà phát triển web xem xét mã do AI tạo, họ hầu như luôn tìm ra cách để mã đó chạy nhanh hơn, dễ tiếp cận hơn hoặc an toàn hơn.
Chrome đang đầu tư mạnh mẽ vào tương lai của hoạt động phát triển web dựa trên tác nhân. Để giải quyết thách thức này, chúng tôi đã giới thiệu bản xem trước của Modern Web Guidance tại Google I/O vào tháng 5. Modern Web Guidance là một bộ kỹ năng tích hợp kiến thức chuyên môn về nền tảng web, các phương pháp hay nhất và dữ liệu về khả năng tương thích của trình duyệt ngay vào các tác nhân lập trình của bạn.
Hôm nay, chúng tôi rất vui mừng được thông báo về việc phát hành phiên bản ổn định 1.0 của Modern Web Guidance, bao gồm:
- Quy trình hiện đại hoá mới quét toàn bộ mã nguồn hiện có để giúp tác nhân tìm cơ hội hiện đại hoá một cách an toàn.
- Cơ sở dữ liệu hướng dẫn mở rộng nhắm đến hàng trăm lỗ hổng kiến thức về AI đã được xác minh bằng các giải pháp đa trình duyệt do chuyên gia kiểm tra.
- Quy trình đánh giá chuyên sâu hơn của chuyên gia đối với mọi hướng dẫn, bao gồm cả việc phê duyệt của trưởng nhóm kỹ thuật về nội dung và quy trình đánh giá chuyên biệt về khả năng hỗ trợ tiếp cận đối với các hướng dẫn dành cho người dùng.
- Phạm vi đánh giá đầy đủ trên tất cả các hướng dẫn của chúng tôi, kèm theo một trang tổng quan đánh giá công khai cho thấy những điểm cải thiện có thể đo lường được so với các tác nhân không có Modern Web Guidance.
Với phiên bản 1.0, chúng tôi cũng rất vui mừng được chia sẻ rằng Modern Web Guidance đang trở thành một nỗ lực trên nhiều trình duyệt, trong đó Firefox và Edge cùng tham gia với Chrome để hỗ trợ, cải thiện khả năng tương thích trên nhiều trình duyệt và đóng góp cho dự án. Dựa trên công việc chung của chúng tôi với Baseline, mục tiêu của chúng tôi là đảm bảo rằng bất kỳ ai lập trình bằng tác nhân đều có thể tận dụng tối đa sức mạnh và khả năng của nền tảng web hiện đại.
Bất kể bạn đang sử dụng mô hình hay khung vận hành tác nhân nào, nếu bạn đang xây dựng cho web, thì Modern Web Guidance là một phần không thể thiếu trong quy trình làm việc của tác nhân.
Để cài đặt Modern Web Guidance, hãy chạy lệnh sau trong thư mục dự án:
npx modern-web-guidance@latest install
Hoặc nếu đã cài đặt phiên bản cũ, bạn có thể cập nhật lên phiên bản 1.0 bằng cách chạy:
npx modern-web-guidance@latest update
Để biết thêm hướng dẫn cài đặt hoặc tìm hiểu thêm, hãy xem tài liệu về Modern Web Guidance hoặc xem video này để biết thông tin tổng quan ngắn gọn:
Lý do nhà phát triển và doanh nghiệp nên sử dụng Modern Web Guidance
Không thể phủ nhận rằng các tác nhân lập trình đã giúp nhà phát triển viết mã nhanh hơn bao giờ hết. Nhưng trong một thế giới mà mọi người đều sử dụng tác nhân lập trình, tốc độ không còn là lợi thế cạnh tranh nữa.
Ngày nay, việc tạo sự khác biệt dựa trên các yếu tố cơ bản như khả năng hữu dụng và chất lượng trải nghiệm trở nên quan trọng hơn bao giờ hết. Sau đây là một số cách Modern Web Guidance có thể giúp ích:
Củng cố các phương pháp hay nhất mà mô hình thường bỏ qua
Mặc dù các mô hình lập trình tiên tiến nắm rõ nhiều phương pháp hay nhất, nhưng kết quả đánh giá của chúng tôi cho thấy vẫn còn một số khía cạnh quan trọng mà các mô hình này chưa đáp ứng được, chẳng hạn như:
- Hỗ trợ tiếp cận: Tiêu điểm bàn phím và quản lý trạng thái không hoạt động, hỗ trợ giảm chuyển động và xác thực biểu mẫu hỗ trợ tiếp cận.
- Trải nghiệm người dùng: Cử chỉ vuốt và chạm, chuyển đổi hộp thoại và cửa sổ bật lên, cũng như triển khai giao diện sáng/tối.
- Hiệu suất: Lập lịch tác vụ luồng chính, tách biệt kết xuất ngoài màn hình và ngăn chặn thay đổi bố cục.
- Bảo mật: Khử trùng HTML an toàn, Chính sách bảo mật nội dung nghiêm ngặt và quản lý thông tin xác thực bằng khoá truy cập.
Các phương pháp hay nhất về hỗ trợ tiếp cận đặc biệt quan trọng vì những sai lầm như ARIA không hợp lệ có thể khiến trang web khó tiếp cận hơn so với việc không có ARIA. Đối với phiên bản 1.0, các hướng dẫn dành cho người dùng của chúng tôi đã được các chuyên gia về hỗ trợ tiếp cận (những người sử dụng công nghệ hỗ trợ hằng ngày) xem xét và kiểm thử bằng công nghệ hỗ trợ thực tế.
Sử dụng tính năng web phù hợp nhất cho công việc
Các mô hình AI rất giỏi trong việc tìm ra cách làm cho một nội dung hoạt động bằng JavaScript, nhưng trong nhiều trường hợp, có các tính năng HTML hoặc CSS có thể làm điều tương tự với ít mã hơn nhiều. Và vì được trình duyệt xử lý, nên các phần tử này thường hoạt động hiệu quả hơn và có khả năng hỗ trợ tiếp cận. Ví dụ:
- Các tính năng tạo ảnh động cho cửa sổ bật lên và hộp thoại
- Các tính năng giúp nâng cao hoạt động tương tác dựa trên thao tác cuộn và vuốt
- API tốt hơn để chuyển đổi trang mượt mà và linh hoạt
Các tính năng mới cũng có thể cải thiện trải nghiệm trên trang web theo những cách quan trọng đối với người dùng. Ví dụ:
- Khoá truy cập và WebAuthn: Để có trải nghiệm đăng nhập nhanh hơn và an toàn hơn
- Tự động điền: Để cải thiện quy trình thanh toán (đặc biệt là trên thiết bị di động) thường không thành công khi sử dụng các chế độ điều khiển biểu mẫu dựa trên JavaScript tuỳ chỉnh
Modern Web Guidance được thiết kế để đề xuất tính năng phù hợp nhất cho công việc, dựa trên các yêu cầu hỗ trợ của trình duyệt. Các hướng dẫn của Gemini có tích hợp dữ liệu về Baseline và khả năng tương thích với trình duyệt, nhờ đó Gemini có thể điều chỉnh các đề xuất cho phù hợp với nhu cầu của dự án.
Quét toàn bộ mã nguồn và tìm cơ hội hiện đại hoá
Hầu hết hoạt động phát triển web không diễn ra trong các dự án hoàn toàn mới. Điều này xảy ra trong các cơ sở mã hiện có đã tích luỹ nhiều năm các giải pháp tạm thời lỗi thời, các phần phụ thuộc không cần thiết và các polyfill không còn cần thiết nữa.
Phiên bản 1.0 bổ sung một quy trình hiện đại hoá mới có thể phân tích HTML, CSS, JavaScript và package.json hiện có của bạn để tìm cơ hội nâng cấp một cách an toàn, sau đó hướng dẫn tác nhân của bạn thực hiện các thay đổi.
/modern-web-guidance Modernize the code in this directory
Trong bản phát hành đầu tiên này, quy trình hiện đại hoá sử dụng quy trình phân tích tĩnh để kiểm tra một số mẫu nhất định. Chúng tôi chọn bắt đầu với một phạm vi hẹp để mang lại kết quả có thể dự đoán được, sau đó mở rộng từ đó. Theo thời gian, chúng tôi dự định sẽ mở rộng sang nhiều lĩnh vực khác, bao gồm cả việc kiểm tra dựa trên tác nhân, trong đó tác nhân của bạn sẽ trực tiếp suy luận về mã thay vì chỉ so khớp với các mẫu đã biết.
Luôn cập nhật thông tin khi nền tảng web phát triển
Nền tảng web là một mục tiêu luôn thay đổi. Các tính năng mới được cung cấp trong trình duyệt ở mỗi mốc quan trọng và các tính năng hiện có mà có thể bạn chưa từng sử dụng trước đây sẽ trở thành Baseline trong mỗi bản phát hành trình duyệt mới.
Vì Modern Web Guidance được xây dựng dựa trên dữ liệu về khả năng tương thích của Baseline và các đề xuất của tính năng này được các kỹ sư trình duyệt, chuyên gia về tiêu chuẩn web và chuyên gia về khả năng hỗ trợ tiếp cận duy trì, nên các đề xuất này sẽ phát triển cùng với chính nền tảng và giờ đây, dự án của bạn cũng có thể phát triển.
Tìm hiểu về các tính năng mới và phương pháp hay nhất cho web
Mặc dù Modern Web Guidance chủ yếu được xây dựng dưới dạng một công cụ cho các tác nhân, nhưng nhiều nhà phát triển cho biết họ thấy hướng dẫn này thực sự hữu ích, đóng vai trò như một tài nguyên học tập.
Ngay cả trong kỷ nguyên lập trình dựa trên tác nhân này, việc xây dựng kiến thức chuyên môn về miền vẫn có giá trị. Modern Web Guidance có thể giúp bạn làm điều đó: bằng cách đọc hướng dẫn hoặc sử dụng CLI để tìm kiếm các trường hợp sử dụng và khám phá các kỹ thuật mới có thể phù hợp với dự án của bạn.
Kết hợp Modern Web Guidance với Chrome DevTools cho tác nhân
Trong quá trình phát triển web dựa trên tác nhân, việc viết mã chỉ là một phần của quy trình làm việc. Bạn cũng cần chạy mã đó để đảm bảo mã hoạt động như mong đợi. Đây là lý do chúng tôi khuyên nhà phát triển nên sử dụng Modern Web Guidance cùng với Chrome DevTools cho tác nhân.
- Modern Web Guidance cung cấp cho tác nhân của bạn kiến thức chuyên môn cần thiết để viết mã theo các phương pháp hay nhất hiện đại.
- Chrome DevTools cho tác nhân cung cấp cho tác nhân khả năng hiển thị trong thời gian chạy để tác nhân có thể xác minh, gỡ lỗi và tối ưu hoá mã đó trên nhiều chức năng của thiết bị, lựa chọn ưu tiên của người dùng và điều kiện mạng.
Khi kết hợp với nhau, những thông tin này sẽ giúp nhân viên hỗ trợ của bạn đưa ra giải pháp tốt hơn trong ít lượt hơn. Sau đây là một vài ví dụ về cách bạn có thể kết hợp các công cụ này để đạt hiệu quả tối đa:
Tối ưu hoá cho đến khi bạn đạt được mục tiêu hiệu suất
Modern Web Guidance có thể hướng dẫn tác nhân của bạn cách chia nhỏ hiệu quả các tác vụ JavaScript chạy trong thời gian dài và chặn luồng chính, nhưng không thể kiểm thử mã của bạn để xem các tác vụ JavaScript đó thực sự chặn luồng chính trong bao lâu.
Với Chrome DevTools cho tác nhân, bạn có thể chạy dấu vết hiệu suất trên CPU cấp thấp được mô phỏng để xem bạn có gặp vấn đề hay không, sau đó sử dụng lời khuyên về hiệu suất trong Modern Web Guidance để lặp lại cho đến khi mã của bạn không bao giờ chặn luồng chính quá 50 mili giây (để không góp phần làm giảm INP).
Kiểm thử và tinh chỉnh ảnh động
Modern Web Guidance có thể hướng dẫn tác nhân của bạn cách tạo ảnh động cho các tính năng như hộp thoại phương thức, chú giải công cụ và trình đơn bật lên một cách chính xác và hiệu quả. Tuy nhiên, ngay cả khi có hướng dẫn này, bạn vẫn cần xác minh rằng ảnh động thực sự hoạt động và trông đẹp mắt khi được sử dụng trong bối cảnh của toàn bộ ứng dụng.
Chrome DevTools cho tác nhân có thể chạy mã của bạn, tương tác với trang và ghi lại màn hình của ảnh động đang hoạt động. Sau đó, công cụ này có thể nghiên cứu bản ghi để đảm bảo rằng ảnh động chạy và phù hợp với phong cách cũng như cảm nhận của phần còn lại của trang web.
Bạn cũng có thể sử dụng Chrome DevTools cho tác nhân để xác minh rằng khi prefers-reduced-motion được đặt, thành phần sẽ tuân thủ lựa chọn ưu tiên của người dùng.
Lưu khung hiển thị vào bộ nhớ đệm mà không bị rò rỉ bộ nhớ
Modern Web Guidance có thể hướng dẫn tác nhân của bạn cách làm cho quá trình chuyển đổi SPA diễn ra tức thì bằng cách kết xuất và lưu các khung hiển thị vào bộ nhớ đệm, đồng thời ẩn các khung hiển thị đó khỏi cây hỗ trợ tiếp cận một cách chính xác.
Tuy nhiên, khi làm việc này, bạn cần đảm bảo dọn dẹp đúng cách các khung hiển thị không dùng đến để không bị rò rỉ bộ nhớ nếu người dùng ở lại trang trong thời gian dài. Chrome DevTools cho tác nhân có các công cụ gỡ lỗi bộ nhớ, nhờ đó, tác nhân của bạn có thể đảm bảo mức sử dụng bộ nhớ không tăng lên mà không có giới hạn.
Để tìm hiểu kỹ hơn về cách sử dụng kết hợp Modern Web Guidance và Chrome DevTools cho tác nhân, hãy xem video sau:
Câu chuyện thành công
Các nhóm kỹ thuật trên khắp thế giới đang sử dụng Modern Web Guidance và Chrome DevTools cho tác nhân để cải thiện chất lượng mã, đẩy nhanh tiến độ phân phối và loại bỏ các điểm tắc nghẽn khi gỡ lỗi thủ công:
Pensionbazaar và Policybazaar
Pensionbazaar, một nền tảng lập kế hoạch hưu trí mới do công ty công nghệ tài chính Paisabazaar của Ấn Độ ra mắt, đã kết hợp Modern Web Guidance với Chrome DevTools cho tác nhân để xây dựng và xác minh các trang mới, giúp rút ngắn thời gian hoàn thành hơn 90% (từ khoảng 4 ngày xuống còn vài giờ) và giảm hơn 90% lỗi giao diện người dùng trên các màn hình mới. Nền tảng liên kết Policybazaar, một trong những nền tảng bảo hiểm hàng đầu của Ấn Độ với hơn 97 triệu khách hàng đã đăng ký, đã sử dụng Chrome DevTools cho tác nhân để tự động hoá quy trình kiểm tra hiệu suất trên khoảng 30 trang đích có lưu lượng truy cập cao, giúp giảm 92% công sức kiểm tra thủ công:
"Đối với Pensionbazaar, ưu tiên của chúng tôi là xây dựng mã chất lượng ngay từ ngày đầu tiên để tránh nợ kỹ thuật sau này. Modern Web Guidance đã hướng dẫn tác nhân lập trình của chúng tôi áp dụng các tiêu chuẩn web hiện đại và các phương pháp hay nhất về hiệu suất, đồng thời tôn trọng các mục tiêu cụ thể về khả năng tương thích với trình duyệt. Điều này giúp quá trình xem xét mã giao diện người dùng của chúng tôi trở nên dễ dàng và nhanh chóng hơn đáng kể, từ đó cải thiện thời gian hoàn thành quá trình phát triển."
—Aman Soni, Giám đốc kỹ thuật, Policybazaar
WeTV
WeTV, nền tảng xem video trực tuyến quốc tế của Tencent, đã thêm một tác nhân lập trình AI vào quy trình CI/CD của mình. Tác nhân này sử dụng Chrome DevTools cho tác nhân để chẩn đoán tình trạng sụt giảm hiệu suất và Modern Web Guidance để khắc phục tình trạng đó bằng các tính năng hiện đại của nền tảng web. Tác nhân này hiện tự động chẩn đoán và giải quyết 90% số lần kiểm tra hiệu suất không thành công, giúp giảm 87% thời gian gỡ lỗi và giải quyết (từ 4 giờ xuống còn 30 phút, bao gồm cả việc đánh giá thủ công):
"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)
note inc.
note inc., một trong những nền tảng truyền thông và nhà sáng tạo lớn nhất Nhật Bản với hơn 90 triệu số người dùng hoạt động hằng tháng, đã sử dụng Modern Web Guidance cùng với hệ thống thiết kế nội bộ của mình trong nỗ lực không ngừng nhằm hiện đại hoá giao diện người dùng Next.js. Trong một quy trình đánh giá gồm 180 lần chạy trên toàn bộ mã nguồn chính thức, Modern Web Guidance đã tăng tỷ lệ đạt trong các quy trình kiểm tra web hiện đại từ 61% lên 94% bằng cách hướng dẫn các tác nhân sử dụng các tính năng HTML và CSS gốc thay vì JavaScript tuỳ chỉnh cho ảnh động cuộn, chú thích và thành phần accordion. Việc này cũng giúp tăng mức độ ưu tiên phù hợp cho hình ảnh LCP thêm 28% trên 431 yêu cầu kéo đã hợp nhất:
"Sứ mệnh của chúng tôi tại note là "Bắt đầu và tiếp tục sáng tạo", vì vậy, nền tảng của chúng tôi phải luôn nhanh chóng và dễ tiếp cận đối với mọi nhà sáng tạo và độc giả. Khi ngày càng có nhiều mã được viết bằng các tác nhân lập trình AI, Modern Web Guidance sẽ giúp các tác nhân này tìm đến các giải pháp hiện đại, dựa trên tiêu chuẩn thay vì quay lại các mẫu JavaScript cũ. Công cụ này cũng chỉ ra những chi tiết dễ bị bỏ qua, chẳng hạn như mức độ ưu tiên tải hình ảnh và khả năng hỗ trợ tiếp cận biểu mẫu. Khi kết hợp với hệ thống thiết kế của chúng tôi, thư viện này giúp chúng tôi liên tục cải thiện ứng dụng ghi chú trong khi vẫn duy trì giao diện người dùng nhất quán."
—Takehiko Itabashi, Phó chủ tịch phụ trách công nghệ, note inc.
MetaMask
MetaMask, một nền tảng tài chính tự quản lý với hơn 100 triệu lượt tải xuống tại khoảng 190 quốc gia, chạy Modern Web Guidance dưới dạng bot quy trình xem xét tự động trên mọi yêu cầu kéo đối với tiện ích trình duyệt nguồn mở của mình, được định cấu hình chỉ bằng một câu lệnh gồm ba dòng. Trong 5 tuần đầu tiên, bot đã xem xét khoảng 480 yêu cầu gộp và nhận xét về 64 yêu cầu trong số đó, giúp các kỹ sư khắc phục 43 kết quả (chủ yếu là các vấn đề về khả năng hỗ trợ tiếp cận, ngữ nghĩa HTML và biểu mẫu mà linter không phát hiện được) với thời gian trung bình là 15 phút từ khi nhận xét đến khi khắc phục:
"Các bài đánh giá rất hữu ích. Họ đã giúp các kỹ sư của chúng tôi tìm hiểu và làm quen với các API hiện đại như Trình gọi mối quan tâm và API Popover. Việc này không làm tăng thời gian xem xét PR, mà có thể còn giúp giảm thời gian xem xét. Nếu không có MWG, chúng tôi sẽ cần một nhân viên đánh giá quen thuộc với các kỹ thuật web hiện đại này để phát hiện các vấn đề."
—Francis Nepomuceno, Kỹ sư UX, MetaMask
Hỗ trợ hệ sinh thái và cộng đồng
Modern Web Guidance bắt đầu như một sáng kiến trong Chrome, nhưng để đạt được cột mốc 1.0 này, chúng tôi đã nỗ lực hợp tác với nhiều chuyên gia trong cộng đồng web.
Cảm ơn các trưởng nhóm kỹ thuật về lĩnh vực nội dung giám sát từng lĩnh vực nền tảng web, các đối tác trình duyệt của chúng tôi tại Firefox và Edge, các chuyên gia độc lập về tiêu chuẩn web và hỗ trợ tiếp cận đã biên soạn và thử nghiệm các hướng dẫn, cũng như tất cả người đóng góp nguồn mở trên GitHub đã giúp định hình bản phát hành này!
Nếu bạn phát hiện thấy lỗ hổng trong kiến thức của các tác nhân lập trình về web hoặc muốn giúp cải thiện hướng dẫn hiện có, hãy xem hướng dẫn đóng góp để tham gia.
Bắt đầu sử dụng Modern Web Guidance
Để thêm Modern Web Guidance vào dự án, hãy chạy trình cài đặt CLI từ thư mục dự án:
npx modern-web-guidance@latest install
Hoặc nếu đã cài đặt phiên bản cũ, bạn có thể cập nhật lên phiên bản 1.0 bằng cách chạy:
npx modern-web-guidance@latest update
Ngoài CLI, bạn có thể cài đặt và cập nhật Modern Web Guidance ngay thông qua hầu hết các trang web cung cấp trình bổ trợ cho tác nhân lập trình phổ biến, bao gồm cả Claude Code, Codex, Cursor, Antigravity, Copilot, WebStorm, Kimi Code và Grok Build.
Để tìm hiểu thêm, hãy xem các tài nguyên sau: