Google Devtools Üzerinde Kullanılmayan JS & CSS Kodlarını Görüntüleme

Chrome Devtools (Inspect) coverage üzerinde sayfa üzerinde kullanılmayan Javascript ve CSS kodlarını görüntüleyebilirsiniz.
Web sayfaları oluşturulurken render esnasında kullanılmayan, gereksiz sayfaya yükletilen kod parçaları sayfa yükünü gereksiz artırdığı için sayfa açılış performansını olumsuz etkiliyor.
Chrome Devtools Coverage
Chrome web tarayıcısı üzerinde devtools’u (Inspect) açmak için fare ile sağ tıklayıp incele (Inspect) seçeneğine tıklayın. Klavye kısayolu ile de açabilirsiniz, Mac OS için Option + Command + I, Windows ve Linux için Ctrl + Shift + J veya F12.
İnceleme ekranında kullanılmayan CSS ve JS kaynaklarını görüntülemek için Coverage bölümünü açmak gerekiyor. Ekranın sağ üstündeki üç noktaya tıklayarak ardından > More Tools > Coverage yolunu izleyin.
Coverage butonuna tıklandıktan sonra ekranın aşağısında açılan bölümdeki “Click the record button to start capturing coverage.” alanına tıklayın.
Butona tıklandıktan sonra sayfaya yükletilen kaynakların ne kadarının kullanılmadığının bilgisi görünür.
Coverage sekmesinde listelenen URL’lerden birine tıklandığında yukarıda Sources sekmesinde seçilen kaynak URL’indeki kodlarının kullanılan ve kullanılmayan parçaları görünüyor.
Sources alanınaki görünen kod parçalarında sol tarafında kırmızı renkli şerit olanlar kullanılmayanları, mavi renkli şerit olanlar kullanılan kodları gösteriyor.