DEV Community

loading...

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

Özlem
Interested in math, js and CSS
・1 min read
  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

Discussion (0)