Bảng điều khiển Mức độ sử dụng giúp bạn tìm thấy mã JavaScript và CSS không được sử dụng. 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 của 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 đề phổ biến 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. Để sử dụng thành phần nút, bạn cần thêm đường liên kết đến trang 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>
...
Trang tính kiểu này không chỉ bao gồm mã cho thành phần nút. Tệp này chứa CSS cho tất cả thành phần của Bootstrap. Tuy nhiên, bạn không sử dụng thành phần nào khác của Bootstrap. Vì vậy, trang của bạn đang tải một loạt CSS không cần thiết. CSS bổ sung này là một vấn đề vì các lý do sau:
- Mã bổ sung làm chậm quá trình tải trang. Xem phần CSS chặn kết xuất.
- 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 Coverage (Mức độ sử dụng) cho phép bạn ghi lại trang và xem báo cáo về tổng số byte đã sử dụng và không sử dụng của tài nguyên CSS và JavaScript, đồng thời theo dõi mã trong bảng điều khiển Sources (Nguồn).
Mở bảng điều khiển Mức độ phù hợp
- 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 (Hiển thị mức độ sử dụng), sau đó nhấn phím Enter để chạy lệnh. Bảng điều khiển Coverage (Mức độ phù hợp) sẽ mở trong Drawer (Ngăn).
Ngoài ra, ở góc trên cùng bên phải, hãy chọn biểu tượng more_vert Tuỳ chọn khác > Công cụ khác > Mức độ phù hợp.
Ghi lại mức độ sử dụng mã
Cách ghi lại mức độ sử dụng mã:
Để đặt phạm vi mức độ sử dụng, trong thanh thao tác ở đầu bảng điều khiển Coverage (Mức sử dụng), hãy chọn Per function (Mỗi hàm) hoặc Per block (Mỗi khối) trong danh sách thả xuống.
Để bắt đầu ghi, hãy nhấp vào Bắt đầu đo lường mức độ phù hợp và tải lại trang Ngăn Mức độ phù hợp sẽ tải lại trang, thu thập 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 phạm vi mã, hãy nhấp vào biểu tượng Dừng đo lường phạm vi và hiển thị kết quả.
Phân tích mức độ sử dụng mã
Bảng trong bảng điều khiển Mức độ sử dụng cho bạn biết những tài nguyên đã được phân tích và lượng mã được sử dụng 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 bảng chi tiết từng dòng mã đã sử dụng và mã không sử dụng. Mọi dòng mã không sử dụng đều được đánh dấu bằng các đường màu đỏ 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 Loại cho biết tài nguyên có chứa CSS, JavaScript hay cả hai.
- Cột Tổng số byte là tổng kích thước của tài nguyên tính bằng byte.
- Cột Byte không dùng đến là số byte không được sử dụng.
- Cột cuối cùng, không tên là hình ảnh trực quan của cột Tổng số byte và Số byte không sử dụng. Phần màu đỏ của thanh là số byte không sử dụng. Phần màu xám 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 Coverage (Mức độ sử dụng) cho bạn biết tỷ lệ phần trăm mã được sử dụng. Thanh trạng thái sẽ 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 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 Tập lệnh nội dung.
Để xuất báo cáo, hãy nhấp vào Xuất phạm vi.