Debugování React Native 2026: DevTools

Q: Jak otevřu React Native DevTools v Expo projektu?

Spusťte npx expo start , počkejte na Metro a stiskněte klávesu j . DevTools se otevřou v separátním okně. Funguje s Expo SDK 51 a novějším.

Aktualizováno: 11. června 2026

Debugování React Native v roce 2026 probíhá primárně přes React Native DevTools, vestavěný debugger postavený na Chrome DevTools, který nahradil zastaralého Flippera od verze 0.76. V tomhle průvodci vám ukážu, jak otevřít DevTools jedinou klávesou, kdy sáhnout po Hermes Profileru, jak inspekovat síťové požadavky bez externích nástrojů a které postupy mi opakovaně zachránily hodiny hledání chyb v produkčních aplikacích. Dostanete kompletní debuggovací sadu pro React Native 0.79+ a Expo SDK 53.

Flipper byl ve verzi 0.73 odstraněn z výchozího nastavení a od 0.76 plně nahrazen React Native DevTools. V nových projektech ho už nepoužívejte.
React Native DevTools otevřete klávesou j v terminálu Metro nebo přes Dev Menu (Cmd+M / Cmd+D). Funguje out-of-the-box bez instalace.
Hermes Profiler poskytuje produkční sample profile s flame grafy přímo v Chrome DevTools. V roce 2026 je to pro mě jasná volba na JS performance debugging.
LogBox v Reactu 0.79 podporuje source maps a stack frames přímo ve VS Code, kliknutím skočíte na řádek chyby.
Pro produkční chyby je nezbytný Sentry nebo Bugsnag s nahranými Hermes source maps. Bez nich jsou stack traces nečitelné.
Reactotron zůstává relevantní pro inspekci stavu (Redux, MMKV, AsyncStorage), ale pro většinu úloh vystačíte s vestavěnými DevTools.

Proč Flipper skončil a co přišlo místo něj

Flipper byl léta výchozím debuggerem React Native. Tým Meta ho ale ve verzi 0.73 odstranil z šablony nového projektu a od verze 0.76 (vydané v říjnu 2024) ho oficiálně přestal podporovat. Důvody byly tři. Flipper běžel jako samostatná Electron aplikace s vlastní instalací, jeho pluginový systém byl křehký vůči verzi React Native a po nástupu Hermes Profileru přestala dávat smysl většina jeho funkcí. V roce 2026 najdete v aktivním vývoji už jen historickou komunitní fork verzi.

Nástupcem je React Native DevTools, debugger postavený na Chrome DevTools Frontend, který se spouští přímo z Metro bundleru. Nevyžaduje instalaci, nevyužívá zastaralou WebSocket bridge a má prvotřídní podporu pro Hermes. Pokud stále udržujete projekt s Flipperem, doporučuju migraci hned při příštím upgradu. Mrkněte se na náš průvodce novou architekturou React Native a Fabric/TurboModules, kde je odstranění Flipperu jedním z prerekvizit.

React Native DevTools: vestavěný debugger 2026

React Native DevTools jsou nejdůležitějším nástrojem v dnešním debuggovacím arzenálu. Pracují s Hermes i s JavaScriptCore, ale plný výkon (zejména paměťový profiler) získáte jen s Hermes, což je výchozí engine od verze 0.70. V projektu s Metrem stačí stisknout klávesu j v terminálu, kde běží npx react-native start nebo npx expo start, a DevTools se otevřou v separátním Chromium okně připojeném k běžící aplikaci.

Alternativně lze debugger otevřít z Dev Menu v aplikaci. Na iOS simulátoru Cmd+D, na Android emulátoru Cmd+M (macOS) nebo Ctrl+M (Windows/Linux), na fyzickém zařízení zatřeste telefonem. Vyberte Open DevTools.

Nastavení breakpointů a step-through debugging

Na rozdíl od starého Remote JS Debuggingu, který kód spouštěl v Chrome a způsoboval rozdílné chování oproti zařízení, React Native DevTools používají Chrome DevTools Protocol (CDP) a kód běží stále na zařízení. Breakpoint nastavíte v záložce Sources kliknutím na číslo řádku v souboru pod cestou localhost:8081/index.bundle, nebo přes Cmd+P rychlým vyhledáním souboru.

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

export default function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    debugger; // pause when DevTools attached
    setCount((prev) => prev + 1);
  };

  return (
    <View>
      <Text>{count}</Text>
      <Button title="+" onPress={increment} />
    </View>
  );
}

Příkaz debugger; v JS kódu funguje jako programatický breakpoint. Při připojeném DevTools se vykonávání zastaví. V produkčním buildu (s nastaveným babel-plugin-transform-remove-debugger) je tato instrukce automaticky odstraněna.

Inspector komponent

Záložka React Components ukazuje hierarchii komponent, props a state v reálném čase a funguje analogicky k React DevTools ve webovém prohlížeči. Profiler zase měří dobu rerenderu jednotlivých komponent, což využijete při debugování zbytečných rerenderů, typicky v kombinaci s našimi tipy ze správy stavu se Zustand a React Compileru.

Hermes Profiler a analýza výkonu JavaScriptu

Hermes Profiler je dnes nejlepší nástroj pro identifikaci pomalých funkcí v JavaScriptu na React Native. Generuje sampling profile ve formátu kompatibilním s Chrome DevTools, který otevřete v záložce Performance. Na rozdíl od web verze profileru sbírá data přímo z Hermes VM běžící na zařízení, takže výsledky odpovídají reálnému runtime.

Profilování zapnete přes Dev Menu, položka Start Sampling Profiler. Aplikaci pak používejte normálně po dobu měření (15–30 sekund obvykle stačí), v Dev Menu zvolte Stop Sampling Profiler a soubor .cpuprofile najdete na zařízení (cesta se zobrazí v Metro konzoli). Přetažením do Chrome DevTools (záložka Performance → Load profile) získáte flame graf.

# Programatická aktivace v testovacím buildu
import { Profiler } from 'react-native';

// Začátek profilace
Profiler.start('checkout-flow');

// ... uživatelská akce ...

// Konec, výsledek se uloží do souboru
const path = await Profiler.stop();
console.log('Profile saved:', path);

Memory profiling a hunt na úniky paměti

V záložce Memory najdete Heap Snapshot, který v okamžiku pořízení zachytí všechny JS objekty držené Hermes VM. Dvě snímky pořízené před a po opakované akci (třeba otevření a zavření modalu 50×) odhalí úniky, tedy objekty, které se nesmazaly. Typický pachatel v RN 2026 jsou neodstraněné listenery z NativeEventEmitter a zapomenutá setInterval volání bez clearInterval.

LogBox, stack traces a integrace s VS Code

LogBox je vestavěná in-app obrazovka, která zachytává nezpracované chyby a varování. Od React Native 0.79 dostala výrazný redesign. Stack frames jsou klikatelné, otevírají soubor přímo ve VS Code (přes react-native-vscode:// URL handler) a propojení s Metro source maps funguje i v Hermes buildech.

// metro.config.js — zapnutí symbolu Hermes pro lepší stack traces
const { getDefaultConfig } = require('@react-native/metro-config');

const config = getDefaultConfig(__dirname);

config.transformer = {
  ...config.transformer,
  hermesParser: true,
  unstable_allowRequireContext: true,
};

config.serializer = {
  ...config.serializer,
  getRunModuleStatement: (moduleId) =>
    `__r(${JSON.stringify(moduleId)});`,
};

module.exports = config;

V kódu můžete LogBox programaticky tlumit. Třeba u známých varování z knihoven třetích stran:

import { LogBox } from 'react-native';

if (__DEV__) {
  LogBox.ignoreLogs([
    /VirtualizedLists should never be nested/,
    'Non-serializable values were found in the navigation state',
  ]);
}

Síťová inspekce bez externích nástrojů

V minulosti se na inspekci HTTP požadavků používal Flipper Network plugin nebo Reactotron. Dnes je všechno integrováno do React Native DevTools v záložce Network. Funguje pro fetch, XMLHttpRequest i pro WebSocket spojení a ukazuje hlavičky, payload, response a časování zcela analogicky k web Chrome DevTools.

Pokud používáte TanStack Query nebo Apollo, doporučuju dál nainstalovat odpovídající DevTools. React Query DevTools Native (od verze 5) běží přímo v aplikaci jako floating overlay a ukazuje cache, mutace a refetch chování bez nutnosti připojeného DevTools okna.

// Instalace React Query DevTools v RN
yarn add @tanstack/react-query-devtools-rn

// V App.tsx
import { QueryClientProvider } from '@tanstack/react-query';
import { DevToolsBubble } from '@tanstack/react-query-devtools-rn';

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      {__DEV__ && <DevToolsBubble />}
    </QueryClientProvider>
  );
}

Debugování nativního kódu (iOS a Android)

Pro JavaScript chyby DevTools stačí, ale jakmile narazíte na crash v nativní vrstvě (typicky přes TurboModules nebo Fabric komponenty), musíte sáhnout po nativních debuggerech. Tahle část je často podceňovaná, ale s novou architekturou ji budete potřebovat častěji. Tu chybu jsem zažil naposledy při integraci nativního BLE modulu a hodina v Xcode mě zachránila před dnem chození kolem.

iOS: Xcode debugger a Instruments

Spusťte projekt přes Xcode (open ios/MyApp.xcworkspace), nastavte breakpointy v .mm nebo Swift souborech a debugujte standardně přes LLDB. Pro performance analýzu otevřete Product → Profile a vyberte Time Profiler nebo Allocations v Instruments. Odhalí native side memory leaky, které Hermes Heap Snapshot nevidí. Detailní popis nástrojů najdete v oficiální Apple dokumentaci k Instruments.

Android: Android Studio a Logcat

Otevřete android/ složku v Android Studiu, nechte Gradle sync proběhnout a spusťte přes Debug 'app'. Logcat filtrujte podle tagu ReactNativeJS pro JS logy a com.yourapp pro nativní. Příkaz adb logcat *:E v terminálu zobrazí jen chyby, což je užitečné pro reprodukci náhodných crashů.

# Sledování pouze chyb a fatálních logů
adb logcat ReactNativeJS:V *:E

# Zachycení nativní stack trace při crashi
adb logcat -b crash

Kdy ještě dává smysl Reactotron

Reactotron je samostatná desktop aplikace, která komunikuje s React Native přes WebSocket. V roce 2026 zůstává relevantní zejména pro inspekci stavu. Redux, MobX, Zustand, MMKV a AsyncStorage hodnoty zobrazuje v reálném čase mnohem pohodlněji než DevTools console. Pokud váš tým intenzivně používá Redux nebo časté operace s lokální storage, instalace stojí za to.

yarn add --dev reactotron-react-native reactotron-redux

// ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import { reactotronRedux } from 'reactotron-redux';

Reactotron
  .configure({ name: 'MyApp' })
  .useReactNative()
  .use(reactotronRedux())
  .connect();

export default Reactotron;

Pro novější projekty s TanStack Query, Zustand a MMKV obvykle stačí React Native DevTools a DevToolsBubble komponenty knihoven samotných. Reactotron je dnes spíš doplněk pro specifické workflow než nutnost.

Produkční chyby: Sentry, source maps a Hermes

Vývojářské debugování je jedna věc, produkční chyby v rukou uživatelů druhá. V roce 2026 je Sentry React Native SDK de facto standard. Má nativní integraci s Hermes source maps, automaticky nahrává sourcemap soubory při EAS Buildu a obohacuje stack traces breadcrumbs (touch eventy, navigace, network volání).

// app.config.ts pro Expo / EAS Build
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://[email protected]/project-id',
  tracesSampleRate: 0.2,
  enableNativeCrashHandling: true,
  // Automaticky linkuje Hermes bytecode na původní zdroj
  enableHermesSymbolication: true,
});

Doplňkem k Sentry je React Native Performance Monitor, vestavěný overlay aktivovatelný v Dev Menu jako Show Perf Monitor. Zobrazuje JS thread FPS, UI thread FPS a paměťovou spotřebu v reálném čase. Cílová hodnota je 60 FPS na obou vláknech (případně 120 FPS na ProMotion displejích s Reanimated 4, viz náš článek o Reanimated 4 a 120 FPS animacích).

Srovnání debuggovacích nástrojů

Nástroj	React Native DevTools	Reactotron	Sentry	Flipper
Aktivní vývoj v 2026	Ano (Meta)	Ano (Infinite Red)	Ano	Ne (deprecated)
Vyžaduje instalaci	Ne (vestavěné)	Ano (desktop app)	Ano (SDK)	Ano
JS breakpointy	Ano (CDP)	Ne	Ne	Omezeně
Hermes Profiler	Plná podpora	Ne	Ne	Ne
Inspekce stavu (Redux/Zustand)	Přes plugin	Vynikající	Ne	Přes plugin
Síťová inspekce	Ano	Ano	Breadcrumbs	Ano
Produkční chyby	Ne	Ne	Vynikající	Ne
Doporučeno v 2026	Vždy	Volitelně	Vždy v prod	Ne

Doporučená sestava pro nový projekt v roce 2026: React Native DevTools pro denní vývoj, Hermes Profiler pro performance audity před releasem, Sentry pro produkční monitoring a volitelně Reactotron, pokud projekt intenzivně používá Redux. Honestly, takhle si svoje workflow stavím ve všech aktivních projektech a nestěžuju si.

Často kladené otázky

Funguje Flipper ještě s React Native 0.79?

Ne, oficiální podpora skončila ve verzi 0.76. Komunitní fork existuje, ale s aktuální architekturou Bridgeless mode a Fabric je nestabilní. Migrujte na React Native DevTools.

Jak otevřu React Native DevTools v Expo projektu?

Spusťte npx expo start, počkejte na Metro a stiskněte klávesu j. DevTools se otevřou v separátním okně. Funguje s Expo SDK 51 a novějším.

Proč mi debugger nepřipojí breakpointy?

Nejčastější příčiny: aplikace běží v Release konfiguraci (breakpointy fungují jen v Debug buildu), použili jste starý Remote JS Debugger místo React Native DevTools, nebo používáte JavaScriptCore místo Hermes a chybí source maps. Zkontrolujte __DEV__ === true a v metro.config.js mít hermesParser: true.

Jak debugovat memory leak v React Native?

Otevřete React Native DevTools, záložku Memory, pořiďte Heap Snapshot, proveďte opakovanou akci (5–10×) a pořiďte druhý snapshot. V porovnání Comparison uvidíte objekty, které přibyly. Typičtí pachatelé: neodstraněné event listenery, setInterval bez clearInterval, closure držící velký stav.

Potřebuji Hermes pro debugging?

Velmi doporučeno. Hermes je výchozí engine od 0.70 a všechny moderní debuggovací nástroje (DevTools Profiler, Memory snapshot, Sentry symbolication) na něm staví. JavaScriptCore stále funguje, ale ztratíte sampling profiler a heap snapshots.