HAR Görüntüleyici: HTTP Arşiv Analiz ve Temizleme

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.

Neden HAR dosyaları temizlenmeli?

HAR kayıtları tam olarak tasarlanmıştır. Her istek başlığı, her çerez, her yanıt gövdesi. Tarayıcı Geliştirici Araçları yerleşik bir redaksiyon filtresi içermez. Chrome ve Firefox, Ağ sekmesinde görünen her şeyi dışa aktarır.

Kimlik bilgilerini taşıyan alanlar:

Çerez ve Set-Cookie başlıkları oturum belirteçleri, kimlik doğrulama çerezleri ve CSRF belirteçleri taşır. Bir oturum çerezi doğrudan bir hesaba erişim sağlar.

Authorization başlıkları Bearer belirteçleri, Basic auth kimlik bilgileri ve API anahtarları taşır.

İstek gövdeleri POST ve PUT çağrılarında parolalar, belirteçler, ödeme verileri ve PII içerir.

Sorgu parametreleri OAuth yetkilendirme kodlarını, durum belirteçlerini ve oturum tanımlayıcılarını içerir.

Yanıt gövdeleri API uç noktalarından erişim belirteçlerini ve kullanıcı verilerini döndürür.

Bir HAR dosyasını temizlemek, paylaşmadan önce bu değerleri bir yer tutucuyla değiştirmek anlamına gelir. Zamanlama verileri, durum kodları ve yük yapısı hata ayıklama için bozulmadan kalı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

1. Bir HAR dosyasını sayfaya sürükleyip bırakın veya HAR Dosyası Aç’a tıklayarak göz atın
2. 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ü
3. 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
4. HAR Temizle’ye tıklayarak hassas başlıkları ve çerezleri gizleyin
5. 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ı.

Ayrıca Bakınız

• JWT Çözücü: JWT tokenlarının header ve payload bölümlerini çözün
• URL Şifreleyici: URLlerdeki özel karakterleri kodlayın
• JSON Biçimlendirici: JSON verilerini okunabilir formata dönüştürün