Ağ etkinliğini inceleme

Kayce Basques

Bu, bir sayfanın ağ etkinliğini incelemeyle ilgili en yaygın kullanılan Geliştirici Araçları özelliklerinden bazılarının uygulamalı bir eğitimidir.

Bunun yerine özelliklere göz atmak istiyorsanız Ağ Referansı'na bakın.

Bu eğiticinin devamını okuyun veya video sürümünü izleyin:

Ağ paneli ne zaman kullanılır?

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 olmak.
• 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ğ paneliyle başlamayın. Ağ etkinliğiyle ilgili olmayan birçok yük performansı sorunu türü vardır. Sayfanızı nasıl iyileştireceğinizle ilgili hedeflenmiş öneriler sunduğu için Lighthouse panelini kullanarak başlayın. Web Sitesi Hızını Optimize Etme bölümünü inceleyin.

Ağ panelini aç

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

1. Başlarken Demosu'nu açın.

   

   Şekil 1. Demo

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

   

   2. Şekil. Bir pencerede demo, farklı bir pencerede ise bu eğitim

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

   

   3. Şekil. Konsol

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

   

   4. Şekil. Geliştirici Araçları, pencerenin alt kısmına yerleştirildi

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

   

   5. Şekil. Geliştirici Araçları, pencerenin alt kısmına yerleştirildi

Ağ paneli şu anda 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, Ağ Günlüğü'ndeki tüm ağ etkinliklerini günlüğe kaydeder.

   

   6. Şekil. Ağ Günlüğü

   Ağ Günlüğü'ndeki her satır bir kaynağı temsil eder. Kaynaklar varsayılan olarak kronolojik sırada listelenir. En üst kaynak, genellikle ana HTML belgesidir. Alttaki kaynak, en son talep edilen kaynaktır.

   Her sütun bir kaynakla ilgili bilgileri temsil eder. Şekil 6'da varsayılan sütunlar gösterilmektedir:

   • Durum. HTTP yanıt kodu.
   • Tür. Kaynak türü.
   • Başlatan. Kaynağın istenmesinin nedeni. Başlatıcı sütunundaki bir bağlantıyı tıkladığınızda, isteğe neden olan kaynak koduna yönlendirilirsiniz.
   • Zaman. İsteğin ne kadar sürdüğü.
   • Şelale. Talebin farklı aşamalarını gösteren grafik Dökümünü görmek için bir Şelale’nin üzerine gelin.

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 zihinsel bir şekilde not edin.

3. Şimdi demodaki Veri Al düğmesini tıklayın.

4. Tekrar Ağ Günlüğü'nün alt kısmına bakın. getstarted.json adında yeni bir kaynak var. Veri Al düğmesini tıklamak, sayfanın bu dosyayı istemesine neden olmuştur.

   

   7. Şekil. Ağ Günlüğünde yeni bir kaynak

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

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

   

   8. Şekil. Alan sütununu etkinleştirme

Daha yavaş bir ağ bağlantısı simülasyonu

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 ne kadar sürede yüklendiğini daha iyi anlayabilirsiniz.

1. Varsayılan olarak Online seçeneğine ayarlanmış Throttling açılır listesini tıklayın.

   

   9. Şekil. Kısıtlamayı etkinleştirme

2. Yavaş 3G'yi seçin.

   

   10. Şekil. Yavaş 3G seçiliyor

3. Yeniden Yükle düğmesine uzun basın, ardından Önbelleği Boşalt ve Tam Yeniden Yükle'yi seçin.

   

   Şekil 11. Önbelleği Boşalt ve Tam Yeniden Yükleme

   Tekrarlanan ziyaretlerde, tarayıcı genellikle bazı dosyaları önbelleğinden sunar. Bu da sayfa yüklemeyi hızlandırır. Önbelleği Boşalt ve Tam Yeniden Yükleme, tarayıcıyı tüm kaynaklar için ağa gitmeye zorlar. Bu, ilk kez gelen bir ziyaretçinin bir sayfa yüklemeyle ilgili deneyimini görmek istediğinizde yararlı olur.

Ekran görüntüsü al

Ekran görüntüleri, bir sayfanın yüklenirken zaman içinde nasıl göründüğünü görmenize olanak tanır.

1. Ekran Görüntüleri Al'ı tıklayın .

2. Önbelleği Boşalt ve Tam Yeniden Yükleme iş akışını kullanarak sayfayı tekrar yükleyin. Bu işlemin nasıl yapılacağıyla ilgili bir hatırlatıcıya ihtiyacınız varsa Yavaş bir bağlantıyı simüle etme bölümüne bakın. Ekran Görüntüleri bölmesi, sayfanın yükleme işlemi sırasında çeşitli noktalara nasıl baktığına dair küçük resimler sağlar.

   

   Şekil 12. Sayfa yükleme ekran görüntüleri

3. İlk küçük resmi tıklayın. Geliştirici Araçları o anda hangi ağ etkinliğinin gerçekleştiğini gösterir.

   

   13. Şekil. İlk ekran görüntüsü sırasında gerçekleşen ağ etkinliği

4. Ekran Görüntüleri bölmesini kapatmak için Ekran Görüntüleri Yakala'yı tekrar tıklayın.

5. Sayfayı tekrar 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.

   

   14. Şekil. Başlıklar sekmesi

2. Önizleme sekmesini tıklayın. Temel HTML görünümü gösteriliyor.

   

   15. Şekil. Önizleme sekmesi

   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. Yanıt sekmesini tıklayın. HTML kaynak kodu gösterilir.

   

   16. Şekil. Yanıt sekmesi

4. Zamanlama sekmesini tıklayın. Bu kaynak için ağ etkinliğinin bir dökümü gösterilir.

   

   17. Şekil. Zamanlama sekmesi

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

   

   18. Şekil. Kapat düğmesi

Arama ağı üstbilgileri ve yanıtları

Belirli bir dize veya normal ifade için tüm kaynakların HTTP üstbilgilerinde ve yanıtlarında arama yapmanız gerektiğinde Arama bölmesini kullanın.

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

1. Ara'yı tıklayın. Arama bölmesi, Ağ günlüğünün solunda açılır.

   

   19. Şekil. Arama bölmesi

2. Cache-Control yazıp Enter'a basın. Arama bölmesi, kaynak üstbilgilerinde veya içerikte bulduğu tüm Cache-Control örneklerini listeler.

   

   20. Şekil. Cache-Control için arama sonuçları

3. Görüntülemek için bir sonucu tıklayın. Sorgu bir üstbilgide bulunduysa Başlıklar sekmesi açılır. Sorgu içerikte bulunduysa Yanıt sekmesi açılır.

   

   Şekil 21. Başlıklar sekmesinde vurgulanmış bir arama sonucu

4. Arama bölmesini ve Zamanlama sekmesini kapatın.

   

   Şekil 22. Kapat düğmeleri

Kaynakları filtrele

Geliştirici Araçları, mevcut görevle ilgili olmayan kaynakları filtrelemek için çok sayıda iş akışı sunar.

23. Şekil. Filtreler araç çubuğu

Filtreler araç çubuğu varsayılan olarak etkin olmalıdır. Değilse:

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

Dize, normal ifade veya özelliğe göre filtreleyin

Filtre metin kutusu, birçok farklı filtreleme türünü destekler.

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

   

   24. Şekil. Dize filtresi

2. /.*\.[cj]s+$/ yazın. Geliştirici Araçları, dosya adı j veya c ile bitmeyen ve ardından 1 veya daha fazla s karakteri gelmeyen kaynakları filtreler.

   

   25. Şekil. Normal ifade filtresi

3. -main.css yazın. Geliştirici Araçları, main.css filtresini filtreler. Kalıpla eşleşen başka dosyalar da filtrelenir.

   

   26 Şekil. Negatif filtre

4. Filtre metin kutusuna domain:raw.githubusercontent.com yazın. Geliştirici Araçları, bu alanla eşleşmeyen bir URL'ye sahip kaynakları filtreler.

   

   27 Şekil. Özellik filtresi

   Filtrelenebilir özelliklerin tam listesi için İstekleri mülklere göre filtreleme bölümüne bakın.

5. Herhangi bir metnin Filtre metin kutusunu temizleyin.

Kaynak türüne göre filtrele

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.

   

   28 Şekil. Yalnızca CSS dosyaları gösteriliyor

2. Komut dosyalarını da görmek için Control veya Command (Mac) tuşunu basılı tutup JS'yi tıklayın.

   

   29 Şekil. Yalnızca CSS ve JS dosyaları gösteriliyor

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 engelle

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. Command Menüsü'nü açmak için Control+Üst Karakter+P veya Command+Üst Karakter+P (Mac) tuşlarına basın.

   

   30 Şekil. Komut Menüsü

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

   

   31. Şekil. İstek Engellemeyi Göster

3. Desen ekle'yi tıklayın.

4. main.css yazın.

   

   32. Şekil. main.css engelleniyor

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 karışmıştır. Ağ Günlüğündeki main.css satırına dikkat edin. Kırmızı metin, kaynağın engellendiği anlamına gelir.

   

   33 Şekil. main.css engellendi

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

Sonraki adımlar

Tebrikler, eğiticiyi tamamladınız. Ödülünüzü almak için Ödülü Dağıt'ı tıklayın.

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