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

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

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

Ví dụ: giả sử báo cáo của bảng điều khiển 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 lớn nhất về hiệu suất là loại bỏ các tài nguyên chặn kết xuất.

Đ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 kết xuất là vấn đề.

Hình 2. Báo cáo ban đầu cho biết có 3 tập lệnh chặn kết xuất là vấn đề.

Giờ đây, bạn có thể sử dụng bảng điều khiển Kiểm tra kết hợp với tính năng chặn yêu cầu. Nhờ đó, 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 bằng cách chặn các yêu cầu cho các 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 đó, hãy 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. Điểm Hiệu suất đã cải thiện 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 tính năng Local Overrides (Ghi đè cục bộ) để thêm thuộc tính async vào từng thẻ tập lệnh, nhưng "chúng ta sẽ để đó làm bài tập cho người đọc". Hãy truy cập vào Bản minh hoạ nhiều ứng dụng để dùng thử. Hoặc xem thông báo này trên Twitter để xem video minh hoạ.

Vấn đề về Chromium #991906

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

Mục Dịch vụ nền của bảng điều khiển Ứng dụng hiện hỗ trợ các sự kiện Trình xử lý thanh toá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 Record (Ghi). Công cụ cho nhà phát triển ghi lại các sự kiện của 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 của Trình xử lý thanh toán.

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

  4. Bật tuỳ chọn Hiện sự kiện từ các miền khác nếu sự kiện của Trình xử lý thanh toá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 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 Kiểm tra hiện đang chạy Lighthouse 5.2. Quy trình kiểm tra chẩn đoán mới về Mức sử dụng của bên thứ ba cho bạn biết lượng mã của bên thứ ba được yêu cầu và thời lượng mã của bên thứ ba đó chặn luồng chính trong khi trang tải. Hãy xem bài viết 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 quy trình kiểm tra "Mức sử dụng của bên thứ ba" trong giao diện người dùng của 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 đề về Chromium #772558

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 điều khiển Hiệu suất, phần Thời gian hiện có một điểm đánh dấu cho Thời gian hiển thị nội dung lớn nhất (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 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 phần 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 Related Node (Điểm liên quan) trong thẻ Summary (Tóm tắt) để làm nổi bật điểm đó trong khung nhìn.

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

    Hình 9. Mục Điểm liên quan của 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 từ Trình đơn chính

Nếu bạn gặp lỗi trong DevTools 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 DevTools 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ề DevTools để tạo vấn đề trong trình theo dõi của nhóm kỹ sư DevTools. Việc cung cấp một ví dụ tối thiểu, có thể tái hiện trên Glitch sẽ giúp tăng đáng kể khả năng của nhóm trong việc khắc phục 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ủ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 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.