Phạm vi mã kiểm tra mọi bộ chọn trong mọi biểu định kiểu có thể đọc được so với trang trực tiếp, do đó bạn có thể xem quy tắc CSS nào hiện không khớp với nhau, mỗi tệp lãng phí bao nhiêu byte và tập lệnh nào đang giữ lần sơn đầu tiên.
Bảng định kiểu chỉ phát triển. Một chủ đề đi kèm với các quy tắc cho các trang bạn không có, một khung cung cấp các thành phần bạn không bao giờ sử dụng và ba lần thiết kế lại sau đó, không ai chắc chắn nửa tệp nào chịu tải. Kết quả là CSS tiêu tốn mọi băng thông của khách truy cập và thời gian hiển thị để cung cấp các quy tắc mà trang không thể sử dụng.
Code Coverage đo lường trực tiếp điều đó. Nó thực hiện mọi quy tắc trong mọi biểu định kiểu mà trình duyệt sẽ cho phép nó đọc — bao gồm các quy tắc được lồng trong các truy vấn phương tiện, các khối @supports và @layer — và kiểm tra từng bộ chọn dựa trên DOM trực tiếp. Một quy tắc hiện không khớp với quy tắc nào được báo cáo là không được sử dụng trên mỗi tệp, kèm theo tỷ lệ phần trăm, số byte bị lãng phí và danh sách đầy đủ các bộ chọn mà bạn có thể mở rộng và sao chép.
Đó là cẩn thận về những cái bẫy rõ ràng. Các phần tử giả và các lớp giả trạng thái bị loại bỏ trước khi khớp, do đó, quy tắc :hover hoặc ::Before được đánh giá dựa trên việc bộ chọn cơ sở của nó có tồn tại hay không thay vì bị viết sai. Bất kỳ tập lệnh nào cũng không thể đọc được các bảng định kiểu được phân phát từ nhiều nguồn gốc không có tiêu đề CORS, vì vậy, chúng được gắn cờ là không thể đọc được thay vì được tính âm thầm là hoàn hảo. Và vì quá trình quét phản ánh trạng thái của trang tại thời điểm đó nên các quy tắc dành cho menu, tab và phương thức chưa mở sẽ có vẻ như chưa được sử dụng — vì vậy hãy mở chúng và nhấn Quét lại trước khi bạn xóa bất kỳ nội dung nào.
Tab JavaScript trả lời một câu hỏi khác: trọng lượng và chặn. Nó kiểm kê mọi tập lệnh mà trang tải cùng với kích thước truyền, thời gian tải xuống và liệu nó không đồng bộ, bị trì hoãn, một mô-đun, được tải động hay đang giữ lần sơn đầu tiên, sau đó tính tổng số byte đang chặn. Nó không được cố tình bán dưới dạng phạm vi thực thi — biết dòng JavaScript nào chạy yêu cầu API trình gỡ lỗi của Chrome mà DevSuite Pro không yêu cầu, vì vậy không có gì ở đây giả vờ là báo cáo cấp dòng.
Mọi quy tắc trong mọi biểu định kiểu có thể đọc đều được kiểm tra dựa trên DOM trực tiếp, bao gồm các quy tắc bên trong truy vấn phương tiện, các khối @supports và @layer — không được ước tính từ tên hoặc kích thước tệp.
Mỗi biểu định kiểu có một tỷ lệ phần trăm chưa được sử dụng, số lượng quy tắc được sử dụng so với không được sử dụng và số byte bị lãng phí, được sắp xếp sao cho lỗi nghiêm trọng nhất nằm ở trên cùng.
Mở rộng bất kỳ tệp nào để đọc các bộ chọn không khớp, sau đó sao chép chúng dưới dạng khối CSS để xử lý trong trình chỉnh sửa của bạn hoặc chuyển cho đồng đội.
Các phần tử giả và các lớp giả trạng thái như :hover và :focus-within bị loại bỏ trước khi khớp, do đó các quy tắc tương tác được đánh giá một cách công bằng thay vì bị xóa bỏ.
Mỗi tập lệnh được liệt kê cùng với kích thước, thời gian tải xuống và liệu nó không đồng bộ, bị trì hoãn, một mô-đun, được tải động hay chặn lần vẽ đầu tiên — cộng với tổng số byte chặn.
Các bảng định kiểu có nguồn gốc chéo không thể đọc được được gắn cờ thay vì ghi điểm và tab JS cho biết rõ ràng rằng nó đo trọng lượng chứ không phải dòng nào được thực thi. Không có con số được phát minh.
Một chủ đề đã mua sẽ cung cấp CSS cho hàng chục bố cục demo. Xem có bao nhiêu trong số đó mà trang web của bạn không bao giờ sử dụng và cắt bớt tệp bằng bằng chứng thay vì phỏng đoán.
Kiểm tra xem khung CSS còn tồn tại bao nhiêu trên một mẫu thực và liệu cấu hình thanh lọc hoặc rung cây của bạn có đang hoạt động như bạn nghĩ hay không.
Liệt kê các tập lệnh hỗ trợ hiển thị, cùng với kích thước của chúng và quyết định những gì cần trì hoãn, phân tách hoặc loại bỏ để đưa nội dung lên màn hình sớm hơn.
Hãy tham khảo các con số: tệp nào lãng phí nhiều byte nhất, số lượng JavaScript đang chặn và giờ làm việc đầu tiên mang lại hiệu quả cao nhất.
Tiếp quản một trang web mà bạn không xây dựng, hãy đọc nhanh xem CSS và JavaScript của nó vẫn chiếm được vị trí như thế nào.
Nhấp vào biểu tượng Code Coverage trong thanh công cụ DevSuite Pro. Quá trình quét sẽ chạy ngay lập tức và báo cáo số lượng quy tắc đã được kiểm tra cũng như phần nào trong số đó không được sử dụng.
Hàng trên cùng cung cấp cho bạn số lượng biểu định kiểu, tổng số quy tắc, phần trăm không sử dụng và số byte bị lãng phí. Các tập tin bên dưới được sắp xếp theo mức độ lãng phí.
Nhấp vào hiển thị các bộ chọn không được sử dụng trên bất kỳ tệp nào để đọc chính xác những quy tắc nào không khớp với gì trên trang này.
Mở menu, tab, accordion và modals, sau đó nhấn Quét lại. Các quy tắc có thành phần chỉ tồn tại ở các trạng thái đó sẽ chuyển từ trạng thái chưa sử dụng sang đã sử dụng — hãy luôn thực hiện việc này trước khi xóa.
Sao chép các bộ chọn không được sử dụng sẽ cung cấp cho bạn một khối CSS để xử lý; Xuất JSON sao chép toàn bộ báo cáo, bao gồm cả kho JavaScript, cho một phiếu hoặc tài liệu kiểm tra.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 71 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
