Ağ etkinliğini inceleme

Kayce Basques

Bu, bir sayfanın ağ etkinliğini incelemeyle ilgili en sık kullanılan Geliştirici Araçları özelliklerinin uygulamalı olarak anlatıldığı bir eğitimdir.

Özelliklere göz atmak isterseniz Ağ Referansı'na bakın.

Okumaya devam edin veya bu eğitimin video versiyonunu izleyin:

Ağ paneli ne zaman kullanılır?

Genel olarak, kaynakların beklendiği gibi indirilip yüklenmediğinden emin olmanız gerektiğinde Ağ panelini kullanın. Ağ paneliyle ilgili en yaygın kullanım alanları şunlardır:

• Kaynakların gerçekten yüklenip yüklenmediğini veya indirilip indirilmediğini kontrol etme
• Tek bir kaynağın özelliklerini (ör. HTTP başlıkları, içerik, boyut vb.) inceleme

Sayfa yükleme performansını artırmanın yollarını arıyorsanız Ağ paneliyle başlamayın. Ağ etkinliğiyle ilgili olmayan birçok yükleme performansı sorunu türü vardır. Sayfanızı nasıl iyileştireceğinizle ilgili hedefe yönelik öneriler sunduğu için Lighthouse paneliyle başlayın. Web Sitesi Hızını Optimize Etme başlıklı makaleyi inceleyin.

Ağ panelini açın.

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

1. Başlangıç Demosu'nu 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. Konsol paneli açılır.

   

   Geliştirici Araçları'nı pencerenizin alt kısmına yerleştirmeyi tercih edebilirsiniz.

   

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

   

Şu anda Ağ paneli boş. Bunun nedeni, Geliştirici Araçları'nın yalnızca açıkken ağ etkinliğini kaydetmesi ve Geliştirici Araçları'nı açtığınızdan beri herhangi bir ağ etkinliğinin gerçekleşmemiş olmasıdır.

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. Kaynaklar varsayılan olarak kronolojik sırayla listelenir. En üstteki kaynak genellikle ana HTML belgesidir. En alttaki kaynak, en son istenen kaynaktır.

   Her sütun, bir kaynakla ilgili bilgileri gösterir. Varsayılan sütunlar şunlardır:

   • Durum: HTTP yanıt kodu.
   • Tür: Kaynak türü.
   • Başlatıcı: Bir kaynağın istenmesine neyin neden olduğu. Başlatan sütunundaki bir bağlantıyı tıkladığınızda, isteğe neden olan kaynak koda yönlendirilirsiniz.
   • Boyut: Ağ üzerinden aktarılan kaynak miktarı.
   • Süre: İsteğin ne kadar sürdüğünü gösterir.

2. Geliştirici Araçları açık olduğu sürece ağ etkinliğini Ağ Günlüğü'ne kaydeder. Bunu göstermek için önce Ağ Günlüğü'nün alt kısmına bakın ve son etkinliği not edin.

3. Şimdi demoda Verileri Al düğmesini tıklayın.

4. Ağ Günlüğü'nün en altına tekrar bakın. getstarted.json adlı yeni bir kaynak var. Verileri 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. Varsayılan olarak gizlenen ve işinize yarayabilecek birçok sütun da vardır.

1. Ağ Günlüğü tablosunun başlığını sağ tıklayın ve Alan'ı seçin. Artık her kaynağın alan adı gösteriliyor.

   

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ı, kullanıcılarınızın mobil cihazlarının ağ bağlantılarından muhtemelen daha hızlıdır. Sayfayı kısıtlayarak bir sayfanın mobil cihazda ne kadar sürede yüklendiği hakkında daha iyi bir fikir edinebilirsiniz.

1. Varsayılan olarak Sınırlama yok olarak ayarlanan Sınırlama açılır listesini tıklayın.

   

2. 3G'yi seçin.

   

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

   

   Tarayıcı, tekrar ziyaretlerde genellikle bazı dosyaları önbelleğinden sunar. Bu da sayfa yükleme hızını artırır. Önbelleği Boşalt ve Zorunlu Yeniden Yükle, tarayıcıyı tüm kaynaklar için ağa gitmeye zorlar. Bu, ilk kez ziyaret eden bir kullanıcının sayfa yükleme deneyimini görmek istediğinizde faydalıdır.

Ekran görüntüsü alma

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

Ekran görüntüsü almak için şu adımları uygulayın:

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

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

3. Empty Cache And Hard Reload (Ö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ırlatmaya ihtiyacınız varsa Daha yavaş bir bağlantıyı simüle etme başlıklı makaleyi inceleyin. Ekran görüntüleri sekmesinde, sayfanın yükleme işlemi sırasında çeşitli noktalardaki görünümünün küçük resimleri yer alır.

   

4. İlk küçük resmi tıklayın. Geliştirici Araçları, 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 kapatın.

6. Sayfayı yeniden yükleyin.

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

Hakkında daha fazla bilgi edinmek istediğiniz kaynağı tıklayın. Hemen deneyin:

1. getstarted.html simgesini tıklayın. Başlıklar sekmesi gösterilir. HTTP üstbilgilerini 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'yi HTML kaynak kodundan daha kolay okumak veya resimleri incelemek için kullanışlıdır.

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

   

4. İstek başlatma zincirini eşleyen bir ağacı görüntülemek için Başlatan 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'ı close tıklayın.

   

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

Tüm kaynakların HTTP üstbilgilerinde ve yanıtlarında belirli bir dizeyi veya normal ifadeyi aramanız gerektiğinde Arama sekmesini kullanın.

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

1. Panelin işlem çubuğunda Ara'yı search tıklayın veya Command + F (macOS) ya da Control + F (Windows / Linux) tuşlarına basın.

   Ağ günlüğünün solunda Ara sekmesi açılır.

   

2. Cache-Control yazıp Enter tuşuna basın. Arama sekmesinde, kaynak başlıklarında veya içerikte bulunan tüm Cache-Control örnekleri listelenir.

   

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

   

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

   

Kaynakları filtrele

DevTools, o anki görevle alakalı olmayan kaynakları filtrelemek için çeşitli iş akışları sunar.

Filtreler araç çubuğu varsayılan olarak etkinleştirilmelidir. Yoksa:

1. Filtreyi göstermek için Filtrele'yi filter_alt tıklayın.

Dizeye, normal ifadeye veya özelliğe 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 1 ya da daha fazla s karakteriyle biten c ile bitmeyen tüm kaynakları filtreler.

   

3. -main.css yazın. Geliştirici Araçları, main.css öğesini filtreler. Başka bir dosya da bu desenle eşleşirse o da filtrelenir.

   

4. domain:raw.githubusercontent.com karakterini Filtre metin kutusuna yazın. Geliştirici Araçları, bu alan adıyla eşleşmeyen bir URL'ye sahip tüm kaynakları filtreler.

   

   Filtrelenebilir özelliklerin tam listesi için İstekleri özelliklere göre filtreleme başlıklı makaleye bakın.

5. Filtre giriş kutusundaki tüm metinleri temizleyin.

Kaynak türüne göre filtrele

Belirli bir dosya türüne (ör. stil sayfaları) 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 Control veya Command (Mac) tuşunu basılı tutun ve JS'yi tıklayın.

   

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

Diğer filtreleme iş akışları için İstekleri filtreleme bölümüne bakın.

İstekleri engelleme

Bir sayfa, kaynaklarından bazıları kullanılamadığında nasıl görünür ve davranır? Tamamen çalışmayı mı durdurdu yoksa hâlâ bir şekilde çalışıyor mu? Aşağıdaki bilgileri öğrenmek için istekleri engelleyin:

1. Komut Menüsü'nü açmak için Control+Shift+P veya Command+Shift+P (Mac) tuşlarına basın.

   

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

   

3. Add Pattern (Desen Ekle) düğmesini tıklayın.

4. main.css yazın.

   

5. Ekle'yi tıklayın.

6. Sayfayı tekrar yükleyin. Beklendiği gibi, ana stil sayfası engellendiği için sayfanın stili biraz bozuldu. Ağ günlüğündeki main.css satırına dikkat edin. Kırmızı metin, kaynağın engellendiği anlamına gelir.

   

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

Ağ etkinliğini incelemeyle ilgili daha fazla Geliştirici Araçları özelliği keşfetmek için Ağ Referansı'na göz atın.