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

Kayce Basques
Kayce Basques
X GitHub

Hỗ trợ nhiều ứng dụng trong bảng điều khiển Kiểm tra

Giờ đây, bạn có thể sử dụng bảng Kiểm tra kết hợp với các tính năng khác của Công cụ cho nhà phát triển như Chặn yêu cầu và Ghi đè cục bộ.

Ví dụ: giả sử báo cáo trong bảng Kiểm tra cho biết điểm hiệu suất của trang là 70 và một trong những cơ hội cải thiện hiệu suất lớn nhất là loại bỏ các tài nguyên chặn hiển thị.

Điểm hiệu suất ban đầu là 70.

Hình 1. Điểm Hiệu suất ban đầu.

Báo cáo ban đầu cho biết 3 tập lệnh chặn hiển thị là một vấn đề.

Hình 2. Báo cáo ban đầu cho biết 3 tập lệnh chặn hiển thị là một vấn đề.

Giờ đây, bạn có thể sử dụng bảng Kiểm tra kết hợp với tính năng chặn yêu cầu để nhanh chóng đo lường mức độ ảnh hưởng của tập lệnh chặn hiển thị đến hiệu suất tải bằng cách trước tiên chặn các yêu cầu đối với tập lệnh chặn hiển thị:

Sử dụng thẻ Chặn yêu cầu để chặn các tập lệnh có vấn đề.

Hình 3. Sử dụng thẻ Chặn yêu cầu để chặn các tập lệnh có vấn đề.

Sau đó, kiểm tra lại trang:

Điểm hiệu suất tăng lên 97 sau khi bật tính năng chặn yêu cầu.

Hình 4. Điểm Hiệu suất tăng lên 97 sau khi chặn các tập lệnh có vấn đề.

Ngoài ra, bạn có thể sử dụng Local Overrides để thêm các thuộc tính async vào từng thẻ tập lệnh, nhưng "chúng tôi sẽ để phần này cho bạn tự thực hành". Hãy xem tweet này để xem video minh hoạ.

Vấn đề #991906 trên Chromium

Gỡ lỗi Trình xử lý khoản thanh toán

Mục Background Services (Dịch vụ nền) của bảng điều khiển Application (Ứng dụng) hiện hỗ trợ các sự kiện Payment Handler (Trình xử lý thanh toán).

  1. Chuyển đến bảng điều khiển Ứng dụng.
  2. Mở ngăn Payment Handler (Trình xử lý thanh toán).

  3. Nhấp vào Ghi. Công cụ cho nhà phát triển ghi lại các sự kiện Trình xử lý thanh toán trong 3 ngày, ngay cả khi Công cụ cho nhà phát triển bị đóng.

    Ghi lại các sự kiện Trình xử lý thanh toán.

    Hình 5. Ghi lại các sự kiện Trình xử lý thanh toán.

  4. Bật chế độ Hiển thị sự kiện từ các miền khác nếu các sự kiện Trình xử lý thanh toán của bạn xảy ra trên một nguồn gốc khác.

  5. Sau khi kích hoạt một sự kiện Trình xử lý thanh toán, hãy nhấp vào hàng của sự kiện đó để tìm hiểu thêm về sự kiện.

    Xem một sự kiện Trình xử lý thanh toán.

    Hình 6. Xem một sự kiện Trình xử lý thanh toán.

Vấn đề #980291 của Chromium

Lighthouse 5.2 trong bảng điều khiển Kiểm tra

Bảng Audits (Kiểm tra) hiện đang chạy Lighthouse 5.2. Quy trình kiểm tra chẩn đoán Mức sử dụng bên thứ ba mới cho biết lượng mã của bên thứ ba được yêu cầu và khoảng thời gian mã đó chặn luồng chính trong khi trang tải. Hãy xem phần Tối ưu hoá tài nguyên của bên thứ ba để tìm hiểu thêm về cách mã của bên thứ ba có thể làm giảm hiệu suất tải.

Ảnh chụp màn hình về hoạt động kiểm tra "Mức sử dụng của bên thứ ba" trong giao diện người dùng báo cáo Lighthouse.

Hình 7. Quy trình kiểm tra Việc sử dụng mã của bên thứ ba.

Vấn đề #772558 của Chromium

Thời gian hiển thị nội dung lớn nhất trong bảng điều khiển Hiệu suất

Khi phân tích hiệu suất tải trong bảng Hiệu suất, phần Thời gian hiện bao gồm một điểm đánh dấu cho Nội dung lớn nhất hiển thị (LCP). LCP báo cáo thời gian kết xuất của phần tử nội dung lớn nhất xuất hiện trong khung nhìn.

Điểm đánh dấu LCP trong phần Thời gian.

Hình 8. Điểm đánh dấu LCP trong mục Thời gian.

Cách làm nổi bật nút DOM được liên kết với LCP:

  1. Nhấp vào điểm đánh dấu LCP trong mục Thời gian.

  2. Di chuột qua Nút liên quan trong thẻ Tóm tắt để làm nổi bật nút đó trong khung hiển thị.

    Mục Nút liên quan trong thẻ Tóm tắt.

    Hình 9. Mục Nút liên quan trong thẻ Tóm tắt.

  3. Nhấp vào Related Node (Nút liên quan) để chọn nút đó trong DOM Tree (Cây DOM).

Gửi vấn đề về Công cụ cho nhà phát triển qua Trình đơn chính

Nếu bạn gặp lỗi trong Công cụ cho nhà phát triển và muốn báo cáo vấn đề, hoặc nếu bạn có ý tưởng về cách cải thiện Công cụ cho nhà phát triển và muốn yêu cầu một tính năng mới, hãy chuyển đến Trình đơn chính > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển để tạo một vấn đề trong trình theo dõi của nhóm kỹ thuật Công cụ cho nhà phát triển. Việc cung cấp một ví dụ tối thiểu có thể tái tạo sẽ giúp nhóm có khả năng sửa lỗi hoặc triển khai yêu cầu về tính năng của bạn một cách đáng kể!

Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển". width="800" height="604">

Hình 10. Trình đơn chính > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển.

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.