Kod Kapsamı, her okunabilir stil sayfasındaki her seçiciyi canlı sayfaya göre test eder; böylece hangi CSS kurallarının şu anda hiçbir şeyle eşleşmediğini, her dosyanın kaç bayt israf ettiğini ve hangi komut dosyalarının ilk boyamayı geciktirdiğini görebilirsiniz.
Stil sayfaları yalnızca büyür. Sahip olmadığınız sayfalar için kurallar içeren bir tema gelir, hiçbir zaman kullanmadığınız bileşenleri içeren bir çerçeve gelir ve üç yeniden tasarımdan sonra kimse dosyanın hangi yarısının yük taşıdığından emin olamaz. Sonuç, sayfanın kullanamayacağı kuralları sunmak için her ziyaretçi bant genişliğine ve işleme süresine mal olan CSS'dir.
Kod Kapsamı bunu doğrudan ölçer. Medya sorguları, @supports ve @layer bloklarının içine yerleştirilmiş kurallar da dahil olmak üzere, tarayıcının okumasına izin vereceği her stil sayfasındaki her kuralı uygular ve her seçiciyi canlı DOM'a karşı test eder. Şu anda hiçbir şeyle eşleşmeyen bir kural, dosya başına, yüzdeyle, boşa harcanan baytlarla ve genişletip kopyalayabileceğiniz seçicilerin tam listesiyle birlikte kullanılmamış olarak bildirilir.
Açık tuzaklara karşı dikkatlidir. Sözde öğeler ve durum sözde sınıfları eşleşmeden önce çıkarılır, bu nedenle :hover veya ::before kuralı, yanlış bir şekilde silinmek yerine temel seçicinin var olup olmadığına göre değerlendirilir. CORS üstbilgileri olmadan çapraz kaynak olarak sunulan stil sayfaları herhangi bir komut dosyası tarafından okunamaz, bu nedenle sessizce mükemmel olarak sayılmak yerine okunamaz olarak işaretlenirler. Tarama sayfayı o andaki haliyle yansıttığı için henüz açık olmayan menüler, sekmeler ve modlar için kurallar kullanılmamış gibi görünecektir; bu nedenle bunları açın ve herhangi bir şeyi silmeden önce Yeniden tara'ya basın.
JavaScript sekmesi farklı bir soruyu yanıtlıyor: ağırlık ve engelleme. Sayfanın yüklediği her komut dosyasının aktarım boyutunu, indirme süresini ve eşzamansız mı, ertelenmiş mi, bir modül mü, dinamik olarak yüklenmiş mi yoksa ilk boyamayı mı beklettiğini belirterek envanterini çıkarır ve ardından kaç baytın engellediğini toplar. Yürütme kapsamı olarak kasıtlı olarak satılmaz; hangi JavaScript satırlarının çalıştırıldığını bilmek Chrome'un hata ayıklayıcı API'sini gerektirir, DevSuite Pro bunu istemez, dolayısıyla buradaki hiçbir şey satır düzeyinde bir rapor gibi davranmaz.
Medya sorguları, @supports ve @layer blokları içindeki kurallar da dahil olmak üzere, okunabilir her stil sayfasındaki her kural, canlı DOM'a göre test edilir; dosya adlarından veya boyutlarından tahmin edilmez.
Her stil sayfası, kullanılmayan bir yüzde, kullanılan-kullanılmayan kural sayısı ve boşa harcanan bayt sayısını alır ve en kötü suçlu en üstte olacak şekilde sıralanır.
Hiçbir şeyle eşleşmeyen seçicileri okumak için herhangi bir dosyayı genişletin, ardından bunları düzenleyicinizde çalışmak üzere bir CSS bloğu olarak kopyalayın veya bir ekip arkadaşınıza verin.
:hover ve :focus-in gibi sahte öğeler ve durum sözde sınıfları eşleştirmeden önce çıkarılır, böylece etkileşimli kurallar silinmek yerine adil bir şekilde değerlendirilir.
Her komut dosyası, boyutu, indirme süresi ve eşzamansız mı, ertelenmiş mi, bir modül mü, dinamik olarak yüklenmiş mi yoksa ilk boyamayı mı engelliyor - artı toplam engelleme baytları ile birlikte listelenir.
Okunamayan çapraz kökenli stil sayfaları puanlanmak yerine işaretlenir ve JS sekmesi, hangi satırların yürütüldüğünü değil, ağırlığı ölçtüğünü açıkça belirtir. İcat edilmiş sayılar yok.
Satın alınan bir tema, düzinelerce demo düzeni için CSS'yi gönderir. Sitenizin ne kadarını asla kullanmadığını görün ve dosyayı tahmin yerine kanıtlarla kesin.
Gerçek bir şablonda bir CSS çerçevesinin ne kadarının hayatta kaldığını ve temizleme ya da sarsılan yapılandırmanızın düşündüğünüz şeyi yapıp yapmadığını kontrol edin.
Oluşturmayı engelleyen komut dosyalarını boyutlarıyla birlikte listeleyin ve içeriğin ekrana daha erken gelmesi için nelerin erteleneceğine, bölüneceğine veya bırakılacağına karar verin.
Sayılarla ilerleyin: hangi dosyalar en fazla baytı boşa harcıyor, JavaScript'i ne kadar engelliyor ve çalışmanın ilk saatinin en çok karşılığını nerede veriyor?
Kendi oluşturmadığınız bir siteyi devralarak, CSS ve JavaScript'in ne kadarının hala yerini kazandığını hızlıca okuyun.
DevSuite Pro dock'ta Kod Kapsamı simgesine tıklayın. Tarama hemen çalışır ve kaç kuralın kontrol edildiğini ve bunların hangi kısmının kullanılmadığını bildirir.
Üst satır size stil sayfası sayısını, toplam kuralları, kullanılmayan yüzdeyi ve boşa harcanan baytları verir. Aşağıdaki dosyalar ne kadar israf ettiklerine göre sıralanmıştır.
Bu sayfadaki hiçbir şeyle tam olarak hangi kuralların eşleşmediğini okumak için herhangi bir dosyadaki kullanılmayan seçicileri göster'i tıklayın.
Menüleri, sekmeleri, akordeonları ve modelleri açın, ardından Yeniden Tara'ya basın. Öğeleri yalnızca bu durumlarda mevcut olan kurallar, kullanılmayan durumdan kullanılmış duruma geçecektir; bunu her zaman silmeden önce yapın.
Kullanılmayan seçicileri kopyalayın, size üzerinde çalışabileceğiniz bir CSS bloğu verir; JSON'u dışa aktarma, bir destek bildirimi veya denetim belgesi için JavaScript envanteri de dahil olmak üzere tam raporu kopyalar.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 71'dan fazla geliştirici aracının kilidini açın.
