JavaScript ile HTTP İsteklerini İzleme ve Loglama

JavaScript ile HTTP İsteklerini İzleme ve Loglama Nedir

JavaScript ile geliştirilen web uygulamalarında HTTP isteklerini izlemek ve loglamak, hata ayıklama (debugging) sürecini çok daha kolay hale getirebilir. Bu makalede, XMLHttpRequest ve Fetch API kullanarak HTTP isteklerini nasıl izleyeceğimizi ve logları nasıl sayfa altında göstereceğimizi detaylı bir şekilde inceleyeceğiz.

XMLHttpRequest ve Fetch API ile İstekleri İzleme

Web uygulamalarında, kullanıcı etkileşimi sonucunda yapılan HTTP isteklerini izlemek, özellikle performans ve hata ayıklama açısından önemli bir adımdır. XMLHttpRequest ve Fetch API, bu işlemi gerçekleştirebilmemizi sağlar.

XMLHttpRequest üzerinden yapılan POST isteklerini yakalayarak, loglamalar yapabiliriz. Bu işlem, yapılan isteğin türüne göre (blob verisi veya metin verisi gibi) farklı şekilde loglanabilir.

Sayfa Altında Logları Gösterme

İstekleri hakkında detaylı bilgiye sayfa altında eklenen loglar sayesinde ulaşılabilir. Sayfa altına yerleştirilen bir container kullanarak, logları sürekli takip edebiliriz. Bu container, aynı zamanda logları temizlememize veya dışa aktarmamıza olanak tanır.

Loglar aşağıdaki gibi görsel bir gösterimle sağlanabilir:

Logları Temizleme ve İndirme

Logların yönetimi için birden fazla özellik eklenebilir. Bunlardan ilki, logları temizleyebilme özelliğidir. Temizleme butonu sayesinde logları sıfırlayarak yeni verilerle güncelleyebiliriz.

Logları dışa aktarmak için de bir indirme butonu ekleyebiliriz. Bu buton sayesinde, kullanıcılar logları bir metin dosyası olarak indirebilir.

Gizle/Göster Butonu ile Kontrol

Log container'ını gizleyip gösterme işlevi de eklenebilir. Bu işlev, logları geçici olarak gizleyerek sayfa görünümünü daha temiz hale getirebilir. Kullanıcılar, Gizle/Göster butonu ile bu işlemi gerçekleştirebilir.

Küçültme ve Sürükleme Özellikleri

Log container'ının boyutunu küçültmek veya sürüklemek için ek özellikler eklenmiştir. Bu, logları yönetmeyi daha esnek ve kullanıcı dostu hale getirir.

Bu Kodu Kimler Kullanır?

Bu kod, web geliştiricileri, yazılım testerları ve hata ayıklama ile ilgilenen herkes için faydalıdır. HTTP isteklerini izlemek ve loglamak, genellikle kullanıcı etkileşimleri veya API çağrıları üzerinde yapılan testlerde, hata tespitinde oldukça önemli bir yer tutar. Ayrıca, performans analizleri yapmak isteyen geliştiriciler ve testerlar da bu tür araçlardan yararlanabilir.

Bu Kod Testerlar İçin Önemi

Yazılım testerları, uygulamanın doğru çalışıp çalışmadığını kontrol ederken, HTTP isteklerinin izlenmesi ve loglanması kritik bir rol oynar. Testler sırasında, yapılan isteklerin ve alınan yanıtların doğru olup olmadığını belirlemek, özellikle API testleri için büyük bir önem taşır. Bu kod sayesinde, testerlar daha hızlı bir şekilde hataları tespit edebilir ve doğru test verisi elde edebilirler.

Proje kodlarına ve daha fazla detaya GitHub üzerinden erişebilirsiniz: GitHub Linki