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

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Sofia Emelianova

Cải tiế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 nguồn gốc và tập lệnh cho lệnh gọi hàm và hồ sơ trong phần Hiệu suất

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

Ngoài ra, các kênh Mạng và Chính hiện cho bạn thấy tên bên thứ ba (nếu có) trong chú giải công cụ khi bạn di chuột qua các sự kiện.

Vấn đề về Chromium: 368541957.

Hỗ trợ dữ liệu trường "LCP theo pha"

Khi bật dữ liệu trường, 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 thấy thời gian tải 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 tải ngay trong thông tin chi tiết.

Thông tin chi tiết "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ần phụ thuộc mạng vào bộ sưu tập. Thông tin chi tiết này cho bạn biết liệu bạn có tạo chuỗi yêu cầu quan trọng hay không. Bạn không nên tạo chuỗi yêu cầu quan trọng. Di chuột qua 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 kênh 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

Bảng điều khiển Hiệu suất hiện làm nổi bật các mục trong kênh Chính khi bạn di chuột qua các mục đó trong thanh bên Cây lệnh gọi hoặc Từ dưới lên > Ngăn xếp nặng nhất và làm mờ các mục 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 phần tử

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 (Thành phần).

Trước đây, bạn có thể duyệt xem một cây hỗ trợ tiếp cận riêng trong thẻ Elements (Thành phần) > Accessibility (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 Elements (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 các cây này 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ợ tiếp cận xem nội dung của bạn, đồng thời cho bạn thấy các thuộc tính ARIA và các 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 Chrome DevTools.

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ì mở) cho nhiều bảng điều khiển, phần và thẻ đã được đơn giản hoá để cho bạn biết chính xác những việc cần làm để bắt đầu sử dụng các trạng thái đó. 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 như Tải lại trang.

Chuyển tuỳ chọn "Hỏi AI" xuống cuối trình đơn

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

Vui lòng để lại ý kiến phản hồi của bạn trên bảng điều khiển Hỗ trợ AI tại crbug.com/364805393.

Lighthouse 12.4.0

Bảng điều khiển Lighthouse hiện chạy Lighthouse 12.4.0.

Phiên bản này đánh dấu một số quy trình kiểm tra hiệu suất là cung cấp thông tin trong điều kiện đạt chứ không ẩn các quy trình kiểm tra đó trong phần quy trình kiểm tra đạt. Xem danh sách đầy đủ các thay đổi.

Để tìm hiểu kiến thức cơ bản về cách sử dụng bảng điều khiển 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 sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

• Hiệu suất > Tóm tắt: Thay thế hai dòng Thời gian tổng cộng và Thời gian tự bằng một dòng Thời lượng cũng hiển thị (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: vấn đề <select> 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).
• Hỗ trợ tiếp cận: thẻ Elements (Thành phần) > Styles (Kiểu) hiện sẽ phác thảo các thành phần mà bạn thực hiện bằng cách sử dụng thao tác điều hướng bằng bàn phím (crbug.com/396311936).
• Thành phần: Các vấn đề về <select> hiện được hỗ trợ và làm nổi bật bằng nét gạch chân lượn sóng (crbug.com/378738916).
• Mạng: Biểu tượng "dấu chấm ghi đè" và cảnh báo về cookie hiện hiển thị ở 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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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, bản cập nhật mới 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.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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 viết Tính năng mới trong DevTools.