Ağ İzleyicisi, mevcut sayfanın yaptığı her ağ isteğini yakalar ve görüntüler — XHR/Fetch API çağrıları, script yüklemeleri, stil sayfası getirmeleri, resim indirmeleri, yazı tipi dosyaları ve daha fazlası. URL'leri, HTTP yöntemlerini, durum kodlarını, yanıt boyutlarını ve zamanlamayı — hepsini tarayıcı DevTools'u açmadan canlı güncellenen bir yüzen panelde görün.
Chrome DevTools Ağ sekmesi güçlüdür ancak ağırdır — önemli ölçüde ekran alanı kaplar, gezindiğinizde sıfırlanır ve sayfa içeriğinden uzaklaşmanızı gerektirir. Ağ İzleyicisi, sayfanın üzerinde duran hafif bir yüzen panelde temel ağ izleme özelliklerini sağlar. XHR ve Fetch isteklerini yakalar ve Performance API aracılığıyla kaynak yüklemeyi izler, her ağ isteğini olduğu gibi gösterir. Her istek URL'yi, HTTP yöntemini (GET, POST, PUT, DELETE), durum kodunu (renk kodlu: 2xx için yeşil, 3xx için sarı, 4xx/5xx için kırmızı), bayt cinsinden yanıt boyutunu ve milisaniye cinsinden süreyi gösterir. Ayrıntılarını genişletmek için herhangi bir isteğe tıklayın: istek başlıkları, yanıt başlıkları, istek yükü (POST/PUT için), yanıt gövdesi önizlemesi ve zamanlama dökümü. Belirli trafiğe odaklanmak için türe göre (XHR/Fetch, JS, CSS, Resimler, Yazı Tipleri) filtreleyin.
Her ağ isteği olduğu gibi panelde görünür — sayfa yüklemeleri, API çağrıları, tembel yüklenen kaynaklar ve arka plan getirmeleri. Akış, manuel yenileme gerekmeden gerçek zamanlı güncellenir.
Tam ayrıntıları görmek için herhangi bir isteğe tıklayın: istek URL'si, yöntem, başlıklar, yük (POST/PUT için), yanıt başlıkları, yanıt gövdesi önizlemesi (JSON otomatik biçimlendirilir), durum kodu, boyut ve zamanlama dökümü.
İstekleri türe göre filtreleyin: XHR/Fetch (API çağrıları), JS (scriptler), CSS (stil sayfaları), IMG (resimler), Font (web yazı tipleri) veya Tümü. Önemli olana odaklanmak için API trafiğini kaynak yüklemeden izole edin.
Durum kodları anında tanıma için renk kodludur: 2xx (başarı) için yeşil, 3xx (yönlendirmeler) için sarı, 4xx (istemci hataları) ve 5xx (sunucu hataları) için kırmızı. Başarısız istekler hemen görünür.
Her istek yanıt boyutunu (KB cinsinden) ve toplam süreyi (milisaniye cinsinden) gösterir. Yavaş API çağrılarını, büyük boyutlu kaynakları ve sayfa performansını etkileyen gereksiz istekleri belirleyin.
Bir özet çubuğu yakalanan tüm istekler için toplam istek sayısını ve birleşik boyutu gösterir. Tür başına toplamları görmek için özeti filtreleyin — ne kadar bant genişliği scriptlere, resimlere ve API çağrılarına harcanıyor.
Ön ucunuzun doğru API uç noktalarını doğru parametrelerle çağırdığını doğrulamak için XHR/Fetch isteklerini izleyin. İstek yüklerini ve yanıt gövdelerini incelemek için tıklayın — eşleşmeyen veri formatlarını anında yakalayın.
Kırmızı 404 ve 500 girişleri bozuk kaynakları veya başarısız olan API çağrılarını hemen vurgular. Hangi URL'lerin başarısız olduğunu, ne zaman başarısız olduğunu ve sunucunun hangi hata yanıtını döndürdüğünü görün.
En yavaş istekleri bulmak için süreye göre sıralayın. En büyük kaynakları bulmak için boyuta göre sıralayın. Özet toplamları tam bant genişliği resmini gösterir — sayfa çok fazla istek mi yapıyor yoksa çok fazla veri mi indiriyor?
Sayfanın arka planda yaptığı ağ isteklerini görün — analitik pingleri, kalp atışı çağrıları, yoklama istekleri, tembel yüklenen kaynaklar. Kullanıcıya görünen şeyin ötesinde tam ağ etkinliğini anlayın.
İstekleri filtreleyin ve hangi alanların iletişime geçildiğini kontrol edin. Beklenmeyen ağ çağrıları yapan üçüncü taraf scriptlerini belirleyin — izleme pikselleri, veri toplama veya bilmediğiniz dış API çağrıları.
DevSuite Pro yüzen yuvasını açın ve Ağ İzleyicisi simgesine tıklayın. Bir panel açılır ve ağ isteklerini hemen yakalamaya başlar.
Sayfayı normal kullanın. Her ağ isteği yapıldıkça akışta görünür — API çağrıları, kaynak yüklemeleri ve arka plan getirmeleri tümü yakalanır.
Görünümü daraltmak için tür filtrelerine (XHR, JS, CSS, IMG, Font) tıklayın. Veri almayı ayıklamak için yalnızca API çağrılarını gösterin veya varlık yüklemeyi kontrol etmek için yalnızca resimleri gösterin.
Ayrıntılarını genişletmek için herhangi bir istek satırına tıklayın: URL, başlıklar, yük, yanıt gövdesi, durum kodu, boyut ve zamanlama.
Kırmızı durum kodları (404, 500) başarısız istekleri gösterir. Yavaş süreler performans darboğazlarını işaret eder. Büyük boyutlar optimizasyona ihtiyaç duyan kaynakları önerir.
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 39'dan fazla geliştirici aracının kilidini açın.
