· kaynak dev.to (home feed)
Mokup, API mocking özelliğini ayrı bir mock sunucusu gerektirmeden Chrome DevTools'a getiriyor
Mokup, canlı fetch ve XHR isteklerini kaydedip düzenlenebilir mock kurallarına dönüştüren bir Chrome DevTools uzantısı; böylece ayrı bir mock sunucusuna veya geçici kod değişikliklerine gerek kalmıyor.

API yanıtlarını mock'layan bir DevTools paneli
Bir geliştirici, DevTools'a bir API mocking paneli ekleyen Mokup adlı Chrome uzantısını yayımladı; böylece frontend geliştiricileri ayrı bir sunucu çalıştırmadan veya uygulama koduna dokunmadan sahte yanıtlar döndürebiliyor. Geliştiricinin dev.to'daki duyurusuna göre uzantı, bir sayfanın yaptığı istekleri kaydediyor ve bunlardan herhangi birini düzenlenebilir bir mock kuralına dönüştürebiliyor.
Yazı, aracı bilindik bir dizi geçici çözümle karşılaştırıyor. Backend henüz tamamlanmamışken, çevrimdışıyken ya da arayüz tasarımıyla uyuşmayan payload'lar döndürdüğünde geliştiriciler genellikle msw-server veya mockoon gibi bir mock sunucusuna başvuruyor — bu, ayrı bir yapılandırmayla başka bir portta başka bir süreç çalıştırmak demek — ya da güçlü ama tek seferlik bir yanıt için ağır olan tam kapsamlı bir proxy aracına, ya da commit'ten önce hatırlanıp geri alınması gereken geçici kod düzenlemelerine. Chrome'un yerleşik istek engelleme özelliği bir çağrıyı susturabiliyor ama yanıt üretemiyor. Mokup'un vaadi, bunların hiçbirine gerek olmadığı.
İstekleri yakalama ve kural oluşturma
Anlatılan iş akışı az adımdan oluşuyor. Chrome Web Store'dan uzantıyı kurduktan sonra DevTools'u açıp Mokup sekmesine geçiyor ve kaydı etkinleştiriyorsunuz. Uygulamayla etkileşime geçtikçe çağrılar, her isteğin HTTP metodunu, URL'ini, durumunu, türünü ve zamanlamasını gösteren Live sekmesinde belirmeye başlıyor. Yakalanan herhangi bir istekte "Create Mock" düğmesine tıklayarak yanıt gövdesini düzenleyebiliyor ve kural etkinleştirildiğinde, bir sonraki eşleşen istek sahte payload'u alıyor.
Araya giren istekler Live sekmesine geri kaydediliyor, böylece hangi çağrılara mock döndürüldüğü görülebiliyor; kurallar tek tek ya da topluca kapatılabiliyor. Geliştiricinin bunu bağımsız bir uygulama yerine DevTools içine inşa etme gerekçesi kolaylık: mock katmanı, geliştiricilerin zaten izlediği network panelinin yanında duruyor, dolayısıyla başlatılacak veya çalışır durumda tutulacak ek bir araç yok.
Teknik olarak nasıl davranıyor
dev.to yazısına göre uzantı Manifest V3 üzerine inşa edilmiş ve interception script'ini yalnızca panel açıkken incelenen sekmeye enjekte ediyor; yani arka planda gezinmeyi izlemiyor. Mock kuralları ve yakalanan veriler yerel makinede kalıyor; hiçbir şey harici bir sunucuya yüklenmiyor.
Araç freemium modeliyle çalışıyor. Ücretsiz plan en fazla üç mock kuralına izin veriyor; Polar lisans anahtarıyla etkinleştirilen ücretli Pro lisansı ise bu sınırı sınırsız kurallara çıkarıyor.
Geliştirici kapsamı da açıkça belirtiyor: Mokup, fetch ve XMLHttpRequest çağrılarını sayfa script'i düzeyinde yakalıyor. Genel amaçlı bir proxy değil; dolayısıyla gezinme istekleri, WebSocket'ler ve binary yanıtlar mevcut sürümde kapsanmıyor. Pratikte bu, aracın tüm ağ trafiği yerine frontend geliştirme sırasında JSON API yanıtlarını mock'lamak gibi yaygın senaryoyu hedeflediği anlamına geliyor.
Neden önemli
API'leri mock'lamak rutin bir frontend işi ve bilinen yöntemler sürekli bir maliyet getiriyor: çalıştırılıp yapılandırılacak bir mock sunucusu ya da üretime sızma riski taşıyan debug düzenlemeleri. Mocking'i geliştiricilerin zaten açık tuttuğu araca taşımak bu sürtünmenin büyük kısmını ortadan kaldırıyor; mock'ların gerçekten yakalanan isteklerden türetilmesi ise sahte yanıtların elle yazılmış tahminler değil, gerçek API'nin biçimine uyması anlamına geliyor — bitmiş bir backend'i beklemeden arayüz inşa etmek veya hata durumlarını prova etmek için faydalı.
Göz önünde bulundurulması gereken noktalar da var. Bu, kendi duyurusunda anlatılan tek yazarlı bir proje; yani iddialar bağımsız testlerden değil, yapımcının anlatısını yansıtıyor. Üç kuralı olan ücretsiz katman daha büyük iş akışları için dar gelebilir ve yalnızca fetch/XHR kapsamı, şimdilik WebSocket ve binary mocking'i dışarıda bırakıyor. Yine de çoğunlukla JSON endpoint'lerini hızlıca stub'laması gereken ekipler için tarayıcı içi yaklaşım, sürekli can sıkan bir işin kayda değer bir basitleştirmesi.
- #chrome-devtools
- #api-mocking
- #browser-extensions
- #frontend
- #testing