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ı'na bakın.

Devamını okuyun veya bu eğitim içeriğinin video sürümünü 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
• Tek bir kaynağın özelliklerini (ör. HTTP üstbilgileri, içeriği, boyutu vb.) inceleme.

Sayfa yükleme performansını iyileştirmenin 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+Üst Karakter+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, Geliştirici Araçları'nın ağ etkinliğini yalnızca açıkken günlüğe kaydetmesi ve Geliştirici Araçları'nı açmanızdan bu yana hiçbir ağ etkinliği 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 olarak listelenir. Üst kaynak genellikle ana HTML dokümanıdır. Alttaki kaynak, en son talep edilen 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 isteğe neden olan kaynak koda yönlendirilirsiniz.
   • Boyut: Ağ üzerinden aktarılan kaynak miktarı.
   • Süre: İsteğin ne kadar sürdüğü.

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. Tekrar Ağ Günlüğü'nün alt kısmına 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üğü 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.

   

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 sunar. 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.

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 bir aralıkta hangi kaynakların yüklendiğini bildirir.

Ekran görüntüsü almak için şu 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 başlıklı makaleyi inceleyin. 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. Geliştirici Araçları, o anda hangi ağ etkinliğinin gerçekleştiğ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 ü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 okumak HTML kaynak kodundan daha kolay olduğunda veya resimleri incelerken yararlı olur.

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'ı 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. Aksi takdirde:

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 gelen tüm kaynakları filtreler.

   

3. -main.css yazın. DevTools, main.css öğelerini filtreler. Kalıpla 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 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 Filtreleme istekleri bölümüne bakın.

İstekleri engelleme

Bir sayfanın kaynaklarından bazıları kullanılamadığında sayfa nasıl görünür ve nasıl davranır? Tamamen mi başarısız oldu, yoksa hâlâ işlevsel mi? 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. Kalıp Ekle düğmesini tıklayın.

4. main.css yazın.

   

5. Ekle'yi tıklayın.

6. Sayfayı tekrar yükleyin. Beklenen gibi, ana stil sayfası engellendiği için sayfanın stili biraz bozuk. 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ğini keşfetmek için Ağ Referansı başlıklı makaleyi inceleyin.