DevTools cung cấp một bảng điều khiển trợ lý AI giúp bạn hiểu rõ trang web của mình và khắc phục vấn đề bằng cách trò chuyện với một tác nhân AI tích hợp.
Bảng điều khiển Trợ lý AI được hỗ trợ bởi Gemini và có thể làm những việc sau:
- Chuyên về phát triển web.
- Có thể trả lời các câu hỏi chung về toàn bộ trang web cũng như cung cấp thông tin chi tiết cụ thể về nhiều chủ đề, bao gồm nhưng không giới hạn ở kiểu dáng, mạng, hiệu suất và nhiều chủ đề khác.
- Tự động thu hẹp và chọn ngữ cảnh cụ thể để bạn trò chuyện, chẳng hạn như các phần tử DOM, yêu cầu mạng, sự kiện theo dõi hiệu suất và nhiều nội dung khác.
- Có thể thực hiện các thao tác tự động như chạy kiểm tra và ghi lại dấu vết hiệu suất.
- Cung cấp hướng dẫn từng bước về các hành động và suy luận của hành động đó, đồng thời liên kết đến các phần có liên quan của Công cụ cho nhà phát triển để bạn có thể kiểm tra chúng chỉ bằng một lượt nhấp.
- Có thể đề xuất các thay đổi về mã và tạo một câu lệnh kèm theo thông tin chi tiết để tác nhân lập trình của bạn thực hiện.
Với trợ giúp AI, bạn có thể gỡ lỗi về định kiểu, mạng, hiệu suất, nguồn của trang web, v.v.
Để trò chuyện hiệu quả với Gemini trong bảng điều khiển Trợ lý AI, hãy tìm hiểu cách mở bảng điều khiển, đặt câu lệnh và kiểm soát luồng trò chuyện.
Mở bảng trợ giúp AI
Theo mặc định, bảng Trợ lý AI sẽ mở trong ngăn.
Để mở bảng điều khiển này, hãy nhấp vào nút Hỗ trợ của AI nằm ở điểm truy cập chung ở bên phải của thanh công cụ chính ở trên cùng.
Thông qua các bảng điều khiển
Bạn có thể mở bảng điều khiển này (với ngữ cảnh cuộc trò chuyện đã chọn) ngay từ bảng điều khiển Phần tử, Mạng, Nguồn hoặc Hiệu suất theo 2 cách:
Nhấp vào nút
Gỡ lỗi bằng AI bên cạnh một phần tử, yêu cầu mạng, tệp nguồn hoặc thông tin chi tiết mở rộng về hiệu suất.
Nhấp chuột phải vào một phần tử, yêu cầu, tệp hoặc mục nhập dấu vết rồi chọn một trong các lựa chọn câu lệnh phổ biến trong trình đơn theo bối cảnh Gỡ lỗi bằng AI.
Trong trình đơn lệnh
Để mở Tính năng hỗ trợ của AI trong trình đơn lệnh, hãy nhập AI rồi chạy lệnh Hiện tính năng hỗ trợ của AI. Lệnh này có huy hiệu Ngăn bên cạnh.
Trong trình đơn "Công cụ khác"
Hoặc ở góc trên cùng bên phải, hãy chọn biểu tượng Tuỳ chọn khác > Công cụ khác > Hỗ trợ của AI.
Đặt câu lệnh
Khi bạn bắt đầu một cuộc trò chuyện mới, trợ lý AI sẽ đưa ra các câu lệnh mẫu để giúp bạn bắt đầu nhanh chóng.
Nhấp vào một câu lệnh bất kỳ để điền sẵn vào trường nhập dữ liệu câu lệnh ở cuối bảng điều khiển.
Hoặc bạn có thể nhập câu lệnh hoặc câu hỏi của riêng mình vào trường nhập dữ liệu.
Để gửi câu lệnh, hãy nhấn Enter hoặc nhấp vào mũi tên ở bên phải trường nhập dữ liệu.
Câu lệnh mở không có bối cảnh
Với hộp trò chuyện tự do, bạn có thể đặt các câu hỏi mở ở cấp độ cao hơn mà không cần bối cảnh trước đó. Ví dụ:
How to use DevTools to debug accessibility?Hệ thống trợ giúp AI sẽ chạy một bài kiểm tra Lighthouse về khả năng hỗ trợ tiếp cận trước để trả lời câu lệnh của bạn một cách hiệu quả hơn.
What are the slowest network requests on this page?Tính năng hỗ trợ bằng AI sẽ cung cấp danh sách các yêu cầu đáng ngờ và đường liên kết đến các yêu cầu đó trong Bảng điều khiển mạng, nhờ đó, bạn có thể chọn một yêu cầu làm ngữ cảnh trò chuyện chỉ bằng một cú nhấp chuột.
What performance issues exist on the page?Trợ lý AI sẽ tự động ghi lại dấu vết hiệu suất bằng các chế độ cài đặt bạn chọn để trả lời câu lệnh này.
Các lời nhắc như
How do I use the Animation panel?hoặcWhere is the high contrast setting in DevTools?sẽ cung cấp thông tin trợ giúp trực tiếp về chính DevTools.
Sau khi bạn bắt đầu cuộc trò chuyện, trợ lý AI sẽ tự động cập nhật ngữ cảnh dựa trên hành động của bạn khi cuộc trò chuyện trống, đồng thời tôn trọng lựa chọn thủ công của bạn khi bạn thực hiện.
Câu lệnh có bối cảnh
Khi bạn mở trợ lý AI từ một bảng điều khiển, ngữ cảnh trò chuyện tương ứng sẽ được chọn trong hộp trò chuyện, nhờ đó bạn có thể trò chuyện cụ thể về nội dung bạn đã chọn.
Bất cứ lúc nào, bạn cũng có thể thay đổi ngữ cảnh theo cách thủ công bằng cách chọn một phần tử trong Phần tử, yêu cầu trong Mạng, mục nhập theo dõi trong Hiệu suất hoặc tệp trong Nguồn.
Bạn cũng có thể sao chép các phần của một tệp, chẳng hạn như từ bảng điều khiển Nguồn rồi dán vào cuộc trò chuyện để hỏi về chức năng của phần đó.
Tiếp theo, hãy tìm hiểu thêm về luồng trò chuyện trong trợ lý AI.
Luồng trò chuyện
Khi bạn gửi một câu lệnh, cuộc trò chuyện với nhân viên hỗ trợ sẽ bắt đầu. Để có được thông tin cần thiết nhằm trả lời câu lệnh của bạn một cách tốt nhất, tác nhân sẽ tạo và thực thi JavaScript gọi các API web.
Tiến trình của nhân viên hỗ trợ được hiển thị theo từng bước. Trạng thái ban đầu của bước là Investigating….
Nhãn bước ban đầu sẽ cập nhật khi tác nhân thực hiện các hành động cụ thể hơn để trả lời câu lệnh của bạn.
Tuỳ thuộc vào nội dung bạn đang gỡ lỗi, tác nhân phần mềm cũng có thể thực hiện các hành động trong Công cụ cho nhà phát triển, chẳng hạn như ghi lại dấu vết hiệu suất hoặc chạy các quy trình kiểm tra Lighthouse.
Hướng dẫn từng bước về tác nhân
Sau khi tạo câu trả lời cho câu lệnh của bạn, nhãn bước ban đầu sẽ thay đổi thành Hiện hướng dẫn của trợ lý hoặc Hiện quá trình suy nghĩ. Bạn có thể mở rộng nhãn này để xem các bước mà trợ lý đã thực hiện để phân tích dữ liệu trong một bảng điều khiển bên ở bên phải.
Các bước bao gồm:
- Các đoạn mã có thể mở rộng mà tác nhân đã thực thi cùng với dữ liệu được trả về. Bạn có thể sao chép mã này và thực thi trong Bảng điều khiển.
- Các tiện ích trình bày kết quả ở định dạng dễ đọc hơn.
Các tiện ích này có nút Hiện ở góc trên cùng bên phải để đưa bạn đến phần có liên quan của Công cụ cho nhà phát triển.
Câu lệnh nối tiếp
Sau khi đưa ra câu trả lời cuối cùng, trợ lý có thể đề xuất các câu hỏi tiếp theo. Nhấp vào một trong các lựa chọn để tiếp tục cuộc trò chuyện.
Tạo câu lệnh cho tác nhân lập trình
Để tạo câu lệnh cho tác nhân lập trình của bạn, hãy nhấp vào Sao chép vào tác nhân lập trình.
Tác nhân AI sẽ tóm tắt các phát hiện và thông tin chi tiết, đồng thời đưa ra một câu lệnh có thể hành động ở dạng tối giản hoặc ở định dạng Markdown mà con người có thể đọc được. Bạn có thể sao chép câu lệnh này vào bảng nhớ tạm và tiếp tục viết mã bằng một tác nhân AI mà bạn chọn.
Cuộc trò chuyện bị tạm dừng
Sự trợ giúp của AI có thể tạo mã có tác dụng phụ. Khi đó, cuộc trò chuyện sẽ tạm dừng trước khi mã được thực thi.
Khi cuộc trò chuyện tạm dừng, hãy xem xét mã do nhân viên hỗ trợ đề xuất. Nhấp vào Tiếp tục để tiến hành hoặc Huỷ để ngăn thực thi.
Bạn có thể kiểm tra các thay đổi được đề xuất trong mã trong bảng Changes (Thay đổi).
Tác nhân sẽ áp dụng các thay đổi trong Công cụ cho nhà phát triển, nhưng bạn có thể định cấu hình không gian làm việc để cho phép Công cụ cho nhà phát triển lưu các thay đổi vào nguồn của bạn.
Lưu các thay đổi vào không gian làm việc
Với thư mục không gian làm việc được kết nối, bạn có thể lưu các thay đổi về kiểu do trợ lý AI đề xuất trở lại các tệp nguồn CSS trên máy tính.
Để thực hiện việc này:
Trước tiên, hãy tạo một tệp siêu dữ liệu và kết nối một thư mục trong không gian làm việc.
Ngoài ra, bạn có thể thêm thư mục theo cách thủ công.
Bắt đầu cuộc trò chuyện từ bảng điều khiển Phần tử.
Yêu cầu trợ lý AI sửa đổi CSS của bạn.
Sự trợ giúp của AI có thể tạo mã và tạm dừng thực thi. Xem lại mã rồi nhấp vào Tiếp tục để kiểm thử các thay đổi trực tiếp.
Mở rộng phần Các thay đổi chưa lưu rồi nhấp vào Áp dụng cho không gian làm việc.
Xem lại các thay đổi trong
diffrồi nhấp vào Lưu tất cả.
Để tìm hiểu quy trình này, hãy xem:
Không có câu trả lời
Trợ lý AI có thể không đưa ra câu trả lời vì nhiều lý do.
Nếu bạn cho rằng trợ lý AI có thể thảo luận về câu lệnh của bạn, hãy báo cáo lỗi.
Lịch sử cuộc trò chuyện
Sau khi bạn bắt đầu một cuộc trò chuyện, mọi câu trả lời tiếp theo đều dựa trên những lượt tương tác trước đó giữa bạn và AI.
Tính năng trợ lý AI lưu nhật ký trò chuyện giữa các phiên, nhờ đó bạn có thể truy cập vào các cuộc trò chuyện trước đây ngay cả sau khi DevTools hoặc Chrome tải lại.
Sử dụng các nút điều khiển ở góc trên cùng bên trái của bảng điều khiển để kiểm soát nhật ký trò chuyện.
Bắt đầu lượt đo mới
Để bắt đầu một cuộc trò chuyện mới với ngữ cảnh trò chuyện hiện được chọn, hãy nhấp vào nút .
Tiếp tục
Để tiếp tục một cuộc trò chuyện trước đây, hãy nhấp vào nút rồi chọn cuộc trò chuyện đó trong trình đơn theo bối cảnh.
Xoá
Để xoá một cuộc trò chuyện khỏi nhật ký, hãy nhấp vào nút .
Đánh giá câu trả lời và đưa ra ý kiến phản hồi
Trợ lý AI là một tính năng thử nghiệm. Do đó, chúng tôi đang tích cực tìm kiếm ý kiến phản hồi của bạn để biết cách cải thiện chất lượng câu trả lời và trải nghiệm tổng thể.
Bình chọn câu trả lời
Đánh giá câu trả lời bằng cách sử dụng các nút Thích và Không thích bên dưới câu trả lời.
Báo cáo câu trả lời
Để báo cáo nội dung không phù hợp, hãy nhấp vào nút bên cạnh các nút bình chọn.