Lokalde tarayıcı geliştirme araçları üzerinden network isteklerini değiştirmek
FE geliştiriciler olarak hayatımız network istekleri(request) ve BE'den gelen dönen cevaplarla(response) geçiyor. Kendi bilgisayarımızda çalışırken bu istekleri değiştirme ihtiyacı olduğunda mock server kurmak veya çeşitli kütüphanelerle bu işi yapıyordum.
Mock işini tarayıcı üzerinden yapmaya başlayalı çok rahatladım. Süper kolaylık sağlayan bir özellik.
Genel kullanım alanları
- BE beklememiz gerektiği işlerde BE geliştirci ile ortak bir response üzerinde anlaşıp onu simüle edip Be beklemeden işi bitirmek için
- İsteğin içeriğindeki farklı durumları test etmemiz gerektiği durumlarda. Örneğin userType: "admin" ise buton gözüksün diğeri kullanıcı tipleri ise "Yetkiniz yok" yazsın gibi istekleri karşılamak için
- Bazı network hatalarını aşmak için. Örneğin lokalde CORS hatalarını aşmak için
- API'nin farklı tipteki cevaplarını manipüle etmek için. Örneğin 200 dönen istekte şöyle yap 400 dönerse şu hata mesajını çıkar gibi durumlarda.
Dikkat etmemiz gereken bir durum bu değiştirdiğimiz istekler sadece Dev Tools açıkken çalışacaktır.
Chrome DevTools ile
Developer Tools'u açın Network sekmesine tıklayın. Değiştireceğiniz isteği bulun. Sağ tılayın ve Override content seçin.
Dev Tools'un üst kısmında kaydedilecek klasörü seçmeniz için bir uyarı banner'ı çıkacaktır. Select folder butonuna tıklayıp kendi belirlediğiniz bir klasörü seçin.
Seçtiğiniz klasöre yazma izni verip vermeyeceğiniz soran bir popup çıkacaktır.
Allow'a tıklayıp izin verin.
Bu konumda, web sitesinin alan adıyla aynı adda sahip yeni bir klasör oluşturulur ve isteğe verilen mevcut yanıt bu klasöre kaydedilir.
Dosyayı ister editörle açıp isteğinize göre değiştirin isterseniz DevTools'da açılan yerden düzenleyin.
Sonra sayfayı yenilediğinizde isteğe gelen karşılık artık sizin belirlediğiniz klasördeki cevabı dönecektir.
Ufak bir bilgi olarak; Network sekmesinde bu içeriğini değiştirdiğiniz isteğin başına mor bir yuvarlak ile ayrıştırıldığını göreceksiniz.
Silme işlemi
Peki işimiz bitti ve bu isteklerin normal olarak sunucudan gelmesini istersek ne yapmalıyız?
DevTools'u açın Source penceresinde soldaki Overrides sekmesine tıklayın. Enable Local Overrides işaret kutusunu işaretini kaldırmanız yeterli. Tamamen silmek için sağ tıklayıp Delete'e tıklamanız yeterli.
Firefox Developer Tools ile
Firefox Developer Tools'u açın Network sekmesine tıklayın. İlgili isteği bulun. Sağ tıklayıp Set Network Override'e tıklayın.
Karşınıza değişiklik yapacağınız dosya ismini ve yerini belirleyeceğiniz bir popup çıkacaktır. Klasörü seçip ismini yazın. Artık bu isteği attığınızda bu klasördeki bu dosyadaki cevap dönecektir.
Chrome'daki gibi bu isteği lokalden geldiğini gösteren bir mor yuvarlak ikon ile ayrıştırılacaktır.
Silmek için de Network sekmesine gidip isteğin üzerine sağ tıklayıp Remove Network Override seçmeniz yeterli.
Sonuç
Bu işi yapan daha gelişmiş araçlar var evet ama zaten elimizin altında olan tarayıcılar üzerinde yapmak bana daha kolay ve basit gelir.
Kalın sağlıcakla.
> Not: Hata ayıklama ve düzenleme için claude.ai'da ndestek aldım. 😄
