React Native DevTools 2026: Kompletny Przewodnik po Debugowaniu po Wycofaniu Flippera

No dobra — Flipper wyleciał z domyślnego szablonu React Native (zaczynając od 0.74) i wielu z nas zostało z dość prostym, ale frustrującym pytaniem: czym teraz w ogóle debugować aplikacje mobilne? Odpowiedź to React Native DevTools, czyli nowy, oficjalny zestaw narzędzi oparty na Chrome DevTools i ściśle zintegrowany z silnikiem Hermes. W tym przewodniku pokażę krok po kroku, jak skonfigurować i używać React Native DevTools w 2026 roku, czym zastąpić ulubione wtyczki Flippera i jak skleić to wszystko z React DevTools, Reactotronem oraz Sentry, żeby uzyskać naprawdę kompletny workflow debugowania.

Szczerze? Migrowałem z Flippera dość niechętnie — stare przyzwyczajenia trzymają mocno. Ale po kilku tygodniach pracy z nowymi DevTools nie chciałbym już wracać.

Dlaczego Flipper został wycofany?

Flipper przez ponad cztery lata był de facto standardem debugowania w React Native. Zespół Meta zdecydował się jednak go wycofać — i, prawdę mówiąc, było po temu kilka bardzo konkretnych powodów:

• Wysokie koszty utrzymania — Flipper wymagał osobnej infrastruktury (Java, plugin SDK, native bridge), którą musiał wspierać zespół React Native.
• Niezgodność z Nową Architekturą — przejście na Fabric i TurboModules komplikowało integrację natywnych mostów Flippera (i to mocno).
• Powstanie Hermes Debugger Frontend — silnik Hermes ma natywne wsparcie dla Chrome DevTools Protocol (CDP), więc dodatkowa warstwa po prostu przestała być potrzebna.
• Lepsza integracja z Metro — bundler Metro może teraz uruchamiać dedykowany frontend debuggera bez żadnych zewnętrznych zależności.

Efekt? Od wersji React Native 0.73 zespół zaprezentował React Native DevTools jako nowy, oficjalny debugger, a od 0.76 jest on dostępny domyślnie i nie wymaga dosłownie żadnej dodatkowej konfiguracji.

Czym właściwie są React Native DevTools?

React Native DevTools to debugger oparty na publicznym Chrome DevTools Protocol (CDP). Działa bezpośrednio na silniku Hermes, więc nie musi tłumaczyć wywołań przez most natywny — co już samo w sobie jest dużą wygraną. Z punktu widzenia dewelopera dostajemy:

• Console — pełna konsola z autouzupełnianiem, oceną wyrażeń i grupowaniem logów.
• Sources — debugger krokowy z mapami źródeł, breakpointami warunkowymi i blackboxingiem.
• Performance / Memory — profilowanie CPU i analiza pamięci sterty Hermes.
• Network — inspekcja żądań HTTP/HTTPS, w tym fetch, XHR i WebSocket.
• React Components i React Profiler — wbudowane (bez instalacji rozszerzeń) komponenty React DevTools.

Nowy debugger uruchamia się jako osobne okno aplikacji opartej na Electronie, ale używa silnika Chromium z systemu — dzięki czemu jest lekki i nie wymaga osobnej przeglądarki Chrome.

Wymagania wstępne i kompatybilność

Żeby pobawić się React Native DevTools w 2026 roku, potrzebujesz:

• React Native 0.76+ (zalecam 0.80+) lub Expo SDK 52+.
• Hermes jako silnik JavaScript (włączony domyślnie od RN 0.70).
• Node.js 20.x lub 22.x LTS.
• Zaktualizowany Metro 0.81+ i CLI @react-native-community/cli w wersji 15+.

Jeśli używasz JavaScriptCore zamiast Hermesa — większość funkcji debuggera po prostu nie zadziała. Migracja na Hermes to obecnie zalecana ścieżka i, moim zdaniem, należy ją zrobić jak najszybciej.

Jak uruchomić React Native DevTools

Krok 1: Uruchom aplikację w trybie deweloperskim

# React Native CLI
npx react-native run-ios
# lub
npx react-native run-android

# Expo
npx expo start --dev-client

Krok 2: Otwórz menu deweloperskie

W działającej aplikacji otwórz menu deweloperskie:

• iOS Simulator: Cmd+D
• Android Emulator: Cmd+M (macOS) lub Ctrl+M (Windows/Linux)
• Fizyczne urządzenie: potrząśnij urządzeniem (tak, dosłownie) lub użyj komendy adb shell input keyevent 82

Krok 3: Wybierz "Open DevTools"

W menu pojawi się opcja "Open DevTools". Klik — i otworzy się nowe okno debuggera. Możesz też uruchomić go prosto z terminala Metro klawiszem j, co osobiście uważam za szybsze.

# W oknie Metro:
# > Press j to open debugger
# > Press r to reload app
# > Press d to open developer menu

Praca z konsolą i debuggerem

Logi i ich grupowanie

Console w React Native DevTools obsługuje pełen zestaw metod console.*, między innymi:

console.log('Standard log');
console.warn('Warning');
console.error('Error');
console.table([{ id: 1, name: 'Anna' }, { id: 2, name: 'Jan' }]);
console.group('Operacja Auth');
console.log('Token:', token);
console.log('User:', user);
console.groupEnd();
console.time('apiCall');
await fetch('/api/data');
console.timeEnd('apiCall');

Breakpointy i debugowanie krokowe

W zakładce Sources możesz ustawiać:

• Line breakpoints — klik w numer linii i gotowe.
• Conditional breakpoints — prawy przycisk myszy → "Add conditional breakpoint", np. user.id === 42.
• Logpoints — wstawia console.log bez modyfikacji kodu (uwielbiam, bo nie trzeba potem czyścić).
• XHR/Fetch breakpoints — pauza przy każdym żądaniu pasującym do wzorca.

Słowo kluczowe debugger; w kodzie też zatrzyma wykonanie, jeśli debugger jest podłączony — klasyk, który ciągle działa.

Inspekcja zmiennych i scope

Po zatrzymaniu wykonania panel Scope pokazuje wszystkie zmienne lokalne, closure i globalne. W konsoli możesz przy tym wykonywać dowolne wyrażenia w aktualnym kontekście — to potężna rzecz, której Flipper nigdy nie oferował tak wygodnie.

Profilowanie wydajności

Performance Profiler

Zakładka Performance pozwala nagrywać sesje wykonania kodu JavaScript. Aby zrobić profil:

1. Otwórz zakładkę Performance.
2. Kliknij Record (kółko).
3. Wykonaj scenariusz w aplikacji (np. nawigacja po liście, otwarcie ekranu).
4. Kliknij Stop.

Otrzymasz timeline z flame graphem, na którym zobaczysz:

• Funkcje JS, które zajmują najwięcej czasu CPU.
• Cykle garbage collectora Hermes.
• Główne zdarzenia (mounty komponentów, re-rendery).

React Profiler

Zakładka Profiler to dokładnie ten sam React Profiler, który znasz z React DevTools w przeglądarce. Pozwala mierzyć czas renderowania komponentów, identyfikować zbędne re-rendery i analizować klasyczne "Why did this render?".

// Aby React Profiler dzialal, NIE uzywaj produkcyjnej wersji bibliotek
// W development mode wszystko dziala od razu.
if (__DEV__) {
  console.log('React Profiler dostepny');
}

Memory Profiler

Snapshoty sterty Hermes pomagają znaleźć wycieki pamięci. Typowy workflow wygląda tak:

1. Zrób pierwszy snapshot ("Take heap snapshot").
2. Wykonaj akcję, którą podejrzewasz o wyciek (np. otwórz i zamknij modal jakieś 10 razy).
3. Zrób drugi snapshot.
4. Porównaj je w trybie Comparison — szukaj rosnących obiektów typu Detached HTMLDivElement lub Closure.

Inspekcja sieci (Network)

Jednym z najbardziej oczekiwanych zastępstw Fliperowego pluginu Network jest wbudowana zakładka Network. W React Native DevTools 2026 obsługuje ona:

• Wszystkie żądania fetch i XMLHttpRequest.
• WebSocket (z preview ramek).
• Filtrowanie po typie, statusie i domenie.
• Podgląd nagłówków, payloadu, odpowiedzi (JSON pretty-print) oraz timing breakdown.
• Eksport HAR — bezcenny przy zgłaszaniu bugów backendowych.

Przykład — sprawdzanie żądania:

const response = await fetch('https://api.example.com/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Anna' }),
});
const data = await response.json();
// W zakladce Network zobaczysz kompletny request/response

Ograniczenia inspekcji sieci

Tu jest pewien haczyk. Żądania wykonywane natywnie (np. przez biblioteki obrazów takie jak FastImage albo natywne SDK Firebase) nie są widoczne w Network — bo po prostu nie przechodzą przez warstwę JS. W takich przypadkach:

• Na Androidzie używaj Charles Proxy lub Proxyman.
• Na iOS możesz sięgnąć po NSURLSession swizzling w trybie debug.

React Components: inspector w stylu Elements

Zakładka Components (znana z React DevTools w przeglądarce) jest w pełni zintegrowana. Możesz:

• Przeglądać drzewo komponentów React Native.
• Edytować propsy i stan na żywo.
• Klikać "Inspect" i wybierać element bezpośrednio w aplikacji (analogicznie do DOM inspectora w przeglądarce).
• Skoczyć do źródła komponentu (Source button) — otworzy się on w VS Code, jeśli skonfigurujesz REACT_EDITOR=code.

Element Inspector w aplikacji

Niezależnie od DevTools, React Native ma wbudowany Element Inspector. Aktywujesz go z menu deweloperskiego ("Show Element Inspector"). Tap na element pokaże:

• Hierarchię komponentów.
• Wymiary (margin, padding, width/height).
• Wynikowe style flexboxa.
• Czas ostatniego renderu (Perf Mode).

A co z Reactotronem i Sentry?

Reactotron

Reactotron pozostaje świetnym uzupełnieniem React Native DevTools — szczególnie do:

• Inspekcji Reduxa i Zustanda (action history, time-travel).
• Storage Inspector (AsyncStorage, MMKV, SecureStore).
• Custom commands (np. wstrzykiwanie state z hosta — bardzo wygodne przy testach scenariuszy).

Instalacja w 2026 roku:

npm install --save-dev reactotron-react-native reactotron-redux

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

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

export default reactotron;

Sentry i monitoring produkcyjny

React Native DevTools są narzędziem developerskim — i koniec. Nie pomogą, gdy aplikacja crashuje u realnego użytkownika końcowego. Do production-monitoringu używaj Sentry React Native, Bugsnag lub Datadog RUM. Konfiguracja Sentry w 2026:

npx @sentry/wizard@latest -i reactNative

// W kodzie:
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: '___PUBLIC_DSN___',
  tracesSampleRate: 1.0,
  enableNative: true,
  enableNativeCrashHandling: true,
});

export default Sentry.wrap(App);

Debugowanie aplikacji Expo

W projektach Expo workflow jest praktycznie identyczny — od SDK 52 React Native DevTools są dołączone domyślnie. Wyjątki, o których warto wiedzieć:

• W Expo Go debugger działa, ale niektóre natywne moduły nie są dostępne.
• W Development Build (zalecanym dla każdego poważniejszego projektu) masz pełen dostęp do Hermes debuggera.
• Komenda npx expo start --dev-client uruchamia Metro z włączonym debuggerem.

Najczęstsze problemy i ich rozwiązania

"Connection lost" przy każdym reloadzie

W RN 0.74-0.75 zdarzało się rozłączanie po Fast Refresh. Rozwiązanie? Aktualizacja do RN 0.76+ — zespół naprawił reconnect logic w Metro 0.81. Sam się na to nadziałem i mogę potwierdzić: problem znika niemal całkowicie.

Breakpointy nie działają na produkcji

To zachowanie zamierzone (ale często mylące). Sprawdź:

# Czy buildujesz z bundlem development?
npx react-native run-ios --mode Debug
# Nie z --mode Release

DevTools po prostu się nie otwierają

Najczęstsze przyczyny:

• Brak Node.js w PATH — sprawdź node -v.
• Stare CLI — npm i -g @react-native-community/cli@latest.
• Konflikt portów (Metro używa 8081). Zatrzymaj inne procesy: lsof -i :8081.

Brak Source Maps

Jeśli widzisz zminimalizowany kod, włącz source maps w metro.config.js:

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  serializer: {
    getModulesRunBeforeMainModule: () => [],
  },
};

React Native DevTools vs Flipper: porównanie

Funkcja	Flipper	React Native DevTools
Debugger JS	Tak (przez Hermes)	Tak (natywnie przez CDP)
Network Inspector	Plugin	Wbudowany
React DevTools	Plugin	Wbudowany
Performance Profiler	Ograniczony	Pełny CPU/Memory profiler
AsyncStorage Inspector	Plugin	Brak (użyj Reactotron)
Crash Reporter	Plugin	Brak (użyj Sentry)
Wsparcie Nowej Architektury	Ograniczone	Pełne (Fabric/TurboModules)
Wymagana instalacja	Tak (osobna aplikacja + SDK)	Brak (uruchamiane z Metro)

Best practices debugowania w 2026

• Używaj __DEV__, by oddzielić logikę debug od produkcji — minimalizuj overhead w buildach release.
• Włącz inlineRequires w Metro — szybszy startup w dev mode (różnica naprawdę odczuwalna).
• Korzystaj z source maps — bez nich stack trace jest dosłownie bezużyteczny.
• Łącz narzędzia — DevTools do JS/UI, Reactotron do state, Sentry do produkcji, Charles do natywnej sieci.
• Profiluj na fizycznym urządzeniu — symulator nie odzwierciedla realnej wydajności (i nigdy nie będzie).
• Włączaj Performance Mode w menu dev przy testowaniu wydajności list.

FAQ — najczęściej zadawane pytania

Czy mogę nadal używać Flippera w React Native 0.80?

Technicznie — tak. Flipper nie został usunięty całkowicie, jedynie wyrzucony z domyślnej konfiguracji. Można go ręcznie zainstalować przez react-native-flipper, ale projekt nie jest już aktywnie rozwijany. W 2026 roku to ścieżka, którą gorąco odradzam — większość pluginów nie wspiera Nowej Architektury, a społeczność prawie w całości migruje na React Native DevTools.

Czy React Native DevTools działają z JavaScriptCore?

Nie. Debugger wymaga silnika Hermes, który implementuje Chrome DevTools Protocol. Jeśli Twój projekt nadal używa JSC, jedyną opcją jest tradycyjny "Remote JS Debugging" w Chrome (który też jest deprecated od RN 0.76). Migracja na Hermes to obecnie po prostu obowiązkowy krok, jeśli chcesz nowoczesnego debugowania.

Jak debugować WebSocket w React Native DevTools?

Otwórz zakładkę Network i ustaw filtr "WS". Każda nowa instancja new WebSocket(url) pojawi się jako wpis. Klik na nim otworzy panel z ramkami — możesz sprawdzić wysyłane i odbierane wiadomości, a także timing. Dla protokołów binarnych (np. Protocol Buffers) zobaczysz reprezentację hex; tekstowe protokoły są pretty-printowane.

Czy mogę debugować aplikację produkcyjną?

Nie. React Native DevTools wymagają build w trybie development. Do diagnostyki problemów produkcyjnych użyj Sentry (crash reports + breadcrumbs) albo Datadog RUM (sesje użytkowników z replay). Jeśli musisz uzyskać logi z buildu release, włącz EnableNetworkInspector w Sentry SDK lub użyj custom loggera z buforowaniem do pliku.

Co z inspekcją AsyncStorage i MMKV po wycofaniu Flippera?

React Native DevTools nie mają wbudowanego inspektora storage — i to chyba moja jedyna prawdziwa pretensja do nowych narzędzi. Najlepsze opcje to:

• Reactotron z odpowiednimi pluginami (reactotron-react-native-mmkv).
• Własne komendy debug w aplikacji — wyświetlenie zawartości w konsoli (console.log).
• Dla MMKV: storage.getAllKeys() + iteracja w useEffect w dev mode.

Podsumowanie

Wycofanie Flippera to nie krok wstecz — to konsolidacja narzędzi. React Native DevTools w 2026 roku oferują kompletny zestaw funkcji debugowania bezpośrednio w Metro, bez instalacji dodatkowych aplikacji, bez bólu z kompatybilnością Nowej Architektury i z natywnym wsparciem Hermes. Połączenie React Native DevTools z Reactotronem (state) oraz Sentry (produkcja) tworzy nowoczesny, kompletny workflow debugowania mobilnego, który zastępuje wszystko, co oferowała epoka Flippera — i, szczerze mówiąc, robi to po prostu lepiej.