Chrome DevTools Coverage Tab Sekmesi Nedir? Ne İşe Yarar?

Chrome Devtools sekmesinde yer alan Coverage özelliği kullanılmayan JS ve CSS kodlarının ortaya çıkarılmasında bir süredir kullanılan etkili yöntemlerden birisidir. Coverage tab sekmesine Chrome tarayıcınızı açtıktan sonra “developer tools-geliştirici araçlar” bölümüne tıklayarak ulaşabilirsiniz.

Coverage sekmesinde bulunan “start capturing coverage”, “to reload”, “start capturing” ve “stop capturing coverage” gibi özellikler farklı amaçlar için kullanabilirsiniz. Analiz etmek istediğiniz sayfayı yükleyiniz ve Coverage’da bulunan “0” tuşuna basınız. Müteakiben tablo halinde analiz edilen kaynakları ve bu kaynaklara ilişkin sonuçları ve ayrıca ne kadar kodun kullanıldığını veya ne kadar kodun kullanılmadığını görebilirsiniz.

Her ne kadar bu analiz aracılığı ile ne kadar CSS kodunun kullanıldığını veya kullanılmadığını öğrensenizde, unutmayınız ki kullanımda olmayan kodların sistemden uzaklaştırılması ancak manuel olarak yapılabilir. 

Kullanılmayan JavaScript ve CSS kodları Coverage Tab (Sekme) ile Nasıl Bulunur?

Chrome DevTools’da bulunan Coverage sekmesi sayesinde kullanılmayan JavaScript ve CSS kodlarını bulabilirsiniz. Kullanılmayan kodları sistemden uzaklaştırmanız hem web sayfalarınızın hızını artıracak hemde mobil kullanıcıların fazladan hücresel veri kullanmalarının önüne geçecektir.

Unutmadan belirtelim ki; kullanılmayan kodları aslında bulmak oldukça basittir, zor olan ise her sayfada gereksiz olan kodu sistemden çıkarmak ve buna göre bütün kodu yeniden düzenlemektir. Bu makale, kullanılmayan kodlardan kurtulmak için sistem kodunu yeniden düzenlenmesini konu almaz  çünkü bu işlemin yapılmasının genel bir yolu yoktur ancak kullanmış olduğunuz teknolojiye göre değişiklik göstermektedir.

Kullanılmayan JavaScript Ve CSS Kodlarının Zararları Nelerdir?

Kullanılmayan JavaScript ve CSS kodlarını sistemden uzaklaştırmak web tasarımcıların en çok karşılaştığı sorunların başında gelmektedir. Örneğin, farz edelim ki web sayfanızda Bootstrap’s button component  (Bootstrap’in düğme bileşeni) kullanmak istiyorsunuz. Düğme bileşenin kulanabilmeniz için Bootstrap’in stil sayfasını (stylesheet) HTML koduna eklemeniz gerekir.Tıpkı şu şekilde;

...
<.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ı sadece düğme bileşeni (button component) için kod içermemektedir. Bootstrap’in bütün diğer bileşenleri için de CSS kodunu içermektedir. Fakat sorun şu ki siz Bootstrap’in diğer bileşenlerini kullanmıyorsunuz ve kullanmayacaksınız.

Sonuçta sizin sayfanız, aslında hiç kullanmayacağınız bir sürü CSS kodunuda aynı zamanda yüklemektedir. Peki fazla CSS kodunun ne gibi zararı vardır ? Şöyleki ;

1. Fazla CSS kodu sayfanızın yüklenme hızını azaltacaktır.

2. Eğer web sayfanıza kullanıcılar mobil cihazlarla erişim sağlıyor iseler bu durumda kullanıcılar içi oldukça hayati olan hücresel veri fazladan kullanılacaktır.

Coverage Tab Nasıl Çalıştırırılır?

1. Commend Menüsünü açınız.

2. Coverage kelimesini giriniz, Show Coverage komutunu seçiniz ve komutu çalıştırmak için Enter tuşuna basınız. Aşağıda olduğu gibi Coverage tab açılacaktır.

Kod Coverage Kodu Nasıl Kaydedilir ?

1. Coverage tab’de yer alan aşağıdaki komutlardan birini seçiniz.

I. Start Instrumenting Coverage And Reload Page - Eğer sayfanın yüklenmesi için hangi kodun gerekli olduğunu görmek istiyorsanız tıklayınız.

II. Instrument Coverage - Eğer sayfa ile etkileşime geçtikten sonra hangi kodun kullanıldığını görmek istiyorsanız tıklaynız.

2. Stop Instrumenting Coverage And Show Results-coverage kodunu kaydetme işlemine son vermek istiyorsanız tıklayınız.

Coverage Kodu Nasıl Analiz Edilir?

Coverage tab (sekmesinde) bulunan tablo size hangi kaynakların analiz edildiğini ve her bir kaynak ile ne kadar kod kullanldığını göstermektedir. Sources panelini kullanarak ilgili kaynağı açmak ve adım adım hem kullanılan hemde kullanılmayan kodları incelemek için tablonun altında bulunan dizelere/adreslere tıklayınız.

Yukarıdaki tabloya ait bazı bilgiler şu şekildedir.

1. URL sütunu analiz edilen kaynağa ait URL ‘yi göstermektedir

2. Type sütunu, kaynağın hem ayrı ayrı hem de aynı anda CSS veya javaScript kodunu içerip içermediğini göstermektedir.

3. Total Bytes sütunu kaynakların bayt biriminden toplam kapasitesini ortaya koymaktadır.

4. Unused Byets sütunu ise kullanılmayan baytların sayısını göstermektedir.

5. En son bölümde bulunan ve isimlendirilmeyen görsel alan ise toplam kullanılan ve kullanılmayan baytı göstermektedir. Kırmızı alan kullanılmayan, yeşil alan ise kullanılan bayt miktarını göstermektedir.

Bu noktada yeni bir özellikten daha bahsetmemiz yerinde olacaktır.

Block Requests (blok talebi) Nedir ?

Web sayfanız için bazı durumlarda özel scriptler, stilsayfaları (stylesheet) veya diğer kaynaklara ulaşmak zor olabilir. Bu gibi durumlarda web sayfanızın nasıl davrandığını görmek istermisiniz? Bunun için öncelikle Google Chrome DevTools özelliğine giriyoruz ve öncedende gösterdiğimiz gibi Coverage tab sekmesini açıyoruz.

Müteakiben Network panelinde talepler üzerine sağ tıklıyoruz ve karşımıza çıkan seçeneklerden Block Request URL seçiyoruz. Bu işleme müteakip yeni Request Blocking sekmesi açılacaktır. Açılan bu yeni sekmeyi kullanrak bloklanan talepleri yönetebilirsiniz.

Daha fazla bilgi edinmek ve On Yazılım avantajlarından faydalanmak için onyazilim.com/iletisim sayfamızdan bize ulaşabilirsiniz. 


Yorum Yap