React Native DevTools: Ghidul Complet de Debugging în 2026 (Înlocuitorul Flipper)

Actualizat: 29 mai 2026

React Native DevTools este noul debugger oficial bazat pe Chrome DevTools, integrat în React Native 0.76+ și activat implicit, care înlocuiește definitiv Flipper și oferă inspecție React, breakpoints, profiler de performanță și network inspector dintr-o singură interfață. Dacă încă ai un proiect care depinde de Flipper, e timpul să migrezi: începând cu 0.74 Flipper a fost scos din template, iar în 0.76 ecosistemul s-a mutat complet pe React Native DevTools, alimentat de Hermes inspector proxy și integrat nativ în Metro.

• React Native DevTools e debugger-ul oficial începând cu RN 0.76 și înlocuiește complet Flipper, care a fost depreciat în 0.74.
• Deschizi DevTools apăsând j în terminalul Metro sau din meniul Dev (Cmd+M / Ctrl+M). Nu mai e nevoie să instalezi nimic separat.
• Funcționalitățile principale: Components inspector (React DevTools), Sources cu breakpoints, Console, Network și Performance profiler bazat pe Hermes.
• Pentru aplicații care încă rulează JSC (vechiul motor), inspectorul de Sources nu funcționează. Hermes e obligatoriu pentru debugging modern.
• Network inspector funcționează doar pentru cereri pornite din fetch sau XMLHttpRequest. Clienții nativi (Apollo cu link custom, gRPC) cer instrumentare suplimentară.
• Pentru profilare adâncă a render-urilor React, combină tab-ul Performance cu noul React Compiler (RN 0.78+) ca să identifici componente care nu sunt memoizate corect.

De ce a fost depreciat Flipper și ce-l înlocuiește

Onest, am pierdut probabil câteva zile bune din viață încercând să fac Flipper să recunoască o aplicație iOS pe simulatorul M1, prin 2023. Vestea bună e că, dacă ești pe React Native 0.76 sau mai nou, nu mai trebuie să treci prin asta. Echipa Meta a anunțat oficial deprecierea Flipper odată cu release-ul 0.76, iar template-ul nou nu mai include Flipper deloc. Motivele sunt pragmatice: Flipper depindea de un protocol Java/Native greoi, avea probleme de compatibilitate cu Apple Silicon și cu noua arhitectură, iar mentenanța lui devenise un blocaj pentru echipa core.

React Native DevTools e construit peste Chrome DevTools Protocol (CDP), comunică direct cu motorul Hermes prin hermes-inspector-proxy și e integrat în Metro. Asta înseamnă zero configurare suplimentară, zero plugin-uri de instalat, și (important) funcționează identic pe iOS și Android, pe device fizic sau simulator, fără ssh tunneling sau ADB port-forwarding manual. În experiența mea, e prima dată când debugging-ul în React Native se simte la fel de fluid ca într-un proiect web cu Vite plus Chrome.

Dacă lucrezi pe un proiect mai vechi, merită să te uiți întâi la ghidul nostru despre Noua Arhitectură React Native înainte să migrezi debugger-ul, pentru că majoritatea blocajelor apar din versiuni vechi de Hermes sau din module native incompatibile.

Cum deschizi React Native DevTools

Există trei moduri prin care poți deschide DevTools, iar toate presupun că Metro rulează deja. Eu folosesc 90% din timp prima variantă, pentru că nu îmi întrerupe fluxul de la tastatură.

Din terminalul Metro

În fereastra unde rulează npx react-native start (sau npx expo start), apasă pur și simplu tasta j. Metro va deschide o fereastră Chrome dedicată cu React Native DevTools. Prima dată poate dura câteva secunde, pentru că Metro descarcă bundle-ul DevTools în cache.

Din Dev Menu pe device

Scutură device-ul fizic, apasă Cmd+M pe Android emulator, Cmd+D pe iOS simulator, sau Ctrl+M pe Windows, apoi selectează Open DevTools. Util când ești cu device-ul în mână și nu ai access ușor la tastatura computerului.

Din browserul tău

Metro afișează un URL de tipul http://localhost:8081/debugger-frontend. Dacă vrei să folosești Chrome-ul tău în loc de instanța separată, navighează acolo manual. Atenție: nu mai folosi opțiunea veche „Debug with Chrome", aceasta a fost eliminată complet în 0.76 pentru că lansa o instanță remote care nu mai era sincronizată cu Hermes.

Components inspector: tot ce făcea React DevTools, nativ

Tab-ul Components e practic React DevTools integrat. Vezi arborele complet de componente, props, state, hooks, context, exact ca în web. Diferența majoră față de versiunea standalone de React DevTools e că aici poți inspecta și componentele Fabric (noua arhitectură de rendering) și vezi proprietățile shadow node-urilor native, ceea ce e foarte util când debug-uiezi layout-uri complexe cu Yoga.

Câteva trucuri pe care le folosesc zilnic:

• Highlight updates when components render. Bifează din setări (rotița din colțul tab-ului). Apoi navighează prin aplicație și vei vedea border-uri colorate peste componentele care re-rendează. Cele care clipesc verde la fiecare scroll sunt prima sursă de probleme de performanță.
• Inspect element on the device. Dă click pe iconița de target din DevTools, apoi atinge orice element din aplicație. Componentul corespunzător va fi selectat în arbore. Funcționează inclusiv prin Fabric, fără să mai fie nevoie de Layout Inspector separat.
• Filter by component name. Bara de search acceptă regex. Caut frecvent ^FlashList$ ca să găsesc rapid lista virtualizată într-un ecran imbricat profund.

Pentru context: dacă inspectezi o listă mare și vezi multe re-renderuri inutile, vezi ghidul nostru despre FlashList v2, acolo explic cum recyclingPool și overrideItemLayout pot reduce drastic activitatea pe care o vei vedea în acest tab.

// Exemplu: marchează re-renderurile cu why-did-you-render direct din DevTools
import React from 'react';

function ProductCard({ product }) {
  // În Components tab, deschide Hooks și vezi exact ce hook s-a schimbat
  const [expanded, setExpanded] = React.useState(false);

  // useMemo aici previne re-calcule la fiecare parent render
  const totalPrice = React.useMemo(
    () => product.price * (1 + product.taxRate),
    [product.price, product.taxRate]
  );

  return (
    <Pressable onPress={() => setExpanded(v => !v)}>
      <Text>{product.name}: {totalPrice} RON</Text>
    </Pressable>
  );
}

// Dacă tot vezi ProductCard clipind în „Highlight updates",
// înseamnă că parentul nu memoizează lista corect.
export default React.memo(ProductCard);

Breakpoints, sourcemaps și Sources tab

Aici DevTools chiar strălucește. Tab-ul Sources îți arată codul tău TypeScript original, nu bundle-ul transpilat, datorită sourcemaps generate de Metro. Poți pune breakpoints, step in/over/out, evalua expresii în consolă în contextul curent al execuției. Tot ce te aștepți de la un debugger modern, în fine.

Câteva lucruri pe care merită să le știi:

1. Conditional breakpoints funcționează corect. Click dreapta pe gutter și pui o expresie de tipul userId === 'abc123'. Execuția se oprește doar când condiția e adevărată. Eu folosesc asta tot timpul pentru bug-urile care apar doar la un user anume.
2. Logpoints în loc de console.log. În loc să adaugi console.log peste tot și să rebuild-uiești, click dreapta pe linia respectivă, „Add logpoint", și pui ce vrei să loghezi. Apare în consolă fără modificare de cod.
3. Pause on exception. În stânga sus, activează „Pause on uncaught exceptions". Util când investighezi crash-uri intermitente, DevTools se oprește exact pe linia care aruncă.

Network inspector: cereri HTTP în timp real

Una dintre cele mai cerute funcționalități. Tab-ul Network afișează toate request-urile fetch și XMLHttpRequest, cu headers, payload, response, timing, status code, exact ca în Chrome DevTools pe web. În Flipper aveai nevoie de plugin-ul „Network" și de configurare suplimentară pe iOS pentru a intercepta NSURLSession; aici totul funcționează din cutie.

Limitări importante pe care trebuie să le știi:

• WebSockets nu sunt afișate. Dacă folosești react-native-websocket sau Phoenix Channels, vei vedea handshake-ul HTTP inițial, dar nu și frame-urile WS. Pentru asta, încă e util să loghezi manual.
• Cereri din module native (Alamofire, OkHttp custom) nu apar. Network inspector interceptează layer-ul JavaScript. O bibliotecă care face networking direct din native (de exemplu unele SDK-uri Firebase) nu va apărea aici.
• gRPC și WebTransport nu sunt suportate momentan. Probabil în RN 0.79 vor fi adăugate.

Un workflow pe care îl recomand: când debug-uiezi probleme de autentificare, deschide Network, filtrează după domeniul tău de API, dă „Preserve log" și navighează prin flow-ul de login. Vei vedea exact ce headers sunt trimise (inclusiv Authorization bearer), ce returnează server-ul, și unde se pierde token-ul. E un pattern pe care îl folosesc în combinație cu Expo Router și rutele protejate ca să debug-uiez rapid problemele de redirect post-login.

Performance profiler cu Hermes

Tab-ul Performance e probabil cea mai mare îmbunătățire față de Flipper. Bazat pe Hermes Sampling Profiler, captează un flame chart cu apelurile de funcții JS, timpul petrecut în fiecare, și (crucial) cât timp e petrecut în bridge-ul către native versus în JS pur. Pentru aplicații pe noua arhitectură, vei vedea apeluri prin JSI ca operațiuni separate. Documentația tehnică completă a profiler-ului e pe repo-ul oficial Hermes, dacă vrei detalii despre formatul fișierului.

Workflow tipic pentru investigarea unui jank de scroll:

1. Deschide ecranul cu lista care lagging.
2. În DevTools, Performance, click „Record".
3. Fă scroll cât poți de repede timp de 5-10 secunde.
4. Oprește înregistrarea.
5. Caută în flame chart blocuri lungi (peste 16ms), acelea sunt frame drops.
6. Click pe bloc și vezi stack-ul JS care a durat atât.

În experiența mea, cel mai des suspect e un JSON.parse mare în timpul scroll-ului, sau un re-render al unei componente neoptimizate. Combină cu Reanimated 4 și worklets ca să muți animațiile pe UI thread și să elimini complet rolurile JS din path-ul critic.

// Exemplu: cum identifici o problemă reală
// Înainte de optimizare, flame chart arată ProductList.render = 45ms
function ProductList({ products }) {
  return (
    <FlatList
      data={products}
      // BAD: această funcție se re-creează la fiecare render
      renderItem={({ item }) => (
        <ProductCard product={item} onPress={() => handleSelect(item.id)} />
      )}
      keyExtractor={(item) => item.id}
    />
  );
}

// După optimizare, flame chart arată 4ms
function ProductListOptimized({ products }) {
  const handleSelect = React.useCallback((id) => {
    // logică...
  }, []);

  const renderItem = React.useCallback(({ item }) => (
    <ProductCard product={item} onPress={handleSelect} />
  ), [handleSelect]);

  return (
    <FlashList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      estimatedItemSize={88}
    />
  );
}

React Native DevTools în Expo și EAS

Vestea bună pentru cei pe Expo: începând cu Expo SDK 52, React Native DevTools sunt activate automat în npx expo start. Apeși j, exact ca în CLI-ul standalone. Nu mai e nevoie să rulezi expo-cli sau să configurezi react-native-debugger separat.

Pentru build-uri EAS (Expo Application Services), debugger-ul funcționează doar pe build-uri de tip development, nu pe preview sau production. Asta e o limitare voită: în build-urile de release Hermes Inspector e dezactivat pentru securitate și pentru mărimea bundle-ului. Dacă vrei să debug-uiezi un build production-like, fă eas build --profile development --platform ios și instalează rezultatul prin TestFlight intern.

Migrare de la Flipper: plan în 6 pași

Dacă ai un proiect React Native între 0.71 și 0.75 care încă folosește Flipper, iată planul pe care îl recomand. L-am rulat pe trei proiecte producție și durează între 2 ore (proiect simplu) și o zi (proiect cu module native complexe).

Aspect	Flipper	React Native DevTools
Instalare	App desktop + plugin-uri	Integrat în Metro (zero install)
Components inspector	React DevTools plugin	Nativ (tab Components)
Network inspector	Plugin separat	Nativ (tab Network)
Breakpoints	Limitat, prin Chrome remote	Nativ Hermes (CDP)
Performance profiler	Plugin Performance	Hermes Sampling Profiler
Suport Apple Silicon	Buggy, lent	Nativ ARM
Suport Noua Arhitectură	Parțial, în declin	Complet (Fabric inspector)

1. Verifică versiunea Hermes. Trebuie să fie activată. În android/gradle.properties ai hermesEnabled=true, iar în ios/Podfile nu ai :hermes_enabled => false.
2. Elimină dependențele Flipper. Din package.json șterge react-native-flipper și orice plugin flipper-plugin-*.
3. Curăță codul iOS nativ. În ios/Podfile elimină use_flipper!(). În ios/AppDelegate.mm șterge include-urile FlipperKit și blocul initializeFlipper.
4. Curăță codul Android nativ. Șterge fișierul ReactNativeFlipper.java din android/app/src/debug/. Elimină apelul către el din MainApplication.java.
5. Rulează pod install și un clean build. cd ios && pod install, apoi npx react-native run-ios --reset-cache.
6. Testează în noul DevTools. Apasă j în Metro și verifică că Components, Sources, Network funcționează corect.

Probleme frecvente și cum le rezolvi

Iată cele mai frecvente probleme pe care le-am întâlnit, atât în propriile proiecte cât și pe canalele Discord ale comunității, plus rezolvările care funcționează.

„j" nu deschide nimic

Cauza obișnuită: rulezi Metro într-un sub-shell care nu primește input. Asigură-te că Metro rulează în terminal interactiv, nu printr-un wrapper precum concurrently fără --kill-others-on-fail. Sau apelează direct la URL: http://localhost:8081/debugger-frontend.

Components tab apare gol

Apare când aplicația nu reușește să se conecteze la inspector proxy. Pe Android, verifică că adb reverse tcp:8081 tcp:8081 a rulat corect. Pe iOS simulator e automat. Pe device fizic iOS, verifică că ești pe aceeași rețea WiFi și că firewall-ul nu blochează portul 8081.

Sources nu arată codul TypeScript original

Sourcemaps-urile nu au fost generate sau nu sunt aliniate. Adaugă în metro.config.js:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  // Asigură că sourcemaps sunt generate
  serializer: {
    getModulesRunBeforeMainModule: () => [],
  },
};

Apoi npx react-native start --reset-cache.

Network tab nu arată cereri

Verifică dacă folosești fetch nativ sau o bibliotecă care folosește fetch sub capotă (axios, Apollo client cu default link). Bibliotecile care folosesc clienți HTTP nativi (de exemplu unele SDK-uri analytics) nu vor apărea. Pentru axios, asigură-te că nu ai un adapter custom. Adapter-ul default folosește XHR și e interceptat corect.

DevTools se închide la fiecare reload

Comportament cunoscut în RN 0.76.0 până la 0.76.2. Actualizează la 0.76.3 sau mai nou, în release-ul respectiv s-a adăugat persistența conexiunii peste fast refresh.

Întrebări frecvente

Pot încă să folosesc Flipper cu React Native în 2026?

Tehnic da, dar nu este recomandat. Flipper nu mai e inclus în template-ul oficial începând cu 0.74 și nu are suport pentru noua arhitectură. Plugin-urile cheie (Layout, Network) nu mai sunt mentenate activ, iar pe Apple Silicon experiența e instabilă. Migrează la React Native DevTools.

React Native DevTools funcționează fără Hermes?

Nu pentru toate funcționalitățile. Tab-urile Components și Network funcționează cu JSC, dar Sources (breakpoints) și Performance profiler depind de Hermes Inspector. Recomandarea oficială Meta e să folosești Hermes în toate aplicațiile noi.

Cum debug-uiesc cereri HTTP în React Native dacă nu apar în Network?

Verifică întâi că folosești fetch sau XMLHttpRequest (sau axios cu adapter default). Dacă folosești o bibliotecă nativă, adaugă un interceptor pe JS layer. Alternativ, folosește mitmproxy sau Charles Proxy pentru a captura traficul la nivel de rețea.

Cum activez React Native DevTools în Expo?

Începând cu Expo SDK 52, React Native DevTools sunt activate implicit. Rulează npx expo start și apasă j în terminal. Pentru SDK 51 sau mai vechi, fă upgrade la SDK 52+ sau folosește un development build în loc de Expo Go.

Care e diferența între React DevTools standalone și React Native DevTools?

React Native DevTools include React DevTools (tab-ul Components), dar adaugă Sources, Network, Performance și conexiune directă cu Hermes. Versiunea standalone (react-devtools npm) doar inspectează componente și nu are debugging de cod. Pentru proiecte RN moderne, folosește mereu varianta integrată.