HTTP Arşiv Kayıtlarını Tarayıcınızda Açın, İnceleyin ve Filtreleyin
Oturum token’larını, parolaları ve çerezleri, kayıtlarınızı destek ekipleriyle paylaşmadan önce tek tıkla gizleyin. DevBento’nun HAR görüntüleyicisi, sıfır sunucu yüklemesiyle tamamen tarayıcınızda çalışır. İstekleri kategoriye, süreye, boyuta veya hata durumuna göre filtreleyin. Her istek, engellenen, DNS, bağlantı, SSL, gönderme, bekleme ve alma aşamalarını gösteren bir waterfall (şelale) grafiği alır.
Özellikler
Waterfall Görselleştirme. Her istek, Chrome DevTools ile aynı şekilde, zamanlama aşamasına göre bölümlenmiş yatay bir çubuk olarak render edilir. Renkler belirli aşamalarla eşlenir: engellenen (gri), DNS (mavi), bağlantı (turkuaz), SSL (deniz yeşili), gönderme (yeşil), bekleme (kehribar), alma (parlak yeşil). Herhangi bir bölümün üzerine gelerek milisaniye cinsinden tam süreyi görün.
Akıllı Filtreler. Kategori sekmeleri (HTML, CSS, Scriptler, Fetch/XHR, Görseller, Yazı Tipleri, Medya, Diğer), süre ve boyut açılır menüleri veya Yalnızca Hatalar ve Büyük Yükler hızlı geçiş düğmeleriyle istekleri daraltın. Arama kutusu URL’ye, yönteme veya durum koduna göre filtreler.
Tek Tıkla Temizleme. Authorization başlıklarını, çerezleri, set-cookie başlıklarını, API anahtarlarını, parolaları ve token’ları kaldırır. HAR verilerinin geri kalanı (zamanlama, durum kodları, URL’ler, yük yapısı) hata ayıklama için bozulmadan kalır.
Temiz HAR Dışa Aktar. Temizlenmiş dosyayı, QA, destek veya mühendislik ekipleriyle paylaşıma hazır geçerli bir HAR JSON olarak indirin.
Performans Denetimleri. Araç, HAR dosyanızı yavaş TTFB yanıtları (>800ms), sıkıştırılmamış metin varlıkları, büyük yükler (>2MB) ve yinelenen URL’ler için otomatik olarak tarar. Her denetim, etkilenen isteklere doğrudan atlamanız için bağlantılar içerir.
Yalnızca İstemci Tarafı. Ağ kayıtlarınız makinenizde kalır. Yükleme yok, sunucu işleme yok, takip yok.
Waterfall Zaman Çizelgesini Anlamak
Waterfall zaman çizelgesi, herhangi bir HAR görüntüleyicinin en kullanışlı kısmıdır. Her satır bir HTTP isteğini temsil eder ve yatay çubuk, isteğin zamanını nasıl harcadığını gösterir. Doğru okumak, tahmin yerine gerçek performans darboğazlarını bulmanıza yardımcı olur.
Zaman çizelgesi her isteği sıralı aşamalara ayırır. Engellenen süre, tarayıcının isteği başlatmadan önce beklediği süredir. Yüksek engellenen süre genellikle aynı kaynak için çok fazla bağlantının rekabet ettiği anlamına gelir. DNS araması, ana bilgisayar adını çözümlemenin ne kadar sürdüğünü ölçer. Yavaş DNS genellikle uygulamanızdan ziyade DNS sağlayıcınıza işaret eder. Bağlantı süresi TCP el sıkışmayı kapsar. Yüksek bağlantı süreleriyle birlikte yüksek SSL/TLS anlaşma süreleri görüyorsanız, sunucu kullanıcıdan uzak olabilir veya TLS yapılandırması iyileştirilmeye ihtiyaç duyuyor olabilir. Gönderme süresi, tarayıcının istek gövdesini iletmek için harcadığı süredir. Çoğu API çağrısı için büyük yükler yüklemediğiniz sürece bu ihmal edilebilir. Bekleme süresi (TTFB veya Time to First Byte) genellikle en önemli metriktir. Sunucunun isteği aldıktan sonra yanıt vermeye başlamasının ne kadar sürdüğünü ölçer. Önbelleğe alınmış bir CDN kaynağında 200ms’nin veya dinamik bir uç noktada 800ms’nin üzerindeki bir TTFB araştırma gerektirir. Alma süresi, tarayıcının yanıt gövdesini indirmek için harcadığı süredir. Büyük değerler büyük yükler veya yavaş ağ bant genişliği anlamına gelir.
Yığılmış çubuklar kümülatif değildir. Her bölüm bir öncekinin bittiği yerde başlar. Toplam çubuk genişliği toplam yanıt süresine eklenir. Bir çubuk başka bir çubuğun yanında görsel olarak kısa görünüyorsa, bu istek nispeten hızlı tamamlanmıştır. Waterfall’un üstündeki zaman cetveli, sayfa yüklemesi boyunca istekleri karşılaştırabilmeniz için mutlak zaman ölçeğini gösterir.
En yaygın performans desenleri: uzun bir engellenen aşama, bağlantı havuzunun doymuş olduğu anlamına gelir; uzun bir bekleme aşaması, sunucunun veya veritabanının yavaş olduğu anlamına gelir; küçük bir kaynakta uzun bir alma aşaması, ağın tıkalı olduğu anlamına gelir; waterfall’da çok geç başlayan bir istek (sol kenardan uzak) başka bir şeyin arkasında sıraya girmiştir.
Kullanım Durumları
Oturum token’larını veya API anahtarlarını ifşa etmeden hata ayıklama kayıtlarını destek ekipleriyle paylaşın. Hassas başlıkları gizli tutarken hata raporları için ağ izlerini dışa aktarın. Verilerinizi kaydedebilecek üçüncü taraf bir hizmete yüklemek yerine büyük HAR dosyalarını yerel olarak inceleyin. Süreye göre sıralayarak veya waterfall’da uzun bekleme çubuklarını tarayarak yavaş API uç noktalarını bulun. Sıkıştırma denetimi uyarılarını kontrol ederek statik varlıkların doğru şekilde sıkıştırılıp sıkıştırılmadığını görün.
Nasıl Çalışır
- Bir HAR dosyasını sayfaya sürükleyip bırakın veya HAR Dosyası Aç’a tıklayarak göz atın
- Waterfall tablosundaki tüm istekleri görüntüleyin. Ayrıntıları genişletmek için herhangi bir satıra tıklayın: özet, başlıklar, gövde ve zamanlama dökümü
- Arama kutusu, kategori sekmeleri, süre ve boyut açılır menüleri veya hızlı filtreler (Yalnızca Hatalar / Büyük Yükler) ile listeyi daraltın
- HAR Temizle’ye tıklayarak hassas başlıkları ve çerezleri gizleyin
- Güvenli paylaşım için temiz HAR dosyasını indirin
Desteklenen HAR Dosyaları
Chrome DevTools HAR dışa aktarımları. Firefox Ağ Kaydı dışa aktarımları. Safari Ağ sekmesi dışa aktarımları. Geçerli herhangi bir HAR JSON dosyası.