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

Kayce Basques
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, chẳng hạn như Chặn yêu cầuGhi đè cục bộ.

Ví dụ: giả sử báo cáo 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 hiệu suất lớn nhất là loại bỏ 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 Inspects (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 tập lệnh chặn hiển thị đối với hiệu suất tải của mình bằng cách chặn các yêu cầu đối với các 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 từng thẻ tập lệnh, nhưng "chúng tôi sẽ để độc giả thực hiện việc đó". Hãy chuyển đến Bản minh hoạ nhiều máy khách để dùng thử. 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ợ 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 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 đang đó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 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 Audits (Kiểm toán) đang chạy Lighthouse 5.2. Quy trình kiểm tra chẩn đoán mới về Hoạt động sử dụng của bên thứ ba cho bạn biết số lượng mã của bên thứ ba đã được yêu cầu và khoảng thời gian mã của bên thứ ba đó đã chặn luồng chính 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 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. 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 sẽ 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 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 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 để báo cáo vấn đề trong công cụ 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 trên Glitch giúp tăng đáng kể khả năng sửa lỗi hoặc triển khai yêu cầu về tính năng của nhóm của bạn!

Trợ giúp > Báo cáo sự cố 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ô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 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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59