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

Sau đây là các tính năng mới và những thay đổi quan trọng sắp tới với Công cụ của Chrome cho nhà phát triển trong Chrome 72:

Trực quan hoá các chỉ số hiệu suất trong bảng Hiệu suất.
Làm nổi bật các 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 cả nội dung kiểm tra mới giúp phát hiện các thư viện JS và từ khóa 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ố hiệu suất

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

Nội dung hiển thị có ý nghĩa đầu tiên trong mục Thời gian

Hình 1 Nội dung hiển thị có ý nghĩa đầu tiên trong mục 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 chương trình kiểm thử tự động có liên quan đến việc nhấp vào một nút (có thể sử dụng hàm page.click() của Puppeteer) và bạn muốn nhanh chóng có đượ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 đó chuyển bộ chọn CSS đó vào document.querySelector(). Tuy nhiên, nếu nút nằm trong Shadow DOM, 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 nhận được 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 Copy (Sao chép) > Copy JS path (Sao chép đường dẫn JS). Công cụ cho nhà phát triển sẽ 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, điều 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 bên dưới vào bảng nhớ tạm của bạn:

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

Nội dung cập nhật về 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 gì mà Lighthouse đã phát hiện trên trang của các thư viện JS. Bạn có thể tìm thấy quy 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 đạt.

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 Command bằng cách nhập Lighthouse hoặc PWA.

Nhập 'Lighthouse' vào Trình đơn Lệnh

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

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.