Ngày phát hành: 14 tháng 1 năm 2025
Tại Google I/O 2024 năm ngoái, chúng tôi đã ra mắt thông tin chi tiết về bảng điều khiển, tính năng AI đầu tiên trong Công cụ của Chrome cho nhà phát triển. Thông tin chi tiết về bảng điều khiển giúp bạn hiểu được các lỗi và cảnh báo được ghi lại vào bảng điều khiển bằng cách gửi dữ liệu mạng, mã nguồn và dấu vết ngăn xếp liên quan đến thông báo nhật ký đến Gemini, Mô hình ngôn ngữ lớn (LLM) của Google. Thông tin chi tiết về bảng điều khiển gửi một câu lệnh duy nhất đến Gemini để trả về một câu trả lời duy nhất mà không cho phép nhà phát triển đặt câu hỏi tiếp theo. Mặc dù quy trình tương tác đơn lẻ này hoạt động tương đối tốt để giải thích thông báo lỗi, nhưng quy trình này không mở rộng được cho các trường hợp sử dụng gỡ lỗi phức tạp hơn bên trong DevTools, trong đó không rõ AI cần dữ liệu nào từ trang được kiểm tra để trợ giúp.
Một trường hợp sử dụng như vậy là gỡ lỗi các vấn đề về kiểu. Một trang web có thể chứa hàng nghìn phần tử và quy tắc CSS, trong đó chỉ một số ít phần tử và quy tắc có liên quan đến việc gỡ lỗi một tình huống cụ thể. Việc xác định mã phù hợp để gỡ lỗi có thể rất khó khăn, ngay cả đối với con người. Tuy nhiên, với một nguyên mẫu được tạo trong một cuộc thi lập trình về AI tại Google, chúng tôi nhận thấy rằng LLM thực sự khá tốt trong việc này. Vì vậy, chúng tôi muốn mang sức mạnh đó đến với người dùng DevTools, tạo ra một công cụ có thể điều tra các vấn đề về kiểu bằng cách truy vấn trang một cách tương tác để lấy thêm dữ liệu ngữ cảnh. Vài tháng sau, chúng tôi đã ra mắt sản phẩm này dưới dạng tính năng hỗ trợ tạo kiểu bằng AI.
Trong bài đăng này, chúng tôi muốn làm rõ một số thách thức mà chúng tôi gặp phải khi giới thiệu AI cho một sản phẩm được yêu thích như Chrome DevTools – về cơ bản là một ứng dụng web – và những điều bạn có thể điều chỉnh cho các tính năng AI của riêng mình.
Thu thập dữ liệu phù hợp
Thông tin chi tiết trong Console luôn sử dụng cùng một điểm dữ liệu để phản hồi một lời nhắc được xác định trước. Để trợ lý AI hữu ích với mọi câu lệnh do người dùng xác định, chúng ta cần xác định linh động dữ liệu ngữ cảnh nào quan trọng đối với truy vấn hiện tại.
Do đó, chúng tôi đã triển khai ReAct (Yao et al., 2022). Chiến lược nhắc này giúp LLM tự động suy luận và xác định hành động tiếp theo dựa trên suy luận của nó.
Bằng cách này, trợ lý AI hoạt động theo chu kỳ suy nghĩ, hành động và quan sát cho đến khi xác định được câu trả lời phù hợp cho truy vấn của người dùng. Tại thời điểm đó, trợ lý sẽ kết thúc chu kỳ và đưa ra câu trả lời. Quy trình lặp lại này cho phép LLM thu thập thông tin chính xác cần thiết để gỡ lỗi hiệu quả các vấn đề về kiểu.
Để thu thập thông tin, chúng tôi chỉ cung cấp một công cụ cho Gemini: chạy JavaScript trên trang được kiểm tra. Điều này cho phép Gemini thông qua tính năng trợ lý AI, chẳng hạn như:
- Truy cập và phân tích DOM: duyệt qua cây DOM, kiểm tra thuộc tính phần tử và tìm hiểu mối quan hệ giữa các phần tử.
- Truy xuất kiểu đã tính toán: truy cập vào kiểu đã tính toán cho bất kỳ phần tử nào.
- Thực hiện các phép tính và đo lường: thực thi mã JavaScript để tính toán khoảng cách, kích thước và vị trí của các phần tử.
Điều này giúp tính năng hỗ trợ AI chỉ tương tác với mã có liên quan, cải thiện chất lượng phản hồi, thời gian phản hồi và việc sử dụng tài nguyên điện toán, so với việc gửi toàn bộ mã nguồn HTML và CSS đến Gemini.
Chạy mã do AI tạo trong không gian người dùng
Có vẻ như việc sử dụng JavaScript để gỡ lỗi các vấn đề về kiểu dáng là điều không mong muốn. Có hai lý do dẫn đến việc này:
- API web rất mạnh mẽ và vốn đã bao gồm nhiều trường hợp sử dụng gỡ lỗi. Mặc dù nhà phát triển có thể cảm thấy phiền phức khi sử dụng lệnh gọi API theo cách thủ công để duyệt qua DOM hoặc truy cập vào các kiểu được tính toán để gỡ lỗi, nhưng LLM không gặp vấn đề gì khi tạo mã gọi các lệnh gọi đó.
- Mặc dù có thể phát minh ra các API mới để tác nhân sử dụng, nhưng việc sử dụng lại các API công khai hiện có thường là lựa chọn tốt hơn, vì các API này đã được LLM biết đến. Việc hướng dẫn LLM về một API mới đòi hỏi nhiều tài nguyên để tinh chỉnh và dữ liệu huấn luyện cụ thể.
Tuy nhiên, việc chạy mã do AI tạo trong không gian người dùng có rủi ro. Đối với tính năng hỗ trợ AI, chúng tôi cần giảm thiểu nguy cơ thay đổi có hại mà tác nhân có thể thực hiện đối với trang. Để làm được điều đó, chúng tôi đã sử dụng các quy trình kiểm tra hiệu ứng phụ mà V8, công cụ JavaScript của Chrome, hiển thị thông qua Giao thức Chrome DevTools. Các bước kiểm tra tương tự được dùng cho chức năng tự động hoàn thành trong Bảng điều khiển DevTools: chức năng này chỉ chạy mã JavaScript miễn là không sửa đổi bất kỳ trạng thái trang nào. Các bước kiểm tra này được thực hiện trong khi V8 thực thi mã và dựa trên một danh sách cho phép các thành phần tích hợp sẵn JavaScript được biết là không có tác dụng phụ.
Nếu quy trình kiểm tra phát hiện thấy mã được tạo đang sửa đổi trang được kiểm tra, thì quá trình thực thi sẽ bị tạm dừng và người dùng sẽ được yêu cầu xem lại mã và xác nhận rằng có thể chạy mã đó.
Ngoài ra, JavaScript được tạo sẽ chạy trong một "thế giới" tách biệt. Điều này tương tự như cách các tiện ích chạy tập lệnh hộp cát: mã được tạo có thể truy cập vào DOM và API Web nhưng không thể truy cập vào mã JavaScript hoặc trạng thái do trang được kiểm tra xác định.
Theo dõi các thay đổi do tác nhân thực hiện
Ngoài việc điều tra các vấn đề và trả lời các câu hỏi gỡ lỗi về trang, chúng tôi cũng muốn cung cấp cho trợ lý hỗ trợ AI khả năng khắc phục các kiểu trên trang theo cách mà nhà phát triển có thể theo dõi.
Để thực hiện việc này, chúng tôi đã triển khai một liên kết có tên là setElementStyles mà chúng tôi hiển thị cho ngữ cảnh thực thi của tác nhân ngoài các API Web mặc định.
Để Gemini biết về phương thức mới đó, chúng ta hướng dẫn Gemini sử dụng phương thức đó trong phần mở đầu hỗ trợ AI:
If you need to set styles on an HTML element, always call the \`async setElementStyles(el: Element, styles: object)\` function.
Mặc dù là một API được thiết kế riêng cho tác nhân, đi kèm với các thách thức đã đề cập trước đó, nhưng ngay cả khi không tinh chỉnh, Gemini vẫn sử dụng API này một cách đáng tin cậy khi cần thay đổi kiểu trên một phần tử nhất định.
Về phía Công cụ cho nhà phát triển, khi setElementStyles được gọi từ tác nhân, tính năng hỗ trợ AI sẽ sử dụng các kiểu trang của trình kiểm tra để ghi lại thay đổi cho bộ chọn phần tử. Tính năng lồng CSS được dùng để đặt tên cho thay đổi và tăng độ cụ thể của bộ chọn phần tử. Do đó, quy tắc CSS mẫu do tác nhân tạo sẽ có dạng như sau:
.ai-style-change-1 { /* the ID is incremented for each change*/
.element-selector { /* Element selector is computed based on the element setElementStyles was called on. */
color: blue;
}
}
Mặc dù cách này không giải quyết được tất cả xung đột kiểu có thể xảy ra trên trang, nhưng cách này hiệu quả trong hầu hết các trường hợp.
Lợi ích của việc sử dụng các tệp kiểu của trình kiểm tra so với các kiểu nội tuyến là bằng cách này, các thay đổi do tác nhân thực hiện cũng xuất hiện trong bảng điều khiển Thay đổi, giúp bạn dễ dàng theo dõi những thay đổi đối với kiểu phần tử đã được thực hiện và những thay đổi mà nhà phát triển cần chuyển sang mã nguồn cơ bản. Việc tích hợp với bảng điều khiển Thay đổi cũng cho phép khôi phục các thay đổi nếu không cần thay đổi nữa.
Cho phép người dùng quan sát hành động của tác nhân
Khi thêm các tính năng của tác nhân vào một sản phẩm, điều quan trọng là phải làm cho các hành động của tác nhân minh bạch với người dùng để họ có cơ hội theo dõi, hiểu và có thể can thiệp.
Do đó, để được trợ giúp của AI, chúng tôi hướng dẫn Gemini sắp xếp các câu trả lời theo một định dạng cụ thể, thêm vào phần mở đầu:
You are going to answer to the query in these steps:
* THOUGHT
* TITLE
* ACTION
* ANSWER
* SUGGESTIONS
Use THOUGHT to explain why you take the ACTION. Use TITLE to provide a short summary of the thought.
Sau đó, cấu trúc này được dùng để trình bày các quá trình suy nghĩ và hành động của Gemini dưới dạng các bước thu gọn ban đầu, ngăn chặn tình trạng quá tải thông tin trong khi vẫn cho phép người dùng kiểm tra các chi tiết cơ bản hoặc dừng thực thi trong trường hợp có hiệu ứng phụ ngoài mong muốn.
Phương pháp này không chỉ là quan sát AI mà còn là chủ động học hỏi từ AI. Bằng cách mở rộng các phần này, người dùng có thể phân tích dữ liệu mà Gemini cho là liên quan để gỡ lỗi một vấn đề cụ thể và hiểu được quy trình mà vấn đề đó tuân theo. Tính minh bạch này cho phép người dùng học hỏi từ các chiến lược gỡ lỗi của AI, nhờ đó, họ có thể áp dụng các kỹ thuật tương tự cho các thử thách trong tương lai, ngay cả khi không có AI.
Để nâng cao trải nghiệm người dùng hơn nữa, tính năng hỗ trợ AI cũng đưa ra các đề xuất phù hợp với ngữ cảnh sau câu trả lời của AI. Những đề xuất này giúp đơn giản hoá cuộc trò chuyện, đưa ra ý tưởng cho bước gỡ lỗi tiếp theo hoặc thậm chí cho phép người dùng trực tiếp thực thi các bản sửa lỗi được đề xuất chỉ bằng một lần nhấp.
Ban đầu, để tạo tiêu đề bước và đề xuất trong tính năng hỗ trợ bằng AI, chúng tôi cân nhắc sử dụng một mô hình riêng biệt, nhỏ hơn dành riêng cho việc tóm tắt. Tuy nhiên, chúng tôi nhận thấy rằng mẫu ReAct (cấu trúc suy luận của Gemini thành một vòng lặp "Suy nghĩ" và "Hành động") có thể được mở rộng một cách hiệu quả. Vì vậy, thay vì giới thiệu một mô hình thứ hai (cũng sẽ có độ trễ bổ sung), chúng tôi đã sửa đổi lệnh gọi để hướng dẫn Gemini không chỉ tạo "Suy nghĩ" và "Hành động" cốt lõi, mà còn tạo các tiêu đề ngắn gọn và đề xuất hữu ích trong cùng một vòng lặp ReAct.
Phát triển dựa trên Eval
Quá trình phát triển tính năng hỗ trợ AI để tạo kiểu được thúc đẩy bởi một quy trình đánh giá nghiêm ngặt. Để đo lường hiệu suất và xác định những điểm cần cải thiện, chúng tôi đã tuyển chọn một bộ sưu tập toàn diện các ví dụ gỡ lỗi web trong thực tế, đề cập đến các vấn đề thường gặp về tình trạng tràn bộ nhớ đệm, thành phần web, ảnh động và nhiều vấn đề khác. Điều này cho phép chúng tôi lập bản đồ phạm vi của không gian vấn đề gỡ lỗi web và hiểu rõ các thách thức liên quan. Nhưng đó là một công việc không bao giờ kết thúc: với các tính năng mới được thêm vào nền tảng web một cách thường xuyên, chúng ta cần cập nhật các ví dụ đó trong tương lai.
Những ví dụ đó được đưa vào quy trình đánh giá tự động, ghi lại các phản hồi của Gemini. Sau đó, dữ liệu từ các lần chạy kiểm thử tự động đó sẽ được cung cấp trong một công cụ được tạo tuỳ chỉnh, trong đó chúng tôi đánh giá hiệu suất của Gemini về tính năng hỗ trợ AI theo các tiêu chí được xác định trước theo cách thủ công. Điều này sẽ giúp chúng tôi định hướng các nỗ lực phát triển tiếp theo.
Phương pháp dựa trên đánh giá này đảm bảo rằng tất cả các thay đổi, cho dù là tinh chỉnh các hành vi hiện có hay giới thiệu các tính năng mới, đều được xác minh cẩn thận để vừa đạt được các điểm cải tiến dự kiến vừa ngăn chặn sự hồi quy trong chức năng hiện có.
Để nâng cao hơn nữa quy trình đánh giá, chúng tôi đang tìm hiểu các phương thức xác minh tự động, bao gồm:
- Xác nhận để xác nhận việc áp dụng bản sửa lỗi đúng cách
- Kiểm tra dựa trên mã để ngăn Gemini tạo ra kết quả không mong muốn
- Sử dụng LLM làm giám khảo, dựa trên các tiêu chí cụ thể, để bán tự động hoá và đẩy nhanh quá trình đánh giá thủ công
Mặc dù quy trình xác minh tự động giúp mở rộng quy mô, nhưng ý kiến phản hồi của con người cũng rất quan trọng. Chúng tôi đang thu thập ý kiến phản hồi của con người thông qua các nút bỏ phiếu bên dưới mỗi câu trả lời trong tính năng hỗ trợ bằng AI để tìm hiểu mức độ hài lòng của người dùng. Nút Báo cáo bổ sung cho phép người dùng đưa ra ý kiến phản hồi chính xác hơn đối với những câu trả lời có thể kháng nghị.
Chèn lời nhắc
Một hạn chế đã được ghi nhận và công bố rộng rãi của LLM là chúng dễ bị chèn lời nhắc. Chèn lời nhắc là kỹ thuật tìm cách ghi đè các hướng dẫn hệ thống ban đầu của LLM, khiến LLM xuất ra nội dung không phải do nhà phát triển dự định.
Hầu hết các mô hình hiện đã tích hợp các biện pháp giảm thiểu để chèn lời nhắc, Gemini cũng vậy. Ngoài ra, để hỗ trợ AI, chúng tôi cũng cố gắng giảm thiểu vấn đề này trong phần mở đầu bằng cách đưa vào hướng dẫn sau:
If the user asks a question about religion, race, politics, sexuality, gender, or other sensitive topics, answer with "Sorry, I can't answer that. I'm best at questions about debugging web pages.
Mặc dù cách này hiệu quả với một số câu hỏi rõ ràng là lạc đề, nhưng chưa hoàn hảo. Một hạn chế mà chúng tôi nhận thấy là các cụm từ tìm kiếm ngắn và mơ hồ có thể bị phân loại là lạc đề.
Xây dựng dựa trên nền tảng vững chắc
Khi lần đầu tiên giới thiệu AI cho sản phẩm, bạn nên thực hiện từng bước, thay vì thực hiện một bước nhảy lớn cùng một lúc. Đó cũng là cách chúng tôi tiếp cận vấn đề này để hỗ trợ AI. Với tất cả những gì đã học được khi xây dựng trình tạo kiểu, chúng tôi đã tạo một nền tảng vững chắc để mở rộng tính năng hỗ trợ AI sang các phần khác của DevTools sau này.
Sau khi giải quyết được hầu hết các thách thức lớn hơn khi làm việc trên tác nhân tạo kiểu, chỉ vài tháng sau, chúng tôi đã có thể giới thiệu tính năng hỗ trợ AI cho mạng, hiệu suất và nguồn, đồng thời có thể tập trung vào các thách thức riêng lẻ của chúng.
Ảnh hưởng bảo mật khi xử lý các yêu cầu mạng
Tính năng hỗ trợ AI cho mạng cho phép người dùng thảo luận về các yêu cầu mạng cụ thể với Gemini, sử dụng dữ liệu từ yêu cầu đó làm ngữ cảnh cho cuộc trò chuyện. Cụ thể, dữ liệu sau đây sẽ được gửi đến Gemini:
- Tiêu đề yêu cầu: Một tập hợp con các tiêu đề do trình duyệt gửi đến máy chủ.
- Tiêu đề phản hồi: Một tập hợp con các tiêu đề do máy chủ trả về.
- Trạng thái phản hồi: Mã trạng thái HTTP cho biết phản hồi của máy chủ (ví dụ: 200, 404).
- Thời gian: Thông tin chi tiết về thời gian bao gồm nhiều giai đoạn của yêu cầu, chẳng hạn như thiết lập kết nối và chuyển dữ liệu.
- Chuỗi trình tạo yêu cầu: Trình tự các thao tác và tập lệnh đã khởi tạo yêu cầu.
Mặc dù tiêu đề rất quan trọng để hiểu đầy đủ cách một yêu cầu được tạo, nhưng tiêu đề cũng tiềm ẩn rủi ro bảo mật: tiêu đề có thể chứa thông tin xác thực như khoá API, mã thông báo phiên hoặc thậm chí là mật khẩu thuần tuý. Để bảo vệ những thông tin nhạy cảm như vậy, chúng tôi không truyền tất cả tiêu đề đến Gemini. Thay vào đó, chúng tôi duy trì một danh sách cho phép các tiêu đề được phép. Các giá trị của tiêu đề không có trong danh sách cho phép sẽ được thay thế bằng <redacted>. Phương pháp này đảm bảo rằng Gemini nhận được bối cảnh cần thiết trong khi vẫn bảo vệ dữ liệu người dùng.
Thích ứng với nhiều định dạng dữ liệu
Tính năng hỗ trợ AI cho nguồn cho phép nhà phát triển đặt câu hỏi về tệp nguồn trong bảng điều khiển Nguồn, ví dụ: "Tệp này dùng để làm gì?".
Dữ liệu về tệp, bao gồm tên tệp, nội dung tệp và liệu tệp đó có được liên kết nguồn hay không, tất cả đều được gửi trong một lời nhắc. Cách này hoạt động hiệu quả vì chỉ là văn bản thuần tuý. Tuy nhiên, các tệp văn bản lớn hoặc tệp nhị phân lại là một thách thức đối với LLM. Đối với các tệp nhị phân, chúng tôi quyết định cho biết nội dung là nhị phân trong lời nhắc và không gửi nội dung thực tế nào. Đối với các tệp văn bản lớn, chúng tôi chỉ gửi một phần nhỏ nội dung lấy từ đầu tệp.
Đối với tính năng hỗ trợ AI về hiệu suất, cho phép nhà phát triển đặt câu hỏi về một tác vụ cụ thể từ hồ sơ hiệu suất đã ghi lại, có một thách thức tương tự là tạo một bản trình bày phù hợp với cửa sổ ngữ cảnh của Gemini và cũng có thể được diễn giải để cung cấp thêm thông tin chi tiết.
Để tạo bản trình bày như vậy từ hồ sơ hiệu suất, chúng tôi đã tạo một trình chuyển đổi tuần tự chuyên dụng có tên là AiCallTree. Trình chuyển đổi tuần tự này định dạng cây lệnh gọi cho một tác vụ theo cách mà LLM có thể xử lý. Từ giờ trở đi, chúng ta cũng sẽ khám phá chiến lược ReAct tại đây để giảm thiểu lượng dữ liệu cần gửi trước cho Gemini.
Trợ lý AI trong tương lai
Kết quả của tất cả công việc này hiện đã có trong Chrome 132, bao gồm cả tính năng hỗ trợ AI cho kiểu, mạng, nguồn và hiệu suất. Chúng tôi hy vọng bạn sẽ thích sử dụng công cụ này như chúng tôi đã mong muốn khi xây dựng.
Để biết nên bắt đầu từ đâu, hãy xem hướng dẫn nhanh về tính năng hỗ trợ AI toàn diện với nhiều lời nhắc minh hoạ để thử trên các trang của riêng bạn và nhớ cho chúng tôi biết suy nghĩ của bạn trong cuộc thảo luận về lỗi đang mở.