Tính năng mới trong DevTools, Chrome 135

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.

Đường liên kết đến nguồn và tập lệnh cho các lệnh gọi đến hồ sơ và hàm trong phần Hiệu suất

Thẻ Hiệu suất > Tóm tắt hiện cho bạn thấy các đường liên kết đến tập lệnh và nguồn gốc có liên quan cho các lệnh gọi hồ sơ và hàm, vì vậy, bạn không cần di chuột qua các sự kiện này trong dấu vết Chính.

Ngoài ra, các bản theo dõi Mạng và Chính hiện cho biết tên của bên thứ ba (nếu có) trong chú thích khi bạn di chuột qua các sự kiện.

Vấn đề về Chromium: 368541957.

Hỗ trợ dữ liệu thực địa "LCP theo pha"

Khi bật dữ liệu thực tế, thông tin chi tiết Hiệu suất > Thông tin chi tiết > LCP theo giai đoạn hiện cho bạn biết thời gian hiển thị hình ảnh ở phân vị thứ 75 trong Báo cáo trải nghiệm người dùng của Chrome trong một bảng bổ sung, nhờ đó, bạn có thể so sánh thời gian ngay trong thông tin chi tiết.

Thông tin chi tiết về "Cây phần phụ thuộc mạng"

Thẻ Hiệu suất > Thông tin chi tiết sẽ thêm thông tin chi tiết mới về Cây phụ thuộc mạng vào bộ sưu tập của thẻ này. Thông tin chi tiết này cho biết liệu bạn có yêu cầu quan trọng theo chuỗi hay không (điều này không được khuyến khích). Di chuột lên các yêu cầu được liệt kê trong thông tin chi tiết để xem các yêu cầu đó được làm nổi bật trong dải Network (Mạng).

Để tìm hiểu thêm, hãy xem bài viết Tránh tạo chuỗi các yêu cầu quan trọng.

Làm nổi bật ngăn xếp nặng nhất

Giờ đây, bảng Hiệu suất sẽ làm nổi bật các mục trong dấu vết Chính khi bạn di chuột lên các mục đó trong Cây lệnh gọi hoặc Từ dưới lên > Ngăn xếp nặng nhất ở thanh bên và làm mờ phần còn lại. Điều này cho phép bạn tìm thấy các mục lồng nhau trong ngăn xếp lệnh gọi mất nhiều thời gian nhất.

Chế độ xem dạng cây hỗ trợ tiếp cận trong thẻ Elements

Chế độ xem cây hỗ trợ tiếp cận toàn trang hiện được bật theo mặc định trong bảng điều khiển Elements (Phần tử).

Trước đây, bạn có thể duyệt xem một cây hỗ trợ tiếp cận riêng biệt trong thẻ Phần tử > Hỗ trợ tiếp cận. Giờ đây, bạn có thể nhấp vào nút accessibility_new Chuyển sang chế độ xem Cây hỗ trợ tiếp cận ở góc trên cùng bên phải của cây DOM trong bảng điều khiển Phần tử để chuyển đổi qua lại giữa cây DOM và cây hỗ trợ tiếp cận toàn trang. Nhờ đó, bạn có thể khám phá các cây này và mối quan hệ giữa chúng một cách dễ dàng hơn.

Cây hỗ trợ tiếp cận cho phép bạn kiểm tra cách công nghệ hỗ trợ nhìn thấy nội dung của bạn, đồng thời cho bạn biết các thuộc tính ARIA và thuộc tính hỗ trợ tiếp cận được tính toán của các nút DOM. Để tìm hiểu thêm, hãy xem bài viết Cây hỗ trợ tiếp cận đầy đủ trong Công cụ cho nhà phát triển của Chrome.

Vấn đề về Chromium: 40808541.

Cải thiện trạng thái trống cho nhiều bảng điều khiển

Các trạng thái trống (khi không có gì đang mở) cho nhiều bảng điều khiển, phần và thẻ đã được tinh giản để cho bạn biết chính xác những việc cần làm để bắt đầu sử dụng chúng. Một số trạng thái trống, chẳng hạn như trong bảng điều khiển Mạng, hiện có các nút hữu ích liên quan, chẳng hạn như Tải lại trang.

Lựa chọn "Hỏi AI" được chuyển xuống cuối trình đơn

Lựa chọn Hỏi AI hiện nằm ở cuối trình đơn thả xuống thay vì ở đầu.

Bạn có thể gửi ý kiến phản hồi về bảng điều khiển trợ lý AI tại crbug.com/364805393.

Lighthouse 12.4.0

Bảng Lighthouse hiện chạy Lighthouse 12.4.0.

Phiên bản này đánh dấu một số hoạt động kiểm tra hiệu suất là mang tính thông tin trong các điều kiện đạt thay vì ẩn chúng trong phần kiểm tra đã đạt. Xem danh sách đầy đủ các thay đổi.

Để tìm hiểu những kiến thức cơ bản về cách sử dụng bảng Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 40543651.

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:

• Hiệu suất > Tóm tắt: Thay thế 2 dòng Tổng thời gian và Thời gian tự thực hiện bằng một dòng Thời lượng. Dòng này cũng cho biết (self time) trong dấu ngoặc đơn (nếu có) (crbug.com/395572753).
• Vấn đề: Thêm các loại vấn đề mới: <select> vấn đề trong cây hỗ trợ tiếp cận và lỗi Chữ ký thông báo SRI xảy ra trong quá trình phân tích cú pháp hoặc xác thực trong dịch vụ mạng (crbug.com/381044049, crbug.com/347890366).
• Khả năng tiếp cận: thẻ Phần tử > Kiểu hiện phác thảo các phần tử mà bạn chuyển qua bằng cách sử dụng chế độ điều hướng bằng bàn phím (crbug.com/396311936).
• Phần tử: Các vấn đề với <select> hiện được hỗ trợ và làm nổi bật bằng một đường gạch chân lượn sóng (crbug.com/378738916).
• Mạng: Giờ đây, biểu tượng "ghi đè dấu chấm" và cảnh báo về cookie sẽ xuất hiện ở bên phải tên thẻ, thay vì ở bên trái (crbug.com/390556283).

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.
• Để lại 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 về 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.