Trang này được dịch bởi Cloud Translation API.

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

Kayce Basques

Các tính năng mới và thay đổi lớn sắp ra mắt trên Công cụ của Chrome cho nhà phát triển trong Chrome 72 bao gồm:

Trực quan hoá các chỉ số về hiệu suất trong bảng điều khiển Hiệu suất.
Đánh dấu nút văn bản trong cây DOM.
Sao chép đường dẫn JS vào nút DOM từ Cây DOM.
Cập nhật bảng điều khiển Kiểm tra, bao gồm một lượt kiểm tra mới phát hiện thư viện JS và từ khoá mới để truy cập vào bảng điều khiển Kiểm tra từ Trình đơn lệnh.

Phiên bản video của những ghi chú phát hành này

Trực quan hoá các chỉ số về hiệu suất

Sau khi ghi lại lượt tải trang, Công cụ cho nhà phát triển hiện sẽ đánh dấu các chỉ số hiệu suất như DOMContentLoaded và Nội dung hiển thị có ý nghĩa đầu tiên trong mục Thời gian.

Hiển thị có ý nghĩa đầu tiên trong phần Thời gian

Hình 1 Hiển thị có ý nghĩa đầu tiên trong phần Thời gian

Đánh dấu nút văn bản

Khi bạn di chuột qua một nút văn bản trong Cây DOM, Công cụ cho nhà phát triển giờ đây sẽ làm nổi bật nút văn bản đó trong khung nhìn.

Đánh dấu nút văn bản

Hình 2. Đánh dấu nút văn bản

Sao chép đường dẫn JS

Giả sử bạn đang viết một kiểm thử tự động hoá có liên quan đến việc nhấp vào một nút (có thể là sử dụng hàm page.click() của Puppeteer) và bạn muốn nhanh chóng nhận được thông tin tham chiếu đến nút DOM đó. Quy trình làm việc thông thường là chuyển đến bảng điều khiển Phần tử, nhấp chuột phải vào nút trong Cây DOM, chọn Sao chép > Sao chép bộ chọn, sau đó truyền bộ chọn CSS đó vào document.querySelector(). Tuy nhiên, nếu nút này nằm trong Shadow DOM, thì phương pháp này sẽ không hiệu quả vì bộ chọn tạo ra một đường dẫn từ bên trong cây bóng đổ.

Để nhanh chóng lấy thông tin tham chiếu đến nút DOM, hãy nhấp chuột phải vào nút DOM rồi chọn Sao chép > Sao chép đường dẫn JS. Công cụ cho nhà phát triển sao chép vào bảng nhớ tạm một biểu thức document.querySelector() trỏ đến nút. Như đã đề cập ở trên, phương thức này đặc biệt hữu ích khi làm việc với Shadow DOM, nhưng bạn có thể sử dụng nó cho bất kỳ nút DOM nào.

Sao chép đường dẫn JS

Hình 3. Sao chép đường dẫn JS

Công cụ cho nhà phát triển sao chép một biểu thức như biểu thức dưới đây vào bảng nhớ tạm:

document.querySelector('#demo1').shadowRoot.querySelector('p:nth-child(2)')

Cập nhật bảng điều khiển kiểm tra

Bảng điều khiển Kiểm tra hiện đang chạy Lighthouse 3.2. Phiên bản 3.2 bao gồm một quy trình kiểm tra mới có tên là Thư viện JavaScript đã phát hiện. Quá trình kiểm tra này liệt kê những thư viện JS mà Lighthouse đã phát hiện trên trang. Bạn có thể tìm thấy quá trình kiểm tra này trong báo cáo của mình trong phần Các phương pháp hay nhất > Kiểm tra thành công.

Thư viện JavaScript phát hiện được

Hình 4. Thư viện JavaScript phát hiện được

Ngoài ra, giờ đây, bạn có thể truy cập vào bảng điều khiển Kiểm tra từ Trình đơn lệnh bằng cách nhập Lighthouse hoặc PWA.

Nhập 'nước hải đăng' vào trình đơn Lệnh

Hình 5. Đang nhập lighthouse vào trình đơn Command

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

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

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

Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
Báo cáo sự cố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.