Ağ etkinliğini inceleme

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.

    Demo

    Şekil 1. Demo

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

    Bir pencerede demo, farklı bir pencerede ise bu eğitim

    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.

    Konsol

    3. Şekil. Konsol

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

    Geliştirici Araçları, pencerenin alt kısmına yerleştirildi

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

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

    Geliştirici Araçları, pencerenin alt kısmına yerleştirildi

    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.

    Ağ Günlüğü

    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.

    Ağ Günlüğünde yeni bir kaynak

    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.

    Alan sütununu etkinleştirme

    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.

    Kısıtlamayı etkinleştirme

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

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

    Yavaş 3G seçiliyor

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

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

    Önbelleği Boşalt ve Tam Yeniden Yükleme

    Ş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 Ekran Görüntüleri Al.
  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.

    Sayfa yükleme ekran görüntüleri

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

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

    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ı Ekran Görüntüleri Al 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.

    Başlıklar sekmesi

    14. Şekil. Başlıklar sekmesi

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

    Önizleme sekmesi

    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.

    Yanıt sekmesi

    16. Şekil. Yanıt sekmesi

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

    Zamanlama sekmesi

    17. Şekil. Zamanlama sekmesi

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

    Kapat düğmesi

    18. Şekil. Kapat düğmesi

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ı Arama tıklayın. Arama bölmesi, Ağ günlüğünün solunda açılır.

    Arama bölmesi

    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.

    Önbellek Kontrolü için arama sonuçları

    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.

    Başlıklar sekmesinde vurgulanmış bir arama sonucu

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

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

    Kapat düğmeleri

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

Filtreler araç çubuğu

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

    Dize filtresi

    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.

    Normal ifade filtresi

    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.

    Negatif filtre

    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.

    Özellik filtresi

    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.

    Yalnızca CSS dosyaları gösteriliyor

    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.

    Yalnızca CSS ve JS dosyaları gösteriliyor

    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.

    Komut Menüsü

    30 Şekil. Komut Menüsü

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

    İstek Engellemeyi Göster

    31. Şekil. İstek Engellemeyi Göster

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

  4. main.css yazın.

    main.css engelleniyor

    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.

    main.css engellendi

    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.