Flipper
- React Native kursu
- Orta seviye
- Ders 100/116
- 4 dk
Flipper ile mobil debug aracını öğrenirsin.
Flipper nedir?
Flipper, React Native için masaüstü hata ayıklama aracıdır. Ağ isteklerini, layout'u, veritabanını ve console çıktısını tek pencerede gösterir. Uygulama çalışırken canlı veri akışı sağlar; bu, sorunların hızlı bulunmasını kolaylaştırır.
Flipper'ı kurunca Android ve iOS simülatörleri otomatik bağlanır. Network sekmesi fetch çağrılarını listeler; Layout sekmesi bileşen ağacını görselleştirir. Eklentilerle genişletilebilir; kendi eklentini yazabilirsin. React Native 0.62'den beri varsayılan olarak gelir; ayrıca kurmaya gerek yoktur. Hata ayıklama sürecini tek merkezde toplar.
Kurulum
React Native 0.62 ve sonrasında Flipper varsayılan olarak gelir. Yapılandırma dosyalarında bir şey değiştirmene gerek yoktur; uygulama çalışınca Flipper otomatik bağlanır. Yalnızca masaüstü uygulamasını indirip açman yeter.
Flipper'ı açınca bağlı cihaz veya simülatör listelenir. Üzerine tıklayınca sekmeler gelir: Network, Layout, Logs, Databases. Uygulamada bir fetch çağrısı yaptığında Network sekmesinde anında görünür. Eski React Native sürümlerinde react-native flipper ile manuel kurulum gerekir. Yeni projelerde bu adım atlanır.
Uygulama Fetch çağrısı yaz
Flipper'ın Network sekmesinde görünecek bir fetch çağrısı yaz. URL 'https://api.example.com/data' olsun. Dönen yanıtı .then ile yakala.
Başlangıç kodu
// Ağ isteği yaz; fetch ile bir URL çağır
// .then ile yanıtı yakalaÖrnek çözüm
fetch("https://api.example.com/data").then((res) => {
return res.json();
});Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Flipper'ın ana görevi nedir?
npx flipper- APK derlemek
- Test yazmak
- Renk paleti seçmek
- Mobil hata ayıklama oturumu açmak Doğru cevap
Açıklama: Flipper mobil hata ayıklama oturumu açar.
2 Flipper'ı başlat
// Hata ayıklama için ____'ı başlat// Hata ayıklama için Flipper'ı başlatAçıklama: Flipper'ı başlatmak hata ayıklamayı açar.
3 Özelliği rolüne eşle
| Kavram | Anlamı |
|---|---|
Network |
fetch çağrılarını listeler |
Layout |
Bileşen ağacını gösterir |
Logs |
console çıktısını gösterir |
Databases |
Veritabanını inceler |