04/09/2022

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

Chrome Coverage

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.

Chrome Devtools Coverage

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.

Chrome Devtools Coverage Record

Butona tıklandıktan sonra sayfaya yükletilen kaynakların ne kadarının kullanılmadığının bilgisi görünür.

Chrome Devtools Unused Bytes

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.

Coverage Sources Used and Unused Bytes

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.