Tính năng mới trong Công cụ cho nhà phát triển, Chrome 131

Gỡ lỗi CSS bằng Gemini

Chrome DevTools có bảng điều khiển trợ lý AI thử nghiệm mới, nơi bạn có thể trò chuyện với Gemini và nhận được sự trợ giúp để gỡ lỗi CSS.

Thử ngay bây giờ! Trong bảng Phần tử, hãy nhấp chuột phải vào một phần tử rồi chọn Hỏi AI hoặc nhấp vào nút tương ứng bên cạnh phần tử đó. Công cụ dành cho nhà phát triển sẽ mở bảng trợ lý AI mới.

Bảng điều khiển mới sẽ nhắc bạn bật chế độ cài đặt tương ứng. Đảm bảo bạn đáp ứng Các yêu cầu, bật nút chuyển chế độ cài đặt rồi quay lại bảng điều khiển Trợ lý AI. Thao tác này sẽ lấy phần tử bạn chọn làm ngữ cảnh. Nhập câu hỏi của bạn về phần tử đó.

Để tìm hiểu thêm về cách sử dụng hiệu quả nhất bảng điều khiển mới này, hãy xem bài viết 5 điều thú vị có thể làm với tính năng hỗ trợ AI trong Công cụ cho nhà phát triển và xem Tính năng hỗ trợ AI để tạo kiểu.

Nhóm DevTools rất mong nhận được ý kiến phản hồi của bạn. Bạn có thể để lại ý kiến tại crbug.com/364805393.

Kiểm soát các tính năng AI trong một thẻ cài đặt riêng

Giờ đây, bạn có thể quản lý tất cả các tính năng AI ở một nơi: chế độ cài đặt mới Cài đặt > thẻ Đổi mới dựa trên AI. Trang này liệt kê những điều cần cân nhắc quan trọng, mô tả các tính năng AI và cho phép bạn bật/tắt từng tính năng.

Để biết thêm thông tin, hãy xem phần Cài đặt > Các tính năng cải tiến dựa trên AI.

Chỉ cần một lần nhấp là bạn có thể xem thông tin chi tiết về bảng điều khiển

Công cụ cho nhà phát triển không còn yêu cầu bật tính năng đồng bộ hoá chế độ cài đặt cho các tính năng AI nữa. Vì vậy, Thông tin chi tiết về bảng điều khiển đã phát hành trước đó cùng với Sự trợ giúp của AI cho việc tạo kiểu chỉ cách bạn một cú nhấp chuột.

Nếu bạn đã đăng nhập vào Chrome, hãy bật các tính năng này trong phần Cài đặt > Các tính năng cải tiến dựa trên AI.

Cải thiện bảng điều khiển Hiệu suất

Phiên bản này mang đến một số điểm cải tiến cho bảng điều khiển Hiệu suất.

Chú thích và chia sẻ kết quả hiệu suất

Bảng Hiệu suất có thẻ Chú thích mới trong một thanh bên có thể mở rộng ở bên trái, giúp đơn giản hoá quy trình tạo ghi chú để khám phá dấu vết và cộng tác khi chia sẻ kết quả hiệu suất.

Giờ đây, bạn có thể gắn nhãn và kết nối các sự kiện bằng mũi tên, đồng thời làm nổi bật các khoảng thời gian ngay trên dấu vết. Sau đó, bạn có thể lưu, chia sẻ và tải các dấu vết được chú thích trở lại bảng điều khiển Hiệu suất.

Xem thông tin chi tiết về hiệu suất ngay trong bảng điều khiển Hiệu suất

Giờ đây, bạn có thể khám phá thông tin chi tiết hữu ích trong thẻ Thông tin chi tiết mới ở thanh bên trái của bảng điều khiển Hiệu suất. Thông tin chi tiết được tổng hợp từ báo cáo Lighthouse và bảng điều khiển Thông tin chi tiết về hiệu suất sắp bị ngừng sử dụng.

Thẻ Thông tin chi tiết hướng đến việc cung cấp thông tin phân tích có hướng dẫn và đề xuất thông tin chi tiết hữu ích về những vấn đề hiệu suất có thể làm chậm trang web của bạn. Để sử dụng thông tin chi tiết, hãy mở thẻ này trong thanh bên trái của bảng điều khiển Hiệu suất, mở rộng các danh mục khác nhau, rồi di chuột và nhấp vào các mục. Bảng điều khiển Hiệu suất sẽ làm nổi bật các sự kiện tương ứng trong dấu vết.

Nhóm Công cụ cho nhà phát triển rất mong nhận được ý kiến phản hồi của bạn về mức độ hữu ích của thông tin chi tiết, cách cải thiện thông tin chi tiết và trải nghiệm của bạn khi sử dụng thông tin chi tiết với các công cụ khác, chẳng hạn như PageSpeed Insights và Lighthouse. Bạn có thể gửi ý kiến phản hồi tại crbug.com/371170842.

Dễ dàng phát hiện các thay đổi quá mức về bố cục

Đường Layout shifts (Sự thay đổi bố cục) có giao diện mới. Giờ đây, các thay đổi về bố cục được đánh dấu bằng các hình kim cương màu tím (dễ thấy hơn) và được nhóm thành các cụm dựa trên khoảng cách của chúng trên dòng thời gian. Cả các ca và cụm ca đều có một bảng được sắp xếp theo thời gian, điểm số, phần tử và các nguyên nhân có thể gây ra vấn đề trong thẻ Tóm tắt.

Ngoài ra, chế độ xem chỉ số trực tiếp sẽ nhận được nhật ký Layout shifts (Sự thay đổi bố cục) kèm theo điểm số và các phần tử bên cạnh thẻ Interactions (Lượt tương tác).

Vấn đề về Chromium: 369100729.

Phát hiện các ảnh động không được ghép

Giờ đây, dải Ảnh động sẽ cho bạn biết thông tin hữu ích về ảnh động không được ghép:

• Đặt tên cho ảnh động theo thuộc tính CSS tương ứng (nếu có).
• Đánh dấu các ảnh động không được ghép bằng các hình tam giác màu đỏ trong bản theo dõi.
• Cho bạn biết lý do kết hợp không thành công trong thẻ Tóm tắt.

Để biết thêm thông tin, hãy xem phần Chỉ sử dụng các thuộc tính của thành phần kết hợp và quản lý số lượng lớp.

Vấn đề về Chromium: 41006273.

Tính năng đồng thời phần cứng chuyển sang Cảm biến

Chế độ cài đặt Mức độ đồng thời của phần cứng sẽ chuyển từ bảng Hiệu suất sang một vị trí phù hợp hơn là bảng Cảm biến.

Vấn đề về Chromium: 371463665.

Bỏ qua các tập lệnh ẩn danh và tập trung vào mã của bạn trong dấu vết ngăn xếp

Giờ đây, dấu vết ngăn xếp trong Bảng điều khiển sẽ phát hiện, bỏ qua, thu gọn và (nếu được mở rộng) làm mờ các khung hình đến từ những tệp trong danh sách bỏ qua một cách chính xác. Trước đây, tính năng này không làm mờ tên hàm trong dấu vết mở rộng.

Bạn cũng có thể bật chế độ cài đặt mới Cài đặt > Danh sách bỏ qua > check_box Các tập lệnh ẩn danh từ eval hoặc bảng điều khiển để đặt DevTools bỏ qua các tập lệnh ẩn danh không có URL nguồn.

Ngoài ra, khi bạn nhấp chuột phải và chọn Lưu dưới dạng... nhật ký bảng điều khiển, nhật ký này sẽ không lưu văn bản Hiện thêm/bớt.

Các vấn đề về Chromium: 40279542, 40945570, 345248263.

Elements > Styles (Phần tử > Kiểu): Hỗ trợ chế độ viết sideways-* cho lớp phủ lưới và từ khoá CSS-wide

Thẻ Phần tử > Kiểu hiện hỗ trợ những nội dung sau:

• Lớp phủ lưới trong khung hiển thị hiện hiển thị lưới cho chế độ viết sideways-rl và sideways-lr.
• Phân giải từ khoá trên toàn CSS. Trên thực tế, điều này có nghĩa là, ví dụ: nếu inherit là một màu, thì thẻ Styles (Kiểu) sẽ cho thấy một công cụ chọn màu bên cạnh.

Các vấn đề về Chromium: 40280717, 40706051, 40501131.

Bài kiểm tra Lighthouse cho các trang không phải HTTP ở chế độ khoảng thời gian và ảnh chụp nhanh

Giờ đây, Lighthouse có thể tạo báo cáo cho các trang không phải HTTP ở chế độ khoảng thời gian và chế độ chụp nhanh.

Hỗ trợ tiếp cận

Phiên bản này có những điểm cải thiện sau đây về khả năng hỗ trợ tiếp cận:

• Trong phần Nguồn > Trình chỉnh sửa, giờ đây, bạn có thể đóng các thẻ có tệp đang mở bằng cách đặt tiêu điểm vào nút X rồi nhấn phím Enter hoặc Space.
• Trong Hiệu suất, giờ đây, bạn có thể chọn một mục trong dấu vết và nhấn Phím cách để mở trình đơn theo bối cảnh.
• Trong mục Hiệu suất, thẻ Thông tin chi tiết trong thanh bên ở bên trái có thể truy cập bằng bàn phím và có thể "chuyển qua bằng phím tab".

Vấn đề về Chromium: 372411090.

Thông tin nổi bật khác

Sau đây là một số điểm cải tiến và bản sửa lỗi đáng chú ý trong bản phát hành này:

• Giờ đây, chế độ cài đặt điều tiết được đồng bộ hoá chính xác giữa các bảng Hiệu suất và Mạng (370332090).
• Ứng dụng > Dịch vụ nền > Tải suy đoán > Quy tắc hiện có nút {} in đẹp tương tự như Nguồn > Trình chỉnh sửa (40279147).
• Biểu thức trực tiếp: Giờ đây, khi bạn nhấn phím Tab sau khi chọn một lựa chọn tự động hoàn thành, thao tác này sẽ thoát khỏi trường chỉnh sửa thay vì thụt lề văn bản (349939551).
• Elements (Phần tử) > Styles (Kiểu): anchor() và anchor-size() hỗ trợ cú pháp mới, trong đó bạn có thể sắp xếp lại các đối số và bỏ qua hướng anchor-size() (343516786). Ngoài ra, đã khắc phục lỗi hiển thị dự phòng (365802559).
• Mạng: Đã khắc phục bản xem trước GraphQL (369931288).
• Hiệu suất: Hiện báo cáo tiến trình gia tăng của việc tải và xử lý dấu vết.
• WebAuthn: Giờ đây, thông tin xác thực được sửa đổi bằng các phương thức signal* sẽ được cập nhật linh hoạt (368467199).
• WebAssembly: Giờ đây, một cảnh báo trong Bảng điều khiển sẽ thông báo cho bạn nếu có nhiều biểu tượng gỡ lỗi cho một mô-đun WebAssembly và biểu tượng nào đang được sử dụng (40879198, 369515221).
• Lớp phủ Các chỉ số quan trọng về trang web sẽ bị xoá khỏi thẻ Kết xuất 328487897.
• Hiện tại, các tính năng AI tạo sinh không yêu cầu bạn đồng bộ hoá chế độ cài đặt Chrome.

Tải các kênh xem trước xuống

Hãy cân nhắc sử dụng Chrome Canary, Dev hoặc Beta làm trình duyệt phát triển mặc định. Các kênh xem trước này cho phép bạn truy cập vào các tính năng mới nhất của DevTools, kiểm thử các API nền tảng web tiên tiến và giúp bạn tìm thấy các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật hoặc bất kỳ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
• Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách mọi nội dung đã được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.