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

Kayce Basques
Kayce Basques
X GitHub

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

Phiên bản video của các 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 quá trình tải trang, Công cụ cho nhà phát triển hiện đánh dấu các chỉ số về hiệu suất như DOMContentLoaded và Nội dung có ý nghĩa đầu tiên hiển thị trong mục Thời gian.

Chỉ số Hiển thị nội dung đầu tiên trong phần Thời gian

Hình 1 Chỉ số Hiển thị nội dung đầu tiên trong phần Thời gian

Đánh dấu các 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, DevTools hiện sẽ làm nổi bật nút văn bản đó trong khung hiển thị.

Làm nổi bật một nút văn bản

Hình 2. Làm nổi bật một nút văn bản

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

Giả sử bạn đang viết một bài kiểm thử tự động 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 tham chiếu đến nút DOM đó. Quy trình làm việc thông thường là chuyển đến bảng Elements (Phần tử), nhấp chuột phải vào nút trong DOM Tree (Cây DOM), chọn Copy (Sao chép) > Copy selector (Sao chép bộ chọn), rồi truyền bộ chọn CSS đó đến document.querySelector(). Nhưng nếu nút nằm trong Shadow DOM, thì phương pháp này sẽ không hoạt động vì bộ chọn tạo ra một đường dẫn từ bên trong cây bóng.

Để nhanh chóng tham chiếu đến một 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 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 mọi nút DOM.

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

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

Công cụ dành cho nhà phát triển sẽ 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:

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

Nội dung cập nhật cho bảng Kiểm tra

Bảng điều khiển Audits (Kiểm tra) hiện đang chạy Lighthouse 3.2. Phiên bản 3.2 có một quy trình kiểm tra mới có tên là Thư viện JavaScript phát hiện được. Quy 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 hoạt động kiểm tra này trong báo cáo của mình trong mục Các phương pháp hay nhất > Các hoạt động kiểm tra đã hoàn tấ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 Audits (Kiểm tra) trong Command Menu (Trình đơn lệnh) bằng cách nhập Lighthouse hoặc PWA.

Nhập "lighthouse" vào Trình đơn lệnh

Hình 5. Nhập lighthouse vào Trình đơn lệnh

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.

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.