Ağ etkinliğini inceleme

Kayce Baskçalar

Twitter GitHub Glitch

Bu eğitim, bir sayfanın ağ etkinliğinin incelenmesiyle ilgili olarak en yaygın kullanılan Geliştirici Araçları özelliklerinden bazılarının uygulamalı bir eğiticisidir.

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 HTTP üstbilgileri, içeriği, boyutu vb. özelliklerini 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 türde yük performansı sorunu vardır. Sayfanızı iyileştirme konusunda hedeflenmiş öneriler sunduğundan Lighthouse paneliyle başlayın. Web Sitesi Hızını Optimize Etme bölümüne bakın.

Ağ panelini açma

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

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

   

   Şekil 1. Demo

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

   

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

2. Control+Üst Karakter+J veya Command+Option+J (Mac) tuşlarına basarak DevTools'u 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ına yerleştirilmiş

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

   

   5. Şekil. Geliştirici Araçları pencerenin altına yerleştirilmiş

Şu anda Ağ paneli boş. Bunun nedeni, Geliştirici Araçları'nın yalnızca açıkken ağ etkinliğini günlüğe kaydetmesi ve siz Geliştirici Araçları'nı açtıktan sonra hiçbir ağ etkinliğinin olmamasıdır.

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

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.

   

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

   Ağ Günlüğü'ndeki 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 temsil eder. Şekil 6'da varsayılan sütunlar gösterilmiştir:

   • Durum. HTTP yanıt kodu.
   • Tür. Kaynak türü.
   • Başlatan. İstenen kaynağın nedeni. Başlatıcı sütunundaki bir bağlantıyı tıkladığınızda isteğe neden olan kaynak koda yönlendirilirsiniz.
   • Saat. İsteğin ne kadar sürdüğü.

   • Şelale. İsteğin farklı aşamalarının grafik temsili. Döküm bölümünü görmek için faydalı Şelale’nin üzerine gelin.

     Not: Not Ağ Günlüğü'nün üst kısmındaki grafiğe Genel Bakış adı verilir. Bu eğitimde bu adı kullanmayacağınız için özelliği gizleyebilirsiniz. [Genel Bakış bölmesini gizleme][6] konusuna bakın.

2. Geliştirici Araçları açık olduğu sürece, ağ etkinliği Ağ Günlüğü'ne kaydedilir. Bunu göstermek için ilk olarak Ağ Günlüğü'nün en altına bakın ve son etkinliği aklınızda bulundurun.

3. Şimdi demodaki 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üğmesi tıklandığında sayfa bu dosyayı istedi.

   

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

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

   

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

Not: İpucu Bir kaynağın tam URL'sini, fareyle Ad sütununda ilgili hücrenin üzerine gelerek görebilirsiniz.

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

Site oluşturmak için kullandığınız bilgisayarın ağ bağlantısı, muhtemelen kullanıcılarınızın mobil cihazlarındaki 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ği konusunda daha iyi bir fikir edinebilirsiniz.

1. Varsayılan olarak Online seçeneği belirlenmiş olan Kısıtlama açılır listesini tıklayın.

   

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

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

   

   Şekil 10. Yavaş 3G'yi seçme

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

   

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

   Tekrarlanan ziyaretlerde, tarayıcı genellikle bazı dosyaları önbelleğinden sunarak sayfa yüklemeyi hızlandırır. Boş Önbellek ve Tam Yeniden Yükleme, tarayıcıyı tüm kaynaklar için ağa geçmeye zorlar. Bu, ilk kez gelen bir ziyaretçinin bir sayfa yükleme deneyimini nasıl yaşadığını görmek istediğinizde faydalıdır.

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

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ü öğrenmenizi sağlar.

1. Ekran Görüntüsü Yakala'yı tıklayın .

2. Önbelleği Boşalt ve Tam Yeniden Yükleme iş akışını kullanarak sayfayı tekrar yeniden 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. Ekran görüntüleri bölmesi, sayfanın yükleme işlemi sırasında çeşitli noktalara nasıl baktığını gösteren küçük resimler sağlar.

   

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

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

   

   Şekil 13. İ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üsünü Yakala'yı 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.

   

   Şekil 14. Üstbilgiler sekmesi

2. Önizleme sekmesini tıklayın. HTML'nin temel bir oluşturma işlemi gösterilmektedir.

   

   Şekil 15. Ö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ıdır.

3. Yanıt sekmesini tıklayın. HTML kaynak kodu gösterilir.

   

   Şekil 16. Yanıt sekmesi

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

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

   

   Şekil 17. Zamanlama sekmesi

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

   

   Şekil 18. Kapat düğmesi

Ağ üstbilgilerinde ve yanıtlarda arama yapın

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.

   

   Şekil 19. Arama bölmesi

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

   

   Şekil 20. Cache-Control ile ilgili arama sonuçları

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

   

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

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

   

   Şekil 22. Kapat düğmeleri

Kaynakları filtrele

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

Şekil 23. Filtreler araç çubuğu

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

1. Göstermek için Filtre'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 dosya PNG resimleridir.

   

   Şekil 24. Dize filtresi

2. /.*\.[cj]s+$/ yazın. Geliştirici Araçları, dosya adı j veya c ile bitmeyen ve ardından 1 ya da daha fazla s karakter içeren tüm kaynakları filtreler.

   

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

   

   Şekil 26. Negatif filtre

4. Filtre metin kutusuna domain:raw.githubusercontent.com yazın. Geliştirici Araçları, URL'si bu alan adıyla eşleşmeyen kaynakları filtreler.

   

   Şekil 27. Özellik filtresi

   Filtrelenebilir özelliklerin tam listesi için İstekleri özelliklere 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.

   

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

   

   Şekil 29. 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 İstekleri filtreleme bölümüne bakın.

İstekleri engelle

Kaynakların bazıları kullanılamadığında bir sayfanın görünümü ve davranışı nasıldır? Tamamen başarısız mı yoksa hâlâ işlevsel mi? Şunları öğrenmek için istekleri engelleyin:

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

   

   Şekil 30. Komut Menüsü

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

   

   Şekil 31. İ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 karmaşıktır. Ağ Günlüğü'ndeki main.css satırını not 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.