React Native DevTools 2026 Rehberi

Güncellendi: 5 Temmuz 2026

React Native DevTools, Flipper'ın 0.73 sürümünden itibaren kullanımdan kaldırılmasının ardından React Native'in resmi hata ayıklama aracı hâline gelen, Chrome DevTools ön yüzü üzerine kurulu tümleşik bir tarayıcıdır. React Native 0.76 ile birlikte varsayılan olarak gelen bu araç; Hermes JavaScript motoru üzerinden çalışan konsol, kaynak kodu kesme noktaları, ağ denetleyicisi ve React Components/Profiler sekmelerini tek bir pencerede birleştirir. Web tarafından gelen bir geliştirici olarak ilk açtığımda tanıdık geldi: aynı tuş kısayolları, aynı Sources paneli, ama arka planda Metro üzerinden çalışıyor.

React Native DevTools, React Native 0.76+ sürümlerinde varsayılan hata ayıklayıcıdır ve Flipper'ın yerini tamamen almıştır.
Simülatörde j tuşuna basarak veya npx react-native start Metro sunucusundan doğrudan başlatılabilir.
Hermes motoru ile birlikte gelen Chrome DevTools Protocol (CDP) desteği sayesinde Sources panelinden gerçek kesme noktaları koyulabilir.
React Components ve Profiler sekmeleri artık DevTools'un içine gömülüdür; ayrı react-devtools paketi gerekmez.
Expo SDK 51+ kullanıcıları için tam uyumludur; expo start çalıştırılıp j tuşuyla açılır.
Ağ denetleyicisi, Fetch ve XHR isteklerini gösterir ancak WebSocket ile Server-Sent Events için Reactotron gibi tamamlayıcı araçlar hâlâ kullanışlıdır.

Flipper neden kaldırıldı ve yerini ne aldı?

Meta, 2023'ün sonlarında Flipper'ın React Native ile paketlenmiş sürümünü resmi olarak kullanımdan kaldırdı ve React Native 0.73 ile birlikte varsayılan şablondan çıkardı. Nedeni tek bir madde değildi: yerel bağımlılıklar sürüm çakışmalarına yol açıyordu, iOS Podfile'daki Flipper girdileri Yeni Mimari (New Architecture) ile uyumsuzdu ve Meta bakım yükünü sürdürmek istemiyordu. Sonuç olarak Flipper'ın React Native tarafındaki eklentileri (Layout Inspector, Network, Databases, Shared Preferences, React DevTools) hepsi birer birer köreldi.

Bu boşluğu doldurmak için Meta, React Native 0.76'da (Kasım 2024) React Native DevTools'u yayınladı ve 2025-2026 boyunca olgunlaştırdı. Yeni araç, Chrome tarayıcısındaki DevTools ön yüzünün bağımsız (standalone) bir sürümünü kullanır; arka planda ise Hermes'in yerleşik Chrome DevTools Protocol (CDP) hedefine bağlanır. Web geliştiricilerinden geliyorsanız avantaj çok net: aynı klavye kısayolları, aynı Sources paneli, aynı Console API'si. Yeni Mimari geçişi hakkında ayrıntılı bilgi için React Native Yeni Mimari geçiş rehberimizi inceleyebilirsiniz, çünkü Fabric ve TurboModules mimarisi, DevTools'un ne kadar temiz çalıştığını doğrudan etkiliyor.

Aracın resmi tanıtımı ve teknik ayrıntıları için React Native resmi belgeleri ile 0.76 sürüm notlarını incelemenizi öneririm.

React Native DevTools nasıl açılır?

DevTools'u açmanın üç ana yolu vardır ve bu, benim günlük iş akışımda en çok karıştığı yerdi başlangıçta. En hızlı yöntem, Metro sunucusu çalışırken terminale odaklanıp j tuşuna basmaktır. Bu, varsayılan tarayıcınızda yeni bir DevTools penceresi açar ve otomatik olarak Metro'nun host ettiği hata ayıklayıcı kanalına bağlanır. Uygulamanız iOS simülatöründe veya Android emülatöründe çalışıyor olmalıdır.

İkinci yöntem, uygulamadaki geliştirici menüsünü kullanmaktır. iOS simülatöründe Cmd + D, Android emülatöründe Cmd + M (Windows/Linux'ta Ctrl + M) tuşları geliştirici menüsünü açar. Buradan "Open DevTools" seçeneğine tıklamanız yeterlidir. Üçüncü yöntem ise gerçek fiziksel bir cihazda çalışıyorsanız telefonu hafifçe sallayarak menüyü çağırmaktır.

Metro başlatıldıktan sonra çalıştırılabilecek tipik akış şu şekildedir:

# 1. Metro sunucusunu başlat
npx react-native start

# 2. Ayrı bir terminalde uygulamayı derleyip çalıştır
npx react-native run-ios
# veya
npx react-native run-android

# 3. Metro terminaline dön ve 'j' tuşuna bas
# Chromium tabanlı bir tarayıcı otomatik açılır

Hermes ve Chrome DevTools Protocol mimarisi

React Native DevTools'un arkasındaki mimariyi anlamak, sorun giderme yeteneğinizi ciddi biçimde artırır. Eski JSC (JavaScriptCore) tabanlı hata ayıklama, "Remote JS Debugging" moduyla JavaScript'i bir Chrome sekmesinde çalıştırıyordu; bu da cihaz üzerindeki gerçek çalışma zamanıyla farklı davranışlara yol açıyordu. Yeni yaklaşım tamamen farklıdır: JavaScript uygulamayı çalıştırdığı yerde, yani cihazdaki Hermes motoru içinde çalışmaya devam eder. DevTools yalnızca Hermes'in yerleşik CDP hedefine bir WebSocket üzerinden bağlanır ve komutlar gönderir.

Bu mimarinin somut sonuçları şunlardır:

Doğru çalışma zamanı davranışı: Date.now(), timing API'leri ve native modül çağrıları hep gerçek Hermes altında çalışır; artık "debug modunda çalışıyor, prod'da çalışmıyor" ikilemi yoktur.
Gerçek JavaScript kesme noktaları: Kod, source map ile eşlenerek satır satır duraklatılabilir. Kapsam (scope) değişkenleri, çağrı yığını (call stack) ve async yığın izleri (async stack traces) desteklenir.
Performans: UI iş parçacığı bloklanmaz çünkü kesme noktaları JS iş parçacığında yönetilir.

Hermes'in CDP desteği, standart protokolün Debugger, Runtime, Profiler ve HeapProfiler domain'lerini kapsar. Bu, DevTools'un yalnızca çalışması değil, aynı zamanda web'deki muadili gibi hissetmesi anlamına gelir. Ekibinizin performans profillemesi yaptığı bir noktada bu API'lerin ne kadar önemli olduğunu göreceksiniz, özellikle animasyon işlerinde. Bu konuda Reanimated 4 animasyon rehberimizde anlatılan worklet'lerin nasıl profillendiğini de merak edenler için ipuçları var.

Sources panelinde kesme noktaları ve kaynak haritaları

Sources paneli, web tarafından gelenlerin en çok evinde hissedeceği yerdir. Sol kenar çubuğundan proje dosya ağacını gezebilir, Cmd + P (macOS) veya Ctrl + P (Windows/Linux) ile hızlı dosya araması yapabilir ve satır numarasına tıklayarak kesme noktası koyabilirsiniz. Metro'nun ürettiği kaynak haritaları (source maps) sayesinde TypeScript veya JSX dosyanızın orijinal hâlinde çalışırsınız; derlenmiş JavaScript'i görmezsiniz.

Aşağıda tipik bir React bileşeninde koşullu kesme noktası örneğini görebilirsiniz:

// screens/CartScreen.tsx
import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';

export function CartScreen({ userId }: { userId: string }) {
  const [items, setItems] = useState<CartItem[]>([]);

  useEffect(() => {
    // Asagidaki satira kesme noktasi koyup
    // kosulu su sekilde ayarlayabilirsiniz:
    //   items.length === 0 && userId === 'test-user-42'
    fetchCart(userId).then((result) => {
      setItems(result);
    });
  }, [userId]);

  return (
    <View>
      <Text>{items.length} urun</Text>
      <Button title="Yenile" onPress={() => setItems([])} />
    </View>
  );
}

Koşullu kesme noktaları (conditional breakpoints), log noktaları (logpoints) ve yakalanmamış istisnalarda duraklatma (pause on uncaught exceptions) tüm klasik DevTools yeteneklerini destekler. Ek olarak, debugger; ifadesi kodunuza yazılırsa DevTools açıkken otomatik olarak duraklama gerçekleşir.

React Components ve Profiler sekmeleri

Bir dönem React Native'de Components ve Profiler'a erişmek için ayrı bir react-devtools Electron uygulaması kurmak gerekiyordu. React Native DevTools bu iki sekmeyi doğrudan içeri gömdü. Sekmeler, Chrome DevTools'un varsayılan sekmelerinin yanında görünür ve web'deki React DevTools ile birebir aynı arayüze sahiptir.

Components sekmesi: Bileşen ağacını gerçek zamanlı olarak inceleyebilir, prop'ları, state'i ve hook değerlerini görebilirsiniz. Bir bileşeni seçtiğinizde sağdaki panelde useState, useReducer, useContext ve useMemo gibi tüm hook'lar sıralı olarak listelenir. Aynı zamanda "Log this component data to the console" düğmesiyle bileşenin snapshot'ını konsola dökebilirsiniz.

Profiler sekmesi: Kaydet düğmesine basıp uygulamada bir etkileşim gerçekleştirdikten sonra durdurduğunuzda, her commit için alev grafiği (flamegraph) ve sıralı liste (ranked) görselleştirmesi elde edersiniz. Hangi bileşenin ne kadar süre render edildiğini, neden yeniden render olduğunu (props değişimi, state değişimi, parent render) görebilirsiniz. State yönetimi tarafında verim analizi için MMKV senkron depolama rehberimize göz atmanızı öneririm, çünkü senkron I/O'nun render tetikleme sıklığına etkisi Profiler'da çok net görülür.

Ağ istekleri nasıl incelenir?

Network paneli, fetch, XMLHttpRequest ve axios gibi bunları saran kütüphanelerin tüm HTTP isteklerini yakalar. Her istek için URL, HTTP metodu, durum kodu (status code), boyut, süre, istek/yanıt başlıkları (headers), istek gövdesi ve yanıt gövdesi ayrıntılarını görürsünüz. Bu, Flipper'ın Network eklentisinin ana özelliklerinin neredeyse tamamını karşılar.

// Bu istek Network panelinde
// otomatik olarak gorunur
async function loadProducts() {
  const response = await fetch(
    'https://api.example.com/v2/products',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Api-Version': '2026-06-01',
      },
      body: JSON.stringify({ page: 1, limit: 20 }),
    }
  );

  if (!response.ok) {
    // Kesme noktasi koyup response.headers degerini inceleyin
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json();
}

Ne yazık ki bazı sınırlamalar da var: WebSocket bağlantıları ve Server-Sent Events (SSE) Network panelinde tam olarak görünmez, yalnızca bağlantı kurulumu listelenir. Sürekli bir socket akışında mesaj mesaj denetim yapmak için Reactotron veya @react-native-community/netinfo kombinasyonu hâlâ pratiktir. Ayrıca native tarafta URLSession (iOS) veya OkHttp (Android) üzerinden yapılan istekler (örneğin bazı görüntü yükleme kütüphaneleri) JS bridge'ini kullanmadıkları için görünmez.

Expo projelerinde DevTools kullanımı

Expo SDK 51 ve üzeri sürümler React Native DevTools'u yerleşik olarak destekler; hiçbir ek yapılandırma gerekmez. npx expo start ile Metro'yu başlattıktan sonra terminal odaklıyken j tuşuna basmanız yeterlidir. Expo Go veya development build fark etmez, her ikisi de aynı CDP hedefine bağlanır.

Expo Router kullanıyorsanız Sources panelinde app/ dizini altındaki tüm dosyaları görebilir, dinamik rotalarınıza ([id].tsx) doğrudan kesme noktası koyabilirsiniz. Bu iş akışının detayları için Expo Router v4 dosya tabanlı yönlendirme rehberimize bakabilirsiniz. Orada rota parametreleri ve navigasyon state'inin nasıl gözlemleneceğini ayrıntılı işledim.

# Expo projesinde DevTools baslatma akisi
npx expo start

# Metro calisirken terminale odaklan ve tuslara bas:
# j -> React Native DevTools acilir
# r -> Uygulamayi yeniden yukler (reload)
# m -> Cihazda gelistirici menusunu acar
# ? -> Tum kisayollari listeler

Expo'nun kendi expo-dev-client paketiyle üretilen geliştirme yapıları (development builds), DevTools'u varsayılan olarak destekler. Expo'nun geliştirici ekibinin sunduğu Expo hata ayıklama araçları belgeleri, ekip iş akışları ve EAS Build tarafındaki hata ayıklama modu ipuçları için iyi bir referanstır.

Eski projelerde Flipper'dan geçiş

Hâlâ React Native 0.71–0.72 aralığında bir projeyi bakıyorsanız Flipper girdilerini temizlemek genelde yükseltmenin en can sıkıcı adımıdır. Aşağıdaki komutlar iOS ve Android tarafındaki referansları sistematik olarak kaldırmanıza yardımcı olur.

# iOS - Podfile icindeki Flipper girdilerini kaldir
# use_flipper!() satirini sil, ardindan:
cd ios
pod deintegrate
rm -rf Pods Podfile.lock
pod install

# Android - build.gradle icindeki
# FLIPPER_VERSION blogunu ve
# initializeFlipper cagrilarini temizle
cd android
./gradlew clean

# NPM/Yarn paket temizligi
npm uninstall react-native-flipper
rm -rf node_modules
npm install

Yükseltme sonrasında MainApplication.kt veya AppDelegate.mm dosyalarında hâlâ ReactNativeFlipper veya initializeFlipper referansı kaldıysa bunları da silin, aksi hâlde derleme başarısız olur. React Native 0.76'ya yükseltmek için resmi Upgrade Helper aracını kullanmanızı şiddetle öneririm; template dosyalarındaki tüm farkları yan yana gösterir.

Sık karşılaşılan sorunlar ve çözümleri

Gerçek projelerde en çok karşılaştığım dört sorun ve çözümü şu şekildedir:

DevTools açılıyor ama hiçbir şey göstermiyor. Bu genellikle Metro'nun eski bir sürümünden veya bytecode önbelleğinden kaynaklanır. Terminal komutu: watchman watch-del-all && rm -rf $TMPDIR/metro-* && npx react-native start --reset-cache.
Console.log çıktıları görünmüyor. Hermes değil, JSC üzerinde çalışıyor olabilirsiniz. ios/Podfile veya android/app/build.gradle dosyanızda hermes_enabled: true ayarını doğrulayın. Yeni Mimari ile birlikte Hermes zaten varsayılan olarak açıktır.
Kesme noktaları yanlış satırda tetikleniyor. Kaynak haritası uyumsuzluğunun klasik belirtisi. Metro cache'ini sıfırlayın ve DevTools'u kapatıp yeniden açın.
Bir cihaza bağlanabiliyor, diğerine bağlanamıyor. DevTools tek seferde tek bir hedefe bağlanır. Birden fazla emülatör/simülatör açıksa, Metro terminalinden Reload yalnızca odaklanmış hedefi etkiler.

Sıkça Sorulan Sorular

React Native DevTools, Expo Go ile çalışır mı?

Evet. Expo SDK 51 ve üzeri sürümlerde Expo Go, Hermes motorunu ve CDP hedefini içerir. npx expo start çalıştırıp terminale j tuşuyla DevTools açılır ve Expo Go üzerinde çalışan projenize otomatik bağlanır.

Flipper hâlâ tamamen çalışıyor mu, sıfırdan projede kullanabilir miyim?

Hayır. Meta, Flipper'ı React Native ile birlikte bakımını bırakmıştır ve yeni şablonlarda yer almaz. Yeni Mimari (Fabric + TurboModules) ile de tam uyumlu değildir. 2026 itibarıyla resmi hata ayıklama aracı React Native DevTools'tur.

React Native DevTools ile production build'de hata ayıklama yapabilir miyim?

Hayır. Hata ayıklama yalnızca debug veya development-client yapılarında etkinleştirilmiş CDP hedefiyle çalışır. Release yapıları güvenlik ve performans nedeniyle CDP sunucusunu içermez. Prod ortamındaki hataları izlemek için Sentry veya Bugsnag gibi çökme raporlama araçları kullanılmalıdır.

Redux state'ini React Native DevTools içinde inceleyebilir miyim?

Doğrudan Redux DevTools eklentisi gömülü değildir, ancak Components sekmesinde <Provider> bileşenini seçerek store'un anlık değerini görebilirsiniz. Gelişmiş zaman yolculuğu (time-travel) için Reactotron veya @redux-devtools/extension hâlâ önerilir.

DevTools ile bellek sızıntısı (memory leak) tespiti mümkün mü?

Evet. Memory sekmesindeki Heap Snapshot özelliği Hermes CDP üzerinden desteklenir. Snapshot alıp iki farklı zamandaki heap'i karşılaştırarak tutulan (retained) nesneleri ve kaynağı belirleyebilirsiniz. Timeline profilleme henüz tam olarak desteklenmez.