Kapsam paneli, kullanılmayan JavaScript ve CSS kodunu bulmanıza yardımcı olur. Kullanılmayan kodu kaldırmak, sayfanızı daha hızlı yükleyebilir ve kullanıcılarınızın mobil verilerini koruyabilir.
Genel Bakış
Kullanılmayan JavaScript veya CSS'nin gönderilmesi, web geliştirmede sık karşılaşılan bir sorundur. Örneğin, sayfanızda Bootstrap'un düğme bileşenini kullanmak istediğinizi varsayalım. Düğme bileşenini kullanmak için HTML'nize Bootstrap stil sayfasının bağlantısını eklemeniz gerekir. Örneğin:
...
<head>
...
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
...
</head>
...
Bu stil sayfası, düğme bileşeninin kodunu değil, daha fazlasını içerir. Bootstrap'in tüm bileşenleri için CSS'yi içerir. Ancak diğer Önyükleme bileşenlerinin hiçbirini kullanmıyorsunuz. Bu nedenle, sayfanız ihtiyaç duymadığı bir sürü CSS dosyası indiriyor. Bu fazladan CSS aşağıdaki nedenlerden dolayı bir sorun teşkil eder:
- Ekstra kod, sayfanızın yüklenmesini yavaşlatır. Oluşturma işlemini engelleyen CSS başlıklı makaleyi inceleyin.
- Kullanıcı sayfaya bir mobil cihazdan erişirse ekstra kod, kullanıcının mobil verilerini kullanır.
Kapsam paneli, sayfanızı kaydetmenize ve CSS ile JavaScript kaynaklarının toplam kullanılan ve kullanılmayan baytlarının raporunu görüntülemenize ve Kaynaklar panelinde kodu izlemenize olanak tanır.
Kapsam panelini açma
- Geliştirici Araçları'nı açın.
- Komut menüsünü açın.
coverageyazmaya başlayın, Kapsama Göster komutunu seçin ve ardından komutu çalıştırmak için Enter tuşuna basın. Çekmecede Kapsam paneli açılır.
Alternatif olarak, sağ üst köşede more_vert Diğer seçenekler > Diğer araçlar > Kapsam'ı seçin.
Kod kapsamını kaydetme
Kod kapsamını yakalamak için:
Kapsam kapsamını ayarlamak için Kapsam panelinin üst kısmındaki işlem çubuğunda açılır listeden İşlev başına veya Blok başına'yı seçin.
Kaydı başlatmak için 'yi tıklayın Araç kapsamını başlat ve sayfayı yeniden yükle Kapsam paneli sayfayı yeniden yükler, sayfayı yüklemek için gereken kodu yakalar ve siz sayfayla etkileşimde bulunurken kayda devam eder.
Kod kapsamını kaydetmeyi durdurmak için Kapsam enstrümantasyonunu durdur ve sonuçları göster'i tıklayın.
Kod kapsamını analiz etme
Kapsam panelindeki tabloda, hangi kaynakların analiz edildiği ve her kaynakta ne kadar kod kullanıldığı gösterilir.
Bir satırı tıklayarak ilgili kaynağı Kaynaklar panelinde açın ve kullanılan kod ile kullanılmayan kodun satır satır dökümünü görün. Kullanılmayan kod satırları, soldaki satır numaraları sütununun yanında kırmızı çizgilerle işaretlenir.
- URL sütunu, analiz edilen kaynağın URL'sidir.
- Tür sütununda, kaynağın CSS, JavaScript veya her ikisini de içerip içermediği belirtilir.
- Toplam Bayt sütunu, kaynağın bayt cinsinden toplam boyutudur.
- Kullanılmayan Baytlar sütunu, kullanılmayan baytların sayısını gösterir.
- Sonuncu, adsız sütun, Toplam Bayt ve Kullanılmayan Bayt sütunlarının görselleştirmesidir. Çubuğun kırmızı kısmı, kullanılmayan baytlardır. Gri bölüm, kullanılan baytlardır.
Raporu URL'ye göre filtrelemek için URL'yi işlem çubuğundaki filtrede belirtin.
Kapsam panelinin alt kısmındaki durum çubuğu, kullanılan kodun yüzdesini gösterir. Durum çubuğu, filtrelemeyi dikkate alır.
Filtre çubuğunun yanındaki açılır listeden, raporunuzda gösterilecek Tümü'nü veya yalnızca CSS ya da JavaScript'i seçebilirsiniz.
Uzantı kodunu raporunuza dahil etmek için İçerik komut dosyaları'nı etkinleştirin.
Raporunuzu dışa aktarmak için Kapsamı dışa aktar'ı tıklayın.