Ağ etkinliğini inceleme

Kayce Basques

Bu, bir sayfanın ağ etkinliğini incelemeyle ilgili en sık kullanılan DevTools özelliklerinden bazılarını içeren uygulamalı bir eğitimdir.

Bunun yerine özelliklere göz atmak istiyorsanız Ağ Referansı başlıklı makaleyi inceleyin.

Devamını okuyun veya bu eğitimle ilgili videoyu izleyin:

Ağ panelini ne zaman kullanmalısınız?

Genel olarak, kaynakların beklendiği gibi indirildiğinden veya yüklendiğinden emin olmanız gerektiğinde Ağ panelini kullanın. Ağ panelinin en yaygın kullanım alanları şunlardır:

• Kaynakların gerçekten yüklendiğinden veya indirildiğinden emin olma
• Bir kaynağın HTTP üst bilgileri, içeriği, boyutu vb. gibi özelliklerini inceleme

Sayfa yükleme performansını artırmanın yollarını arıyorsanız Ağ panelinden başlamayın. Ağ etkinliğiyle ilgili olmayan birçok yükleme performansı sorunu vardır. Sayfanızı nasıl iyileştireceğinizle ilgili hedeflenmiş öneriler sunan Lighthouse panelinden başlayın. Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Ağ panelini açma

Bu eğitimden en iyi şekilde yararlanmak için demoyu açıp demo sayfasındaki özellikleri deneyin.

1. Başlangıç Demo'sunu açın.

   

   Demoyu ayrı bir pencereye taşımayı tercih edebilirsiniz.

   

2. Control+Shift+J veya Command+Option+J (Mac) tuşlarına basarak Geliştirici Araçları'nı açın. Console paneli açılır.

   

   DevTools'u pencerenizin alt kısmına sabitlemeyi tercih edebilirsiniz.

   

3. Ağ sekmesini tıklayın. Ağ paneli açılır.

   

Şu anda Ağ paneli boş. Bunun nedeni, DevTools'un yalnızca açıkken ağ etkinliğini günlüğe kaydetmesi ve DevTools'u açtığınızdan bu yana ağ etkinliği gerçekleşmemesidir.

Ağ etkinliğini günlüğe kaydet

Bir sayfanın neden olduğu ağ etkinliğini görüntülemek için:

1. Sayfayı tekrar yükleyin. Ağ paneli, tüm ağ etkinliklerini Ağ Günlüğü'ne kaydeder.

   

   Ağ Günlüğü'nün her satırı bir kaynağı temsil eder. Varsayılan olarak kaynaklar kronolojik olarak listelenir. Üst kaynak genellikle ana HTML dokümanıdır. Alttaki kaynak, en son istenen kaynaktır.

   Her sütun, bir kaynakla ilgili bilgileri temsil eder. Varsayılan sütunlar şunlardır:

   • Durum: HTTP yanıt kodu.
   • Tür: Kaynak türü.
   • Başlatıcı: Bir kaynağın istenmesine neden olan şey. Başlatıcı sütunundaki bir bağlantıyı tıkladığınızda istekle sonuçlanan kaynak koda yönlendirilirsiniz.
   • Boyut: Ağ üzerinden aktarılan kaynak miktarı.
   • Süre: İsteğin ne kadar sürdüğünü gösterir.
   Not: Ağ Günlüğünün üzerindeki grafiğe Genel Bakış denir. Bu eğitimde kullanmayacağımız için dilerseniz bu paneli gizleyebilirsiniz. Genel bakış kanalını gizleme başlıklı makaleyi inceleyin.

2. DevTools açık olduğu sürece ağ etkinliği Ağ Günlüğüne kaydedilir. Bunu göstermek için önce Ağ Günlüğü'nün alt kısmına bakın ve son etkinliği not edin.

3. Ardından, demodaki Veri Al düğmesini tıklayın.

4. Ağ Günlüğü'nün alt kısmına tekrar bakın. getstarted.json adlı yeni bir kaynak var. Veri Al düğmesinin tıklanması, sayfanın bu dosyayı istemesine neden oldu.

   

Daha fazla bilgi göster

Ağ Günlüğü'nün sütunları yapılandırılabilir. Kullanmadığınız sütunları gizleyebilirsiniz. Ayrıca, varsayılan olarak gizli olan ve yararlı bulabileceğiniz birçok sütun da vardır.

1. Ağ Günlüğü tablosunun başlığını sağ tıklayın ve Alan'ı seçin. Her kaynağın alanı gösterilir.

   

İpucu: Fareyle Ad sütunundaki hücrenin üzerine gelerek kaynağın tam URL'sini görebilirsiniz.

Daha yavaş bir ağ bağlantısını simüle etme

Site oluşturmak için kullandığınız bilgisayarın ağ bağlantısı, büyük olasılıkla kullanıcılarınızın mobil cihazlarının ağ bağlantılarından daha hızlıdır. Sayfayı kısıtlayarak bir sayfanın mobil cihazda yüklenmesi için ne kadar süre gerektiğini daha iyi anlayabilirsiniz.

1. Varsayılan olarak Düşük hızlandırma yok olarak ayarlanmış Düşük hızlandırma açılır menüsünü tıklayın.

   

2. 3G'yi seçin.

   

3. Yeniden yükle yenile simgesine uzun basın ve ardından Önbelleği Boşalt ve Sert Yeniden Yükle'yi seçin.

   

   Tarayıcılar, tekrarlanan ziyaretlerde genellikle bazı dosyaları önbelleğinden yayınlar. Bu da sayfanın yüklenmesini hızlandırır. Önbelleği Boşalt ve Zor Yenile, tarayıcıyı tüm kaynaklar için ağa gitmeye zorlar. Bu, ilk kez sitenizi ziyaret eden bir kullanıcının sayfa yükleme deneyimini görmek istediğinizde faydalıdır.

   Not: Önbelleği Boşalt ve Yeniden Yükle iş akışı yalnızca Geliştirici Araçları açıkken kullanılabilir.

Ekran görüntüsü alma

Ekran görüntüleri, sayfanız yüklenirken farklı zamanlarda nasıl göründüğünü yakalar ve her aralıkta hangi kaynakların yüklendiğini raporlar.

Ekran görüntüsü almak için aşağıdaki adımları izleyin:

1. Ağ Ayarları ayarları'nı tıklayın.

2. Ekran görüntüleri check_box onay kutusunu etkinleştirin.

3. Önbelleği Boşalt ve Tam Yeniden Yükle iş akışını kullanarak sayfayı tekrar yükleyin. Bunun nasıl yapılacağıyla ilgili hatırlatıcıya ihtiyacınız varsa Daha yavaş bir bağlantıyı simüle etme bölümüne bakın. Anlık Görüntüler sekmesinde, sayfanın yükleme işlemi sırasında çeşitli noktalarda nasıl göründüğünün küçük resimleri bulunur.

   

4. İlk küçük resmi tıklayın. DevTools, o anda gerçekleşen ağ etkinliğini gösterir.

   

5. Ekran Görüntüleri sekmesini kapatmak için Ekran Görüntüleri onay kutusunu işaretleyin veya işaretini kaldırın.

6. Sayfayı yeniden yükleyin.

Bir kaynağın ayrıntılarını inceleme

Hakkında daha fazla bilgi edinmek istediğiniz kaynakları tıklayabilirsiniz. Hemen deneyin:

1. getstarted.html simgesini tıklayın. Başlıklar sekmesi gösterilir. HTTP üst bilgilerini incelemek için bu sekmeyi kullanın.

   

2. Temel bir HTML oluşturma işlemini görüntülemek için Önizleme sekmesini tıklayın.

   

   Bu sekme, bir API HTML'de hata kodu döndürdüğünde ve oluşturulan HTML'nin HTML kaynak kodundan daha kolay okunabildiği durumlarda veya resimleri incelerken faydalıdır.

3. HTML kaynak kodunu görüntülemek için Yanıt sekmesini tıklayın.

   

   İpucu: Bir dosya küçültüldüğünde, Yanıt sekmesinin en altındaki Biçimlendir data_object düğmesini tıkladığınızda dosya içeriği okunabilirlik için yeniden biçimlendirilir.

4. İstek başlatma zincirini eşleyen bir ağaç görüntülemek için Başlatıcı sekmesini tıklayın.

   

5. Bu kaynağın ağ etkinliğinin dökümünü görüntülemek için Zamanlama sekmesini tıklayın.

   

6. Ağ Günlüğü'nü tekrar görüntülemek için Kapat'ı kapat tıklayın.

   

Arama Ağı başlıkları ve yanıtları

Belirli bir dize veya normal ifade için tüm kaynakların HTTP üstbilgilerini ve yanıtlarını aramanız gerektiğinde Arama sekmesini kullanın.

Örneğin, kaynaklarınızın makul önbelleğe alma politikaları kullanıp kullanmadığını kontrol etmek istediğinizi varsayalım.

1. Ara arama'yı tıklayın. Ağ günlüğü'nün solunda Arama sekmesi açılır.

   

2. Cache-Control yazıp Enter tuşuna basın. Arama sekmesinde, kaynak üstbilgilerinde veya içeriklerinde bulduğu tüm Cache-Control örnekleri listelenir.

   

3. Görüntülemek istediğiniz sonucu tıklayın. Sorgu bir üstbilgide bulunduysa Üstbilgiler sekmesi açılır. Sorgu içerikte bulunduysa Yanıt sekmesi açılır.

   

4. Arama sekmesini ve Başlıklar sekmesini kapatın.

   

Kaynakları filtrele

DevTools, mevcut görevle alakalı olmayan kaynakları filtrelemek için çok sayıda iş akışı sağlar.

Filtreler araç çubuğu varsayılan olarak etkindir. Yoksa:

1. Göstermek için Filtre'yi filter_alt tıklayın.

Dize, normal ifade veya mülke göre filtreleme

Filtre giriş kutusu birçok farklı filtreleme türünü destekler.

1. Filtre giriş kutusuna png yazın. Yalnızca png metnini içeren dosyalar gösterilir. Bu durumda, filtreyle eşleşen tek dosyalar PNG resimleridir.

   

2. /.*\.[cj]s+$/ yazın. DevTools, dosya adı j veya c ile bitmeyen ve ardından 1 veya daha fazla s karakteri bulunan tüm kaynakları filtreler.

   

3. -main.css yazın. DevTools, main.css öğelerini filtreler. Desenle eşleşen başka dosyalar da filtrelenir.

   

4. Filtre metin kutusuna domain:raw.githubusercontent.com yazın. DevTools, bu alanla eşleşmeyen bir URL'ye sahip tüm kaynakları filtreler.

   

   Filtrelenebilir özelliklerin tam listesi için İstekleri mülklere göre filtreleme başlıklı makaleyi inceleyin.

5. Filtre giriş kutusunu metinden temizleyin.

Kaynak türüne göre filtreleme

Stil sayfaları gibi belirli bir dosya türüne odaklanmak için:

1. CSS'yi tıklayın. Diğer tüm dosya türleri filtrelenir.

   

2. Komut dosyalarını da görmek için Ctrl veya Komut (Mac) tuşunu basılı tutun ve ardından JS'yi tıklayın.

   

3. Filtreleri kaldırmak ve tüm kaynakları tekrar görmek için Tümü'nü tıklayın.

Diğer filtreleme iş akışları için Filtre isteklerini inceleyin.

İstekleri engelleme

Bir sayfanın kaynaklarından bazıları kullanılamadığında sayfa nasıl görünür ve nasıl davranır? Cihaz tamamen mi yoksa kısmen mi çalışmıyor? Aşağıdakileri öğrenmek için istekleri engelleyin:

1. Komut menüsünü açmak için Kontrol+Üst Karakter+P veya Komut+Üst Karakter+P (Mac) tuşlarına basın.

   

2. block yazın, İstek Engellemeyi Göster'i seçin ve Enter tuşuna basın.

   

3. Desen Ekle düğmesini tıklayın.

4. main.css yazın.

   

5. Ekle'yi tıklayın.

6. Sayfayı tekrar yükleyin. Ana stil sayfası engellendiği için sayfanın stili beklendiği gibi biraz bozuk. Ağ Günlüğü'ndeki main.css satırına dikkat edin. Kırmızı metin, kaynağın engellendiğini gösterir.

   

7. İstek engellemeyi etkinleştir onay kutusunun işaretini kaldırın.

Ağ etkinliğini incelemeyle ilgili daha fazla Geliştirici Araçları özelliğini keşfetmek için Ağ Referansı başlıklı makaleyi inceleyin.