React Native DevTools: a Flipper utáni új debugger teljes útmutatója (2026)

Frissítve: 2026. augusztus 25.

A React Native DevTools a React Native hivatalos, beépített hibakeresője a 0.76-os verziótól kezdve: Chrome DevTools alapú felület, ami a Hermes motorral kommunikál a Chrome DevTools Protocol (CDP) fölött, és teljes egészében leváltja a korábbi Flipper-integrációt. Nem kell külön telepíteni, nem kell külső appot indítani; egyszerűen megnyomod a j-t a Metro terminálban, és böngészőben nyílik meg a debugger. Ebben az útmutatóban végigveszem, mit tud, mit nem, és hogyan használd 2026-ban, beleértve a fizikai eszközös debugolást is.

• A React Native DevTools a 0.76 óta a hivatalos debugger; a Flipper 0.74-től deprecated, 0.76-ban eltávolították a template-ből.
• A felület a Chrome DevTools frontendjének egy fokra bővített változata, ezért aki webről jött, azonnal otthon érzi magát.
• A kommunikáció a Chrome DevTools Protocol (CDP) fölött megy, és csak Hermes motorral működik, JSC alatt nem.
• Beépítve kapod: Console, Sources (breakpointok), React DevTools (Components + Profiler), Memory és részleges Network panel.
• Fizikai eszközön ugyanaz a workflow: j a terminálban, USB vagy Wi-Fi kapcsolat a Metro szerverhez.
• A Network panel az fetch és XMLHttpRequest hívásokat mutatja; natív modulból induló kéréseket egyelőre nem.

Mi történt a Flipperrel és miért kell új debugger?

Ha korábban Reacttel dolgoztál a weben, tudod, milyen szoros a Chrome DevTools-integráció: breakpoint, Sources, Network, Performance, mind ugyanabban a felületben. Mobilon éveken át egy hibrid megoldás dolgozott ehelyett: a régi Remote JS Debugging (a JS futott a böngészőben, ez teljesen elrontotta a timingot) és a Flipper (Facebook natív asztali app, C++ plugin-architektúrával). Őszintén szólva egyik sem volt szeretett megoldás. A Flipper telepítése bugos volt Apple Silicon Macen, a plugin-ökoszisztéma lassan haldoklott, és a natív bridge átalakulásával (Fabric, TurboModules) egyre nehezebb volt karbantartani.

A Meta 2023-ban jelentette be a váltást: a React Native 0.73-ban jött a frame-based debugger előzetese, a 0.74 lett az a kiadás, ahol a Flipperhez már nincs beépített támogatás, és a 0.76-ban az új debugger vált a hivatalos alapértelmezetté, a Flipper telepítési utasításai pedig eltűntek a dokumentációból. A gyakorlatban tehát ha ma új projektet húzol fel npx @react-native-community/cli init-tel vagy create-expo-app-pal, a Flipper már nincs benne, és nincs is szükséged rá. A React Native DevTools mindent visz, amit egy tipikus napi debug-workflow igényel.

Hogyan nyithatod meg a React Native DevTools-t?

A leggyorsabb út: indítsd el az appot, majd a Metro terminál ablakban nyomd meg a j billentyűt. Ez megnyit egy új Chrome (vagy Chromium-alapú Edge) fület a beépített DevTools UI-jal, és automatikusan hozzácsatlakozik az éppen futó Hermes példányhoz.

› Metro waiting on http://localhost:8081
› Press j │ open debugger
› Press r │ reload app
› Press d │ open Dev Menu
› Press i │ run on iOS
› Press a │ run on Android

# Nyomd meg: j
i Opening debugger...
i Debugger ready at http://localhost:8081/debugger-frontend/...

Ha az appot már futtatod, de a Metro nem előtérben van, a másik út a Dev Menu: iOS szimulátoron Cmd+D, Android emulátoron Cmd+M (Macen) vagy Ctrl+M (Windowson/Linuxon), fizikai eszközön pedig egyszerűen rázd meg a telefont. Ott a menüben megjelenik az Open DevTools gomb. Expo projektben a workflow ugyanez: npx expo start, majd j.

Egy fontos előfeltétel: a Hermes motornak be kell lennie kapcsolva. A 0.70 óta ez az alapértelmezés minden új projektben, de ha régi projekten dolgozol, ellenőrizd az ios/Podfile-ban a :hermes_enabled => true sort, illetve az android/gradle.properties-ban a hermesEnabled=true értéket. JSC (JavaScriptCore) alatt a DevTools nem indul el, csak egy figyelmeztető üzenetet kapsz a terminálban.

A Chrome DevTools Protocol a motorháztető alatt

Itt jön be a webes háttér előnye. A React Native DevTools nem valami saját protokollra épül: a Hermes motor implementálja a Chrome DevTools Protocol-t, ugyanazt a WebSocket-alapú JSON-RPC-t, amit a Chrome, az Edge és a Node.js Inspector is használ. A Metro szerver egy proxy: a böngésző-oldali DevTools frontend csatlakozik a Metróhoz WebSocketen (ws://localhost:8081/inspector/debug), a Metro pedig továbbítja az üzeneteket a Hermes CDP-endpointjának.

Ez több szempontból is jelentős. Egyrészt a source map-ek "ingyen jönnek": mivel a Metro maga generálja a source map-eket a bundle-hoz, és a DevTools CDP-n keresztül tölti be azokat, breakpointot ugyanolyan pontossággal tudsz rakni .ts és .tsx fájlokba, mint webes projektben. Másrészt a Chrome ecosystem eszközei (Lighthouse-szerű custom pluginek, harmadik féltől származó CDP-kliensek) elméletileg használhatók vele; a gyakorlatban ma leginkább a beépített panelek működnek jól. Harmadrészt a Node.js debug-tapasztalatod közvetlenül átvihető: ha valaha csatlakoztál node --inspect-tel Chromhoz, ez ugyanaz.

A hivatalos dokumentáció részletesen leírja, mely CDP-domainek vannak implementálva: Debugger, Runtime, Console, Profiler, Network (részben), HeapProfiler és Page (részben). A DOM és a CSS domain viszont nem, értelemszerűen, mert nincs DOM. Ezt fontos tudni, mert néhány CDP-alapú harmadik féltől származó eszköz épp ezekre a domainekre épül, és nem fog működni React Native alatt.

A fő panelek: Console, Sources, Network, Memory

Nézzük végig, mit fogsz nap mint nap használni.

Console

Ugyanaz, mint a webes Console: console.log, console.warn, console.error, console.table, console.group. A visszaadott értékek élők, lehet őket kibontani, tulajdonságokat expandálni. A "Live Expressions" (fönt a szemre kattintva) is működik, és kiváló, ha egy állapot értékét folyamatosan akarod látni renderek között anélkül, hogy logokkal árasztanád el a terminált.

Sources és a breakpointok

Bal oldalt megjelennek a bundle-ba fordított forrásfájljaid a source map alapján. Cmd+P-vel gyorsan lehet fájlt keresni. Kattints a sor számára, breakpoint. Amikor a kód rááll, a jobb oldali panel mutatja a call stacket, a hatókör változóit és a watch expression-öket. A conditional breakpoint (jobb klikk a marker-en) itt is működik, ami nagyon hasznos például, ha egy lista render függvényében csak egy adott id esetén akarsz megállni.

Network

Ez az egyetlen panel, ami részleges: minden fetch() és XMLHttpRequest hívás megjelenik, benne a request/response headers és body, státuszkód, timing. Amit nem lát: natív modulokból induló kéréseket, WebSocket forgalmat, kép-letöltéseket az <Image> komponens natív oldaláról. Ha ezekre is kíváncsi vagy, a Charles Proxy vagy a reactotron-react-native továbbra is helye van a toolkitben. Nem kell mindent egyetlen eszközbe belezsúfolni.

Memory

Heap snapshot, allocation timeline, sampling profiler. A Hermes motor 2026-ra már stabilan támogatja mindhármat. Ha egy képernyőn tapasztalod, hogy növekedik a memória-használat, itt tudsz snapshotot venni előtte és utána, majd a "Comparison" nézetben megnézni, melyik objektumok maradtak életben. Erről bővebben írtam a Reanimated 4 animációk és gesztusok cikkben egy konkrét worklet-leak példával, amit egy ügyfélprojekten kaptam el.

React DevTools: Components és Profiler

A Meta a react-devtools-core csomagot közvetlenül integrálta a React Native DevTools-ba, így nem kell külön elindítanod react-devtools-t a terminálban. Két új tab jelenik meg a DevTools-ban: Components és Profiler.

A Components tab a szokott React fát mutatja, komponens-hierarchiával, propokkal, state-tel és hookokkal. Kattintás egy komponensre kiválasztja a hozzá tartozó natív view-t az emulátorban is (piros keret jelenik meg körülötte). A hookok teljes névvel jelennek meg, és ez a React 19-es változás őszintén szólva nagyot javított a debug-élményen.

// Példa: ez a komponens így fog látszani a DevTools-ban
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);         // State
  const isFocused = useIsFocused();               // Custom hook
  const { data, isPending } = useUserQuery(userId); // TanStack Query

  useEffect(() => {
    if (data) setUser(data);
  }, [data]);

  return <Text>{user?.name ?? 'Betöltés...'}</Text>;
}

A Profiler tab pedig fel tudja venni a rendereléseket egy időszakon belül, és flamegraph-en mutatja, melyik komponens mennyi ideig rendert, hányszor és miért (prop-változás, state-változás, parent re-render). Ha listákkal küzdesz, ezt a nézetet ajánlom párosítani a FlashList v2 vs FlatList cikkben tárgyalt estimatedItemSize és keyExtractor hangolással: a Profiler pontosan megmutatja, mikor rendel újra az egész lista fölöslegesen.

Debugolás fizikai eszközön USB-n és Wi-Fi-n

A szimulátor és emulátor mellett fizikai eszközön is ugyanilyen a workflow, mert a Metro szerver ugyanaz. Két eset van.

USB-vel (Android)

Csatlakoztasd a telefont, engedélyezd az USB debugot, majd:

# A Metro portját (8081) átirányítjuk a telefonra
adb reverse tcp:8081 tcp:8081

# App indítása
npx react-native run-android

# Terminálban: j

Az adb reverse parancs a legfontosabb rész, ez teszi lehetővé, hogy a telefonon futó app "localhost:8081"-nek látja a fejlesztői gép Metro szerverét. Enélkül üres képernyőt látsz, mert nem tudja letölteni a bundle-t. Ezt a hibát én is legalább háromszor bekaptam, mielőtt reflexből kezdtem el a parancsot begépelni.

Wi-Fi-n (iOS és Android)

iOS 14+ esetében Xcode-ban párosított eszközt kapsz automatikusan Wi-Fi-n. Android alatt a adb tcpip 5555 paranccsal engedélyezhető a hálózati mód, majd adb connect <ip>:5555. Ha ez megvan, a Metro futtatásakor a bundle URL-ben cseréld ki a localhost-ot a fejlesztői gép LAN IP-jére (a Dev Menü Configure Bundler pontjában). A DevTools ezek után ugyanúgy indul j-vel.

Gyakori hibák és megoldások

Néhány dolog, amivel én és a kollégáim rendszeresen belefutunk projektek beállításakor:

"No connection to a Hermes runtime"

Ez akkor jön, ha az app JSC-vel épült. Kapcsold be a Hermes-t (lásd fentebb), csinálj tiszta buildet (Android: cd android && ./gradlew clean && cd .., iOS: cd ios && pod install && cd ..), és próbáld újra.

Breakpoint nem áll meg, vagy rossz sorban áll meg

Source map probléma. Ellenőrizd a metro.config.js-ben, hogy nincs-e olyan transformer, ami elrontja a source map generálást (régi babel-plugin-transform-remove-console például szokott). Alap Metro konfiggal egyből működnie kell. Restart Metro cache nélkül: npx react-native start --reset-cache.

DevTools tab kinyílik, de üres

Böngésző-blokkoló extension vagy szigorú Content Security Policy. Próbáld meg incognito ablakban vagy egy másik Chromium-alapú böngészőben. 2025 nyarán volt egy Chrome frissítés, ami egy bizonyos WebSocket viselkedést szigorított; ha régi Chrome-verziót használsz, frissíts.

Konzol logok nem jelennek meg

A Metro terminál még mindig alap opció, a console.log mindkét helyre kerül. Ha csak a DevTools-ban nincs, valószínűleg a "Filter" mezőben maradt szűrő, vagy a "Default levels" közül kikapcsoltad a Verbose szintet.

Flipper vs React Native DevTools összehasonlítás

Aki hosszú éveket töltött Flipperrel, joggal kérdezi: mit veszítek, ha váltok? Az alábbi táblázat a legfontosabb dimenziókat mutatja 2026-os állapot szerint.

Szempont	Flipper (deprecated)	React Native DevTools
Telepítés	Külön asztali app + natív pluginok (~1 GB)	Beépített, semmi extra nem kell
Támogatott motor	Hermes és JSC egyaránt	Csak Hermes
Breakpointok	Igen (react-devtools bővítménnyel)	Igen, Chrome DevTools színvonalon
Network	Teljes: natív kérések is	Csak fetch/XHR (2026)
Layout Inspector	Igen, natív view-fa	Csak React fa (Components tab)
Redux/MMKV/AsyncStorage plugin	Community pluginek	Nincs beépítve; Reactotron helyettesíti
Új Architektúra (Fabric) kompatibilitás	Törékeny, plugin-függő	Natív, elsődleges szempont
Karbantartás	Sunset (a Meta kivezette)	Aktív fejlesztés a core RN teamnél

Röviden: aki csak logot, breakpointot, React fát és fetch-monitoringot akar (ez a fejlesztők 90%-a), az veszteség nélkül vált. Aki natív hálózati sniffelést vagy egyedi Flipper-plugint használ, annak érdemes átgondolnia: a Charles Proxy, Reactotron és Sentry hármassal a hiányzó darabok ma pótolhatók, és nem kell aggódnia, hogy a következő RN-frissítés megtöri a debug-eszközét.

Gyakran ismételt kérdések

Hogyan nyithatom meg a React Native DevTools-t?

Indítsd el a Metro-t (npx react-native start vagy npx expo start), majd a terminál ablakában nyomd meg a j billentyűt. Ez megnyitja a debuggert egy új Chrome-fülön, és automatikusan hozzácsatlakozik a futó appodhoz.

Mi lépett a Flipper helyébe React Native-ban?

A React Native DevTools, egy Chrome DevTools-alapú beépített debugger. A 0.74-ben lett a Flipper deprecated, a 0.76 óta pedig a DevTools az alapértelmezett és egyetlen hivatalosan támogatott eszköz.

Támogatott-e még a Flipper 2026-ban?

Új projektek template-jéből eltávolították, és a core team nem tesztel rá többé. Régi projekten még használható RN 0.75-ig, de nem ajánlott új munkába választani. A következő nagy verzió (várhatóan 0.78) már nem is fog megbízhatóan futni vele.

Miért nem működik a DevTools JavaScriptCore-ral?

Mert a debugger a Chrome DevTools Protocol-t használja, és ezt a Hermes motor implementálja natívan. A JavaScriptCore-nak nincs CDP-endpointja. A megoldás a Hermes bekapcsolása, ami a 0.70 óta amúgy is az alapértelmezés.

Hogyan tekinthetem meg a natív hálózati kéréseket?

A DevTools Network panelje jelenleg csak fetch-et és XMLHttpRequest-et lát. Natív modulokból induló forgalomhoz a Charles Proxy, mitmproxy vagy a Reactotron a bevált kiegészítő. A core team roadmapján szerepel a natív network integráció, de 2026 közepéig nem ígéretes.