DevTools cung cấp một bảng điều khiển trợ giúp AI giúp bạn hiểu rõ trang web của mình và khắc phục các vấn đề bằng cách trò chuyện với một tác nhân AI.
Với Trợ giúp AI, bạn có thể gỡ lỗi định kiểu, mạng, hiệu suất và nguồn của trang web.
Để trò chuyện hiệu quả với Gemini trong bảng điều khiển trợ giúp 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 cuộc trò chuyện.
Mở bảng điều khiển Trợ giúp AI
Bảng điều khiển Trợ giúp AI sẽ mở ra trong ngăn.
Để mở bảng điều khiển, hãy nhấp vào nút Trợ giúp AI nằm ở điểm truy cập chung ở bên phải 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 (đã chọn bối cảnh cuộc trò chuyện) trực tiếp từ các 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 tuỳ chọn câu lệnh phổ biến trong trình đơn theo bối cảnh Gỡ lỗi bằng AI.
Thông qua trình đơn lệnh
Để mở trợ giúp AI thông qua trình đơn lệnh, hãy nhập AI rồi chạy lệnh Hiện trợ giúp AI có huy hiệu Ngăn bên cạnh.
Thông qua trình đơn "Công cụ khác"
Ngoài ra, ở góc trên cùng bên phải, hãy chọn Tuỳ chọn khác > Công cụ khác > Trợ giúp AI.
Câu lệnh
Khi bắt đầu một cuộc trò chuyện mới, Trợ giúp AI sẽ đưa ra các câu lệnh mẫu để giúp bạn nhanh chóng bắt đầu.
Nhấp vào bất kỳ câu lệnh nào để đ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.
Ngoài ra, hãy nhập câu lệnh hoặc câu hỏi của riêng bạn 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 ở dạng tự do, bạn có thể đặt các câu hỏi mở ở cấp cao hơn mà không cần có bối cảnh trước đó. Ví dụ:
How to use DevTools to debug accessibility?Trợ giúp AI sẽ chạy một cuộc kiểm tra Lighthouse về khả năng hỗ trợ tiếp cận để 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?Trợ giúp 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 để bạn có thể chọn một yêu cầu làm bối cảnh cuộc trò chuyện chỉ bằng một lượt nhấp.
What performance issues exist on the page?Trợ giúp AI sẽ tự động ghi lại dấu vết hiệu suất với các chế độ cài đặt mà bạn đã chọn để trả lời câu lệnh này.
Các câu lệnh như
How do I use the Animation panel?hoặcWhere is the high contrast setting in DevTools?sẽ cung cấp trợ giúp trực tiếp cho chính DevTools.
Sau khi bạn bắt đầu cuộc trò chuyện, Trợ giúp AI sẽ tự động cập nhật bối cảnh dựa trên các hành động của bạn khi cuộc trò chuyện trống, đồng thời tôn trọng các 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ợ giúp AI từ một bảng điều khiển, bối cảnh cuộc trò chuyện tương ứng sẽ được chọn trong hộp trò chuyện để 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 bối cảnh 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 dấu vết 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 tệp đó.
Tiếp theo, hãy tìm hiểu thêm về cách sử dụng Trợ giúp AI với các bảng điều khiển khác.
Trợ giúp AI cho kiểu
Sử dụng bảng điều khiển Trợ giúp AI cho kiểu để hiểu bố cục tổng thể của một trang web, các kiểu phần tử cụ thể và nhận các bản sửa lỗi do AI tạo cho các lỗi CSS.
Mở Trợ giúp AI thông qua bảng điều khiển Phần tử
Để mở Trợ giúp AI thông qua bảng điều khiển Phần tử, khi kiểm tra một nút DOM, hãy nhấp chuột phải vào nút đó rồi chọn tuỳ chọn Hỏi AI.
Khi bạn mở Trợ giúp AI như thế này, phần tử DOM được kiểm tra sẽ được chọn trước làm phần tử bối cảnh cho cuộc trò chuyện.
Ngoài ra, hãy nhấp vào nút nổi được đính kèm vào một nút DOM được di chuột qua.
Bối cảnh trò chuyện
Các cuộc trò chuyện với Trợ giúp AI luôn liên quan đến phần tử hiện được kiểm tra, đây là phần tử cuối cùng được chọn trong cây DOM của bảng điều khiển Phần tử. Tham chiếu đến phần tử này xuất hiện ở góc dưới bên trái của bảng điều khiển.
Thay đổi bối cảnh bằng cách sử dụng trình chọn phần tử bên cạnh phần tử hiện tại hoặc bằng cách chọn trong cây DOM của bảng điều khiển Phần tử.
Khi đã chọn bối cảnh, bạn có thể chụp ảnh màn hình của khung nhìn rồi gửi ảnh đó vào cuộc trò chuyện. Nhấp vào nút Chụp ảnh màn hình bên cạnh trường nhập dữ liệu cuộc trò chuyện.
Bạn có thể sử dụng ảnh chụp màn hình để cung cấp thêm bối cảnh trực quan cho câu lệnh của mình, chẳng hạn như để kiểm tra xem tất cả các nút hiển thị có cùng khoảng cách hay không.
Mặc dù phần tử hiện được kiểm tra là nền tảng của cuộc trò chuyện, nhưng Trợ giúp AI có quyền truy cập vào tất cả các API web để thu thập thêm thông tin từ trang được kiểm tra. Điều này bao gồm việc truy vấn các phần tử khác bằng document.querySelector hoặc đánh giá các kiểu đã tính toán.
Trợ giúp AI cho mạng
Sử dụng bảng điều khiển Trợ giúp AI cho mạng để hiểu các yêu cầu do trang web của bạn gửi.
Mở Trợ giúp AI thông qua bảng điều khiển Mạng
Để mở Trợ giúp AI thông qua bảng điều khiển Mạng, hãy nhấp chuột phải vào một yêu cầu rồi chọn tuỳ chọn Hỏi AI.
Khi bạn mở Trợ giúp AI như thế này, yêu cầu mạng đã chọn sẽ được chọn trước làm bối cảnh cho cuộc trò chuyện.
Ngoài ra, hãy nhấp vào nút nổi bên cạnh yêu cầu mạng mà bạn di chuột qua.
Bối cảnh trò chuyện
Các cuộc trò chuyện với Trợ giúp AI liên quan đến yêu cầu mạng hiện được chọn trong danh sách yêu cầu của bảng điều khiển Mạng. Tham chiếu đến yêu cầu này xuất hiện ở góc dưới bên trái của bảng điều khiển.
Thay đổi bối cảnh bằng cách nhấp vào một yêu cầu khác trong bảng điều khiển Mạng.
Trợ giúp AI đang sử dụng URL yêu cầu, tiêu đề, thời gian và chuỗi trình khởi tạo yêu cầu để trả lời câu hỏi của bạn.
Quan trọng: các tiêu đề có thể chứa thông tin nhạy cảm sẽ tự động được chỉnh sửa.
Nhấp vào nút Mở rộng
trong khối Analyzing network data sau khi bắt đầu cuộc trò chuyện để xem dữ liệu thô
mà Trợ giúp AI sử dụng.
Trợ giúp AI cho hiệu suất
Sử dụng bảng điều khiển Trợ giúp AI cho hiệu suất để hiểu các hồ sơ hiệu suất được ghi lại trong bảng điều khiển Hiệu suất.
Mở Trợ giúp AI thông qua bảng điều khiển Hiệu suất
Để mở trợ giúp AI từ bảng điều khiển Hiệu suất, trước tiên hãy ghi lại hồ sơ hiệu suất.
Tuỳ thuộc vào nội dung bạn muốn điều tra, bạn có thể mở bảng điều khiển **trợ giúp AI** thông qua từng thông tin chi tiết về hiệu suất hoặc cho các hoạt động trong chế độ xem dấu vết hiệu suất.
Thông tin chi tiết về hiệu suất
Trong thẻ Thông tin chi tiết, hãy mở một thông tin chi tiết, chẳng hạn như **LCP theo giai đoạn, sau đó nhấp vào nút Hỏi AI**.
DevTools sẽ mở bảng điều khiển Trợ giúp AI với thông tin chi tiết về hiệu suất này được chọn trước làm bối cảnh cho cuộc trò chuyện.
Chế độ xem dấu vết hiệu suất
Để mở Trợ giúp AI thông qua chế độ xem dấu vết, hãy nhấp chuột phải vào một hoạt động rồi chọn tuỳ chọn Hỏi AI.
Trong trường hợp này, hoạt động này được chọn trước làm bối cảnh cho cuộc trò chuyện.
Bối cảnh trò chuyện
Hoạt động hiệu suất đã chọn được dùng làm bối cảnh cho cuộc trò chuyện của bạn với Trợ giúp AI. Tham chiếu đến hoạt động này xuất hiện ở góc dưới bên trái của bảng điều khiển.
Thông tin chi tiết về hiệu suất
Nếu bạn nhấp vào Hỏi AI cho một thông tin chi tiết cụ thể về hiệu suất, bạn sẽ thấy thông tin chi tiết này được chọn làm bối cảnh. Bạn có thể nhấp vào Hỏi AI trong các thông tin chi tiết khác để thay đổi lựa chọn của mình.
Sau khi bắt đầu cuộc trò chuyện, hãy mở rộng phần Analyzing insight: ... để xem dữ liệu thô mà Trợ giúp AI sử dụng.
Chế độ xem dấu vết
Bạn có thể chọn các mục khác nhau trong dấu vết hiệu suất và bối cảnh sẽ thay đổi cho phù hợp.
Trợ giúp AI đang sử dụng thời gian từ cây lệnh gọi đã chọn để trả lời câu lệnh của bạn.
Nhấp vào nút
trong khối Analyzing call tree sau khi bắt đầu cuộc trò chuyện để xem
dữ liệu thô mà Trợ giúp AI sử dụng.
Trợ giúp AI cho nguồn
Sử dụng bảng điều khiển Trợ giúp AI cho nguồn để hiểu các tệp mà trang web của bạn tải và sử dụng.
Mở Trợ giúp AI thông qua bảng điều khiển Nguồn
Để mở Trợ giúp AI thông qua bảng điều khiển Nguồn, hãy nhấp chuột phải vào một tệp rồi chọn tuỳ chọn Hỏi AI.
Khi bạn mở Trợ giúp AI như thế này, tệp đã chọn sẽ được chọn trước làm bối cảnh cho cuộc trò chuyện.
Ngoài ra, hãy nhấp vào nút nổi khi di chuột qua một tệp.
Bối cảnh trò chuyện
Tệp đã chọn được dùng làm bối cảnh cho cuộc trò chuyện của bạn với Trợ giúp AI. Tham chiếu đến tệp này xuất hiện ở góc dưới bên trái của bảng điều khiển.
Thay đổi bối cảnh bằng cách nhấp vào một tệp khác trong bảng điều khiển Nguồn.
Trợ giúp AI đang sử dụng tên, URL, bản đồ nguồn (nếu có) và nội dung của tệp đã chọn để trả lời câu hỏi của bạn.
Nhấp vào nút
trong khối Analyzing file sau khi bắt đầu cuộc trò chuyện để xem dữ liệu thô
mà Trợ giúp AI sử dụng.
Luồng trò chuyện
Việc gửi câu lệnh sẽ bắt đầu cuộc trò chuyện với nhân viên tạo kiểu. Để nhận được thông tin cần thiết để trả lời câu lệnh của bạn một cách hiệu quả nhất, nhân viê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 được thể hiện theo các bước. Trạng thái bước ban đầu là Investigating….
Nhãn bước sẽ cập nhật khi nhân viên thực thi các hành động cụ thể hơn để giải quyết câu hỏi của bạn.
Sau khi nhân viên đưa ra câu trả lời cuối cùng, câu trả lời sẽ xuất hiện bên dưới các bước điều tra, bao gồm cả các đề xuất cho câu lệnh tiếp theo.
Nhấp vào bất kỳ câu lệnh đề xuất nào để tiếp tục cuộc trò chuyện. Nhấp vào
của một bước điều tra để hiểu rõ hơn về những gì Trợ giúp AI đã thực hiện ở chế độ nền.
Khi mở rộng một khối tiến trình, bạn sẽ thấy mã mà nhân viên đã thực thi, cùng với giá trị trả về của mã đó. Sao chép mã đã thực thi để sử dụng thêm, chẳng hạn như thực thi mã đó bằng bảng điều khiển Bảng điều khiển.
Cuộc trò chuyện đã tạm dừng
Trợ giúp AI có thể tạo mã có tác dụng phụ. Khi điều đó xảy ra, 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 lại mã do nhân viên đề xuất. Nhấp vào Tiếp tục để tiếp tục hoặc Huỷ để ngăn thực thi.
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 đã kết nối, bạn có thể lưu các thay đổi về kiểu do Trợ giúp AI đề xuất vào 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 tệp siêu dữ liệu và kết nối thư mục 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 thông qua bảng điều khiển Phần tử.
Yêu cầu Trợ giúp AI sửa đổi CSS.
Trợ giúp AI có thể tạo mã và tạm dừng quá trình 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 vào 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 làm việc này, hãy xem:
Không có câu trả lời
Trợ giúp AI có thể không đưa ra câu trả lời vì nhiều lý do.
Nếu bạn cho rằng câu lệnh của mình là nội dung mà Trợ giúp AI có thể thảo luận, hãy báo cáo lỗi.
Nhật ký trò chuyện
Sau khi bạn bắt đầu cuộc trò chuyện, mọi câu trả lời tiếp theo đều dựa trên các lượt tương tác trước đó giữa bạn và AI.
Trợ giúp AI sẽ lưu nhật ký trò chuyện giữa các phiên để bạn có thể truy cập vào các cuộc trò chuyện trước đó 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 cuộc trò chuyện mới với bối 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 cuộc trò chuyện trước đó, 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ợ giúp 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 để tìm hiểu 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á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.