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

Hỗ trợ nhiều khách hàng 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 Công cụ cho nhà phát triển như Chặn yêu cầuGhi đè cục bộ.

Ví dụ: giả sử báo cáo trong 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ỏ 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ị.

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

Giờ đây, bạn có thể sử dụng bảng điều khiển Kiểm tra cùng với tính năng chặn yêu cầu, vì vậy, 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ị đến hiệu suất tải bằng cách trước tiên chặn 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ẻ Yêu cầu chặn để 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 được 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 Ghi đè cục bộ để thêm các thuộc tính async vào từng thẻ trong tập lệnh, nhưng "chúng tôi sẽ để độc giả làm bài tập". Hãy chuyển đến phần Bản minh hoạ nhiều ứng dụng để dùng thử. Hoặc xem bài đăng này để xem video minh hoạ.

Vấn đề về Chromium #991906

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

Phần Dịch vụ nền trên bảng Ứ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 bị đóng.

    Đang ghi lại các sự kiện trên Trình xử lý thanh toán.

    Hình 5. Đang ghi lại các sự kiện trê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 này.

    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 đề 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 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 trong khi trang được 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 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

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 Performance, mục Thời gian hiện bao gồm 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 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 đượ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 để đánh dấu nút trong khung nhìn.

    Phần 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 Nút liên quan để chọn nút đó trong Cây DOM.

Tệp Công cụ cho nhà phát triển tệp trên Trình đơn chính

Nếu bạn từng gặp lỗi trong Công cụ cho nhà phát triển và muốn báo cáo sự cố 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 sự cố về Công cụ cho nhà phát triển để tạo ra sự cố trong công cụ theo dõi của nhóm kỹ thuật. Việc cung cấp ví dụ tối thiểu và có thể mô phỏng trên Glitch sẽ 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!

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ông cụ cho nhà phát triển.

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 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 video Tính năng mới trong Công cụ cho nhà phát triển.

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

Kiến thức cơ bản về Chrome

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