Kullanılmayan CSS leri Görüntüleme

1. Chrome Dev Tools ile:

Örneğin instagram landing sayfası için deneyelim:

Chrome ile açtığımız sayfada sağ tıklayıp Denetle(Inspect) seçeneğine tıklıyoruz.

Mac için (Command + Shift + P)
Windows ve Linux için (Control + Shift + P)

basarak çıkan komut satırına "covarage" yazıyoruz.

Çıkan tabda yenile işaretine tıklıyoruz.

Çıkan ekranda hem css hem de js dosyalarının kullanım oranları yazıyor.

url filtresine css yazarak, css dosyalarını filtreliyorum.

Dosya üzerine tıkladığımda, yukarıda kırmızı ve mavi olarak kullanılan ve kullanılmayan css sınıflarını görebiliyorum.

Kaynak: https://developers.google.com/web/tools/chrome-devtools/css/reference#coverage