😁Nhìn trên trình duyệt chrome để loại bỏ class thừa không được sử dụng đến

Để loại bỏ các class CSS không dùng đến trên Chrome DevTools, bạn sử dụng thẻ Coverage (Phạm vi sử dụng) để xem CSS nào đang được sử dụng và CSS nào bị bỏ qua, giúp xác định và xóa các quy tắc thừa thãi, cải thiện hiệu suất trang web. Các bước thực hiện trên Chrome DevTools:

1. Mở DevTools:

   • Nhấn F12 hoặc Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac).

   • Hoặc nhấp chuột phải vào trang web và chọn Inspect (Kiểm tra).

2. Mở thẻ Coverage (Phạm vi sử dụng):

   • Trong cửa sổ DevTools, tìm biểu tượng ba chấm dọc (More Tools) > More Tools > chọn Coverage.

   • Hoặc nhấn Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (Mac) để mở Command Menu, gõ "Coverage" và chọn "Show Coverage".

3. Bắt đầu kiểm tra:

   • Nhấp vào biểu tượng Start profiling coverage (Bắt đầu lập hồ sơ phạm vi) (hình tròn màu đỏ).

   • Tải lại trang web để DevTools có thể quét toàn bộ CSS trên trang.

4. Phân tích kết quả:

   • Thẻ Coverage sẽ hiển thị danh sách các file CSS.

   • Mỗi file sẽ có một thanh màu biểu thị phần trăm CSS được sử dụng (màu xanh lá) và phần bị bỏ qua (màu đỏ).

   • Nhấp vào một file CSS, bạn sẽ thấy các dòng code. Dòng màu đỏ là CSS không được dùng đến.

5. Xóa class thừa:

   • Dựa vào thông tin từ thẻ Coverage, bạn có thể tìm và xóa các class (hoặc ID, thuộc tính) không được dùng đến trong file CSS tương ứng, sau đó lưu lại thay đổi.

Lưu ý quan trọng:

• Thẻ Coverage chỉ phát hiện CSS không được sử dụng ở trạng thái hiện tại, không phải tất cả CSS còn lại đều thừa (có thể dùng cho các trạng thái hover, focus, hoặc breakpoint khác).

• Bạn cần kiểm tra kỹ trước khi xóa để tránh làm hỏng giao diện (break layout).