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

Kayce Basques
Kayce Basques

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

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 quá trình tải trang, DevTools hiện đánh dấu các chỉ số hiệu suất như DOMContentLoaded và Lần vẽ có ý nghĩa đầu tiên trong phần Thời gian.

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

Hình 1 Hiển thị nội dung đầ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 chương trình kiểm thử tự động hoá liên quan đến việc nhấp vào một nút (có thể là bằ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 điều khiển Elements (Thành phần), 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), sau đó truyền bộ chọn CSS đó đến document.querySelector(). Tuy nhiên, nếu nút này nằm trong Shadow DOM, thì phương pháp này 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. DevTools sẽ sao chép một biểu thức document.querySelector() trỏ đến nút vào bảng nhớ tạm. 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)')

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 đượ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 quy trình 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 > Kiểm tra đã vượt qua.

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 "lighthouse" vào Trình đơn lệnh

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

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 Công cụ của Chrome cho nhà phát triển

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.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.