DEV Community

Özlem
Özlem

Posted on

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.

image

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

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

image

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.

image

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

Top comments (0)