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

Kayce Basques

Hỗ trợ nhiều khách hàng trong bảng Kiểm tra

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

Ví dụ: giả sử báo cáo bảng điều khiển Kiểm tra của bạn cho biết rằng điểm hiệu suất của trang là 70 và một trong những cơ hội lớn nhất về hiệu suấ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 có 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 có 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 điều khiển Audits (Kiểm tra) kết hợp với chặn yêu cầu, nên bạn có thể nhanh chóng đo lường mức độ ảnh hưởng của các tập lệnh chặn hiển thị đến hiệu suất tải của bạn bằng cách chặn các yêu cầu cho tập lệnh chặn hiển thị:

Sử dụng thẻ Yêu cầu chặn để 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 đã cải thiện lên 97 sau khi bật tính năng chặn yêu cầu.

Hình 4. Sau khi chặn các tập lệnh có vấn đề, điểm số Hiệu suất đã cải thiện lên 97.

Ngoài ra, bạn có thể sử dụng tính năng Ghi đè cục bộ để thêm thuộc tính async vào mỗi tập lệnh mà chỉ cần "chúng tôi sẽ để đây là một bài tập cho người đọc". Hãy chuyển đến Bản minh hoạ nhiều máy khách để dùng thử bị loại. Hoặc xem bài đăng trên Twitter này để xem phần minh hoạ bằng video.

Vấn đề về Chromium #991906

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

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

  1. Chuyển đến bảng điều khiển Application (Ứng dụng).
  2. Mở ngăn 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 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 được đã đóng.

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

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

  4. Bật tuỳ chọn Hiển thị sự kiện từ các miền khác nếu sự kiện Trình xử lý thanh toán của bạn xảy ra trên một máy chủ gố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 sự kiện Trình xử lý thanh toán.

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

Vấn đề về Chromium #980291

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

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

Ảnh chụp màn hình trường hợp "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. Kiểm tra Mức sử dụng của bên thứ ba.

Vấn đề về Chromium #772558

Nội dung lớn nhất hiển thị 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 điều khiển Hiệu suất, mục 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 lớn nhất hiển thị trong khung nhìn.

Điểm đánh dấu LCP trong mục 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 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 để đánh dấu nút trong khung nhìn.

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

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

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

Các vấn đề về Công cụ cho nhà phát triển tệp từ 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 gửi 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 đề trong Công cụ cho nhà phát triển để tạo vấn đề trên công cụ theo dõi của nhóm kỹ thuật Công cụ cho nhà phát triển. Cung cấp ví dụ tối thiểu, có thể tái tạo trên Glitch giúp tăng đáng kể khả năng khắc phục của nhóm lỗi hoặc triển khai yêu cầu tính năng của bạn!

Trợ giúp > Báo cáo sự cố Công cụ cho nhà phát triển." chiều rộng="800" chiều cao="604">

Hình 10. 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ả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 kỳ 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 trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong 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.