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:

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à Hình ảnh có ý nghĩa đầu tiên trong phần 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 chương trình kiểm thử tự động hoá có liên quan đến việc nhấp vào một nút (sử dụng quy tắc kiểm thử Puppeteer page.click()) và bạn muốn nhanh chóng nhận thông tin tham chiếu đến nút DOM đó. Chiến lược phát hành đĩa đơn 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 đó đến document.querySelector(). Nhưng nếu nút nằm trong DOM tối, phương pháp này không hiệu quả vì bộ chọn tạo ra một đường dẫn từ trong cây bóng đổ.

Để nhanh chóng lấy thông tin 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 JS path. Công cụ cho nhà phát triển sao chép vào bảng nhớ tạm của bạn 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ể 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 được 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 ở 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 ' Lighthouse' 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ố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm > 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 của chúng tôi trong Video trên YouTube hoặc Mẹo trong Công cụ cho nhà phát triển Video trên YouTube.

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.