Sayfa yükleme işlemini analiz etmek ve ağ kaynaklarını incelemek için Ağ panelini kullanın.
Genel Bakış
Ağ paneli şunları yapmanıza olanak tanır:
- Ağ etkinliğini kaydetme
- Ağ isteklerini inceleme
- Ağ isteklerini filtreleme ve sıralama
- Arama Ağı başlıkları ve yanıtları
- Yükleme davranışını değiştirme
- Ağ isteklerini engelleme
- Ağ koşullarını değiştirme
prefetchspekülasyon kurallarında hata ayıklama- HTTP yanıt üstbilgilerini geçersiz kılma
- Joker karakter içeren birden fazla URL için üstbilgileri geçersiz kılabilirsiniz.
- Ağ isteği verilerini kaydetme ve dışa aktarma
En sık kullanılan Ağ paneli özelliklerinden bazılarını keşfedeceğiniz rehberli eğitim için Ağ etkinliğini inceleme başlıklı makaleyi inceleyin.
Ağ panelini açma
Ağ panelini açmak için Geliştirici Araçları'nı açın ve ardından üstteki işlem çubuğunda bulunan Ağ'ı tıklayın.
Alternatif olarak, Komut menüsü üzerinden Ağ panelini açmak için aşağıdaki adımları uygulayın:
- DevTools'u açın.
- Aşağıdaki tuşlara basarak Komut menüsünü açın:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Denetleyici+Üst Karakter+P
Networkyazmaya başlayın, Ağ panelini göster'i seçin ve Enter tuşuna basın.
Ağ etkinliğini kaydetme
Geliştirici Araçları'nı açtığınızda, ağ istekleri Geliştirici Araçları açık olduğu sürece Ağ paneline otomatik olarak kaydedilir.
Kayıt yapmanın yanı sıra şunları da yapabilirsiniz:
- Ağ isteklerini kaydetmeyi durdurun.
- İstekler tablosundan tüm istekleri temizleyin.
- İstekleri sayfa yüklemeleri arasında kaydedin.
- Çevrimdışı bir deneyimi taklit edin.
- Daha yavaş ağ bağlantılarını simüle edin.
Ağ isteklerini inceleme
Tüm ağ istekleri, panelin ortasındaki İstekler tablosuna kaydedilir.
Varsayılan olarak görüntülenen sütunlar ve ekleyebileceğiniz ek sütunlar hakkında daha fazla bilgi edinmek için İstek günlüğünü görüntüleme başlıklı makaleyi inceleyin.
Aşağıdakiler dahil olmak üzere istekle ilgili ek bilgiler içeren sekmeleri görmek için isteklerin adını tıklayın:
- Başlıklar: Seçilen kaynağın HTTP üst bilgileri.
- Yük: Bir isteğin sorgu dizesi parametreleri ve form verileri.
- Önizleme: HTML'nin temel bir oluşturma işlemi.
- Yanıt: Seçilen kaynağın HTML kaynak kodu.
- Başlatıcı: Bir kaynağın istenmesine neyin neden olduğu.
- Zamanlama: Seçilen kaynağın ağ etkinliğinin dökümü.
- Çerezler: Bir istek ve yanıtının çerezleri.
Ağ isteklerini filtreleme ve sıralama
Ağ paneli, İstekler tablosundaki istekleri sıralamak için iki yöntem sunar:
İstekler tablosundaki istekleri filtrelemenin birkaç yolu aşağıda verilmiştir:
- İstekleri tesislere göre filtreleme
- İstekleri türe göre filtreleme
- İstekleri zamana göre filtreleme
- Veri URL'lerini gizleme
- Uzantı URL'lerini gizle
- Yalnızca engellenen yanıt çerezlerine sahip istekleri göster
- Yalnızca engellenen istekleri göster
- Yalnızca üçüncü taraf isteklerini göster
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ı nasıl arayacağınızı öğrenmek için Ağ üstbilgilerini ve yanıtlarını arama başlıklı makaleyi inceleyin.
Yükleme davranışını değiştirme
Ağ panelinde yükleme davranışını değiştirerek sayfanızın kullanıcı deneyimini test edin.
Ağ panelini kullanarak şunları yapabilirsiniz:
- Tarayıcı önbelleğini devre dışı bırakarak ilk kez gelen bir ziyaretçiyi taklit etme
- Tarayıcı önbelleğini manuel olarak temizleme
- Tarayıcı çerezlerini manuel olarak temizleme
- Çevrimdışı taklit etme
- Yavaş ağ bağlantısı simülasyonu yapma
- HTTP yanıt üstbilgilerini geçersiz kılma
- Kullanıcı aracısını geçersiz kılma
Ağ isteği verilerini kaydetme ve dışa aktarma
Ağ isteği verilerini kaydetmek ve dışa aktarmak için aşağıdakileri inceleyin: