Kapsam paneli, kullanılmayan JavaScript ve CSS kodunu bulmanıza yardımcı olur. Kullanılmayan kodu kaldırmak, sayfa yükleme hızınızı artırabilir ve kullanıcılarınızın mobil verilerinden tasarruf etmesini sağlayabilir.
Genel Bakış
Kullanılmayan JavaScript veya CSS'nin gönderilmesi, web geliştirmede yaygın bir sorundur. Örneğin, sayfanızda Bootstrap'in düğme bileşenini kullanmak istediğinizi varsayalım. Düğme bileşenini kullanmak için HTML'nize Bootstrap'in stil sayfasına bir bağlantı 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ı yalnızca düğme bileşeninin kodunu içermez. Bootstrap'in tüm bileşenlerinin CSS'sini içerir. Ancak diğer Bootstrap bileşenlerinden hiçbirini kullanmıyorsunuz. Bu nedenle, sayfanız ihtiyacı olmayan bir sürü CSS indiriyor. Bu ek CSS aşağıdaki nedenlerden dolayı sorun oluşturur:
- Ekstra kod, sayfa yükleme hızınızı yavaşlatır. Oluşturmayı engelleyen CSS başlıklı makaleyi inceleyin.
- Kullanıcı sayfaya mobil cihazdan erişirse ek kod, mobil verilerini tüketir.
Kapsam paneli, sayfanızı kaydetmenize, CSS ve JavaScript kaynaklarının kullanılan ve kullanılmayan toplam baytlarının raporunu görüntülemenize ve Kaynaklar panelindeki 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, Show Coverage (Kapsamı Göster) komutunu seçin ve 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 ayrıntı düzeyini ayarlamak için Kapsam panelinin üst kısmındaki işlem çubuğunda açılır listeden İşlev düzeyinde veya Blok düzeyinde'yi seçin.
Kaydı başlatmak için panelin ortasındaki yeniden yükle düğmesini tıklayın. Coverage (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ı kaydını durdurmak için panelin işlem çubuğunda 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ının bulunduğu sütunun yanında dikey gri ç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ıdır.
- Kullanım görselleştirme sütunu, Toplam Bayt ve Kullanılmayan Bayt sütunlarının görselleştirilmiş halidir. Çubuğun gri bölümü, kullanılmayan baytları gösterir. Yeşil bölüm, kullanılan baytları gösterir.
Raporu URL'ye göre filtrelemek için eylem çubuğundaki filtrede URL'yi belirtin.
Kapsam panelinin alt kısmındaki durum çubuğu, kullanılan kodun yüzdesini gösterir. Durum çubuğunda filtreleme dikkate alını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 Dışa aktarma kapsamı'nı tıklayın.