Bảng điều khiển Mức độ sử dụng mã giúp bạn tìm thấy mã JavaScript và CSS không dùng đến. Việc xoá mã không dùng đến có thể giúp tăng tốc độ tải trang và tiết kiệm dữ liệu di động cho người dùng.
Tổng quan
Việc gửi JavaScript hoặc CSS không dùng đến là một vấn đề thường gặp trong quá trình phát triển web. Ví dụ: giả sử bạn muốn sử dụng thành phần nút của Bootstrap trên trang của mình. Để sử dụng thành phần nút, bạn cần thêm một đường liên kết đến biểu định kiểu của Bootstrap trong HTML, như sau:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
Biểu định kiểu này không chỉ bao gồm mã cho thành phần nút. Nó chứa CSS cho tất cả các thành phần của Bootstrap. Tuy nhiên, bạn không sử dụng bất kỳ thành phần nào khác của Bootstrap. Vì vậy, trang của bạn đang tải xuống một loạt CSS không cần thiết. CSS bổ sung này là một vấn đề vì những lý do sau:
- Mã bổ sung làm chậm quá trình tải trang. Xem CSS chặn hiển thị.
- Nếu người dùng truy cập vào trang trên thiết bị di động, thì mã bổ sung sẽ sử dụng hết dữ liệu di động của họ.
Bảng điều khiển Mức độ sử dụng mã cho phép bạn ghi lại trang và xem báo cáo về tổng số byte đã dùng và chưa dùng của các tài nguyên CSS và JavaScript, đồng thời theo dõi mã trong bảng điều khiển Nguồn.
Mở bảng điều khiển Mức độ sử dụng mã
- Mở Công cụ cho nhà phát triển.
- Mở Trình đơn lệnh.
Bắt đầu nhập
coverage, chọn lệnh Show Coverage, rồi nhấn Enter để chạy lệnh. Bảng điều khiển Mức độ sử dụng mã sẽ mở ra trong Ngăn kéo.
Ngoài ra, ở góc trên cùng bên phải, hãy chọn more_vert Tuỳ chọn khác > Công cụ khác > Mức độ sử dụng mã.
Ghi lại mức độ sử dụng mã
Cách ghi lại mức độ sử dụng mã:
Để đặt phạm vi sử dụng mã, trong thanh thao tác ở đầu bảng điều khiển Mức độ sử dụng mã, hãy chọn Per function (Theo hàm) hoặc Per block (Theo khối) trong danh sách thả xuống.
Để bắt đầu ghi, hãy nhấp vào nút Reload ở giữa bảng điều khiển. Bảng điều khiển Mức độ sử dụng mã sẽ tải lại trang, ghi lại mã cần thiết để tải trang và tiếp tục ghi trong khi bạn tương tác với trang.
Để dừng ghi lại mức độ sử dụng mã, hãy nhấp vào Stop instrumenting coverage and show results (Dừng đo lường mức độ sử dụng mã và hiển thị kết quả) trên thanh thao tác của bảng điều khiển.
Phân tích mức độ sử dụng mã
Bảng trong bảng điều khiển Mức độ sử dụng mã cho biết những tài nguyên đã được phân tích và mức độ sử dụng mã trong mỗi tài nguyên.
Nhấp vào một hàng để mở tài nguyên đó trong bảng điều khiển Nguồn và xem thông tin chi tiết từng dòng về mã đã dùng và mã không dùng đến. Mọi dòng mã không dùng đến đều được đánh dấu bằng các đường màu xám dọc bên cạnh cột có số dòng ở bên trái.
- Cột URL là URL của tài nguyên đã được phân tích.
- Cột Type (Loại) cho biết tài nguyên có chứa CSS, JavaScript hay cả hai.
- Cột Total Bytes (Tổng số byte) là tổng kích thước của tài nguyên tính bằng byte.
- Cột Unused Bytes (Số byte không dùng đến) là số byte không được dùng.
- Cột Usage Visualization (Hình ảnh trực quan về mức sử dụng) là hình ảnh trực quan của cột Total Bytes (Tổng số byte) và Unused Bytes (Số byte không dùng đến). Phần màu xám của thanh là số byte không dùng đến. Phần màu xanh lục là số byte đã dùng.
Để lọc báo cáo theo URL, hãy chỉ định URL đó trong bộ lọc trên thanh thao tác.
Thanh trạng thái ở cuối bảng điều khiển Mức độ sử dụng mã cho biết tỷ lệ phần trăm mã đã dùng. Thanh trạng thái có tính đến việc lọc.
Bên cạnh thanh bộ lọc, trong danh sách thả xuống, bạn có thể chọn All (Tất cả) hoặc chỉ CSS hoặc JavaScript để hiển thị trong báo cáo.
Để đưa mã tiện ích vào báo cáo, hãy bật Content scripts (Tập lệnh nội dung).
Để xuất báo cáo, hãy nhấp vào biểu tượng Export coverage (Xuất mức độ sử dụng mã).