React Native debugiranje vodič (2026)

Zašto je debugiranje u React Nativeu poseban izazov

Ako ste ikada debugirali React Native aplikaciju, znate da to nije isto kao otvoriti Chrome DevTools i pogledati što se događa. Imate JavaScript sloj na Hermes engineu, nativni sloj na iOS-u i Androidu, bridge ili JSI komunikaciju između ta dva svijeta, i na kraju — korisničko sučelje koje se renderira nativnim komponentama. Kad nešto pođe po krivu, problem može biti doslovno bilo gdje u tom lancu.

Iskreno, to zna biti prilično frustrirajuće.

Do nedavno, većina developera koristila je Flipper kao centralni alat za debugiranje. Ali Flipper je imao ozbiljne probleme — njegove tranzitivne ovisnosti povremeno su sprječavale pokretanje aplikacija, povećavao je vrijeme builda i na iOS-u i na Androidu, a kritični bugovi često su ostajali neriješeni mjesecima. Na kraju je React Native tim donio odluku koja je, po mom mišljenju, trebala doći i ranije: Flipper više nije preporučeni alat.

U 2026., ekosustav za debugiranje izgleda potpuno drugačije. Imamo React Native DevTools kao službeni zamjenski debugger, Reactotron za inspekciju stanja i API poziva, Hermes profiler za analizu performansi, i naravno — nativne alate poput Xcode Instruments i Android Studio Profilera. Hajde da prođemo kroz sve te alate s praktičnim primjerima koje možete odmah primijeniti.

React Native DevTools: novi standardni debugger

React Native DevTools predstavljen je na React Universe Conf 2024. i od verzije React Native 0.76 postao je službeni, preporučeni debugger. Koristi isti frontend kao Chrome DevTools, pa će vam sučelje biti poznato ako ste ikada debugirali web aplikacije. Podržava sve React Native aplikacije na Hermes engineu.

S React Native 0.83 (trenutna stabilna verzija), DevTools je dobio značajna poboljšanja: Network panel dostupan za sve aplikacije, Performance tracing, i novu desktop aplikaciju koja ne zahtijeva Chrome preglednik. To zadnje je osobito zgodno — više ne trebate držati Chrome otvoren samo zbog debuggera.

Kako pokrenuti DevTools

Dva su načina:

Iz aplikacije — otvorite Dev Menu (protresite uređaj ili pritisnite Cmd+D na iOS-u, Cmd+M na Androidu) i odaberite "Open DevTools"
Iz terminala — pritisnite tipku "j" u terminalu gdje je pokrenut development server

DevTools se otvara u zasebnom prozoru i automatski se povezuje s aplikacijom. Nema nikakve dodatne konfiguracije — samo radi.

Console panel — više od console.log

Console panel je puno moćniji nego što većina developera misli. Da, tu su ispisi console.log() poziva, ali prava snaga je u interaktivnom terminalu. Konzola je direktno povezana s aplikacijom — možete pisati JavaScript koji se izvršava u globalnom scopeu:

// Dohvatite trenutno stanje Zustand storea direktno iz konzole
const authState = require('./stores/useAuthStore').useAuthStore.getState();
console.log(authState.user);

// Testirajte API poziv bez rebuilda
fetch('https://api.example.com/products')
  .then(res => res.json())
  .then(data => console.log(data));

Kad ste na breakpointu, konzola se prebacuje u scope tog breakpointa — pristupate lokalnim varijablama, pozivate funkcije i ispitujete stanje točno u tom trenutku izvršavanja. Jedna bitna stvar: Hermes ima ograničenja s const/let deklaracijama i top-level await u konzoli, pa koristite var za varijable definirane direktno u konzoli.

Breakpointi i Sources panel

Sources panel omogućuje postavljanje breakpointova na specifične linije koda. Kliknete na broj linije u source fileu ili dodate debugger; naredbu u kod. Kad izvršavanje dođe do breakpointa, aplikacija se potpuno pauzira:

// Dodajte debugger naredbu za brzo pauziranje
async function fetchUserProfile(userId: string) {
  try {
    const response = await api.get(`/users/${userId}`);
    debugger; // Aplikacija se pauzira ovdje — inspektirajte response
    return response.data;
  } catch (error) {
    debugger; // Ili ovdje — inspektirajte error objekt
    throw error;
  }
}

Na desnoj strani imate panel s trenutnim scopeom, call stackom i watch expressionima. Koristite Cmd+P (ili Ctrl+P) za brzo otvaranje bilo kojeg source filea po imenu — ovo je jedan od onih trikova koji ušteide puno vremena kad ga jednom naučite.

DevTools podržava i Conditional Breakpoints. Desnim klikom na broj linije definirate uvjet pod kojim se breakpoint aktivira, na primjer userId === 'abc123' pauzira samo za specifičnog korisnika. Tu su i Logpointi koji logiraju poruku bez pauziranja — korisni kad želite pratiti tok izvršavanja bez zaustavljanja aplikacije.

Network panel — inspekcija mrežnih zahtjeva

Network panel bilježi sve mrežne zahtjeve dok je DevTools otvoren. Za svaki zahtjev vidite:

HTTP metodu i URL
Status kod i veličinu odgovora
Precizna vremena (DNS, connection, TTFB, download)
Zaglavlja zahtjeva i odgovora
Preview tijela odgovora (JSON, tekst, slike)

Od verzije 0.83, Network panel prikazuje i Initiator tab — pokazuje točno koja linija vašeg JavaScript koda je pokrenula mrežni zahtjev. Ovo je nevjerojatno korisno kad imate duplicirane API pozive i ne znate odakle dolaze (a to se događa češće nego što biste pomislili).

Panel trenutno podržava zahtjeve kroz fetch(), XMLHttpRequest i <Image> komponentu. Podrška za custom networking biblioteke poput Expo Fetch planirana je za buduće verzije.

Memory panel — detekcija memory leakova

Memory panel omogućuje snimanje heap snapshotova i praćenje alokacije memorije. Ako vaša aplikacija troši sve više memorije što duže radi — imate memory leak i ovaj panel će vam pomoći da ga pronađete.

// Tipičan memory leak u React Nativeu — zaboravljen cleanup
useEffect(() => {
  const interval = setInterval(() => {
    fetchNotifications(); // Nastavlja raditi i nakon unmount-a!
  }, 30000);

  // BEZ OVOGA imate memory leak:
  return () => clearInterval(interval);
}, []);

// Još češći leak — nekontrolirani event listeneri
useEffect(() => {
  const subscription = AppState.addEventListener('change', handleAppState);

  return () => subscription.remove(); // Obavezno!
}, []);

Praktični pristup koji preporučujem: napravite heap snapshot, navigirajte na problematičan ekran i nazad, pa napravite drugi snapshot. Usporedite ih — objekti koji ostaju u memoriji nakon navigacije unatrag su potencijalni leakovi. Zvuči jednostavno, ali ovaj pristup mi je pomogao pronaći memory leakove koji su uzrokovali padove aplikacije nakon 20-30 minuta korištenja.

Performance tracing — novo u React Native 0.83

Najnoviji dodatak DevToolsu je Performance tracing. Možete snimiti sesiju koja analizira JavaScript izvršavanje, React performance podatke, mrežne događaje i custom User Timinge — sve u jednoj objedinjenoj vremenskoj traci.

Posebno je korisno za identificiranje:

Sporih rendera komponenata
Blokirajućih operacija na JS threadu
Dugih mrežnih zahtjeva koji utječu na interaktivnost
Nepotrebnih re-rendera uzrokovanih lošim upravljanjem stanjem

Reactotron: inspekcija stanja i API poziva u realnom vremenu

React Native DevTools je odličan za klasično debugiranje s breakpointima, ali za svakodnevno praćenje stanja aplikacije, API poziva i MMKV podataka — Reactotron je teško zamijeniti. To je besplatna desktop aplikacija od Infinite Red tima koja se povezuje s aplikacijom i daje pregled svega što se događa.

Osobno, Reactotron mi je uvijek otvoren dok radim na React Native projektu. Nije nužan za svaki bug, ali kad ga trebate — jako ste sretni što ste ga postavili unaprijed.

Instalacija i konfiguracija

# Instalacija potrebnih paketa
npm install --save-dev reactotron-react-native reactotron-react-native-mmkv

# Za Zustand integraciju (community plugin)
npm install --save-dev reactotron-plugin-zustand

Kreirajte konfiguracijsku datoteku:

// devtools/ReactotronConfig.ts
import Reactotron from 'reactotron-react-native';
import mmkvPlugin from 'reactotron-react-native-mmkv';
import { storage } from '../utils/storage'; // vaša MMKV instanca

const reactotron = Reactotron
  .configure({
    name: 'MojaAplikacija',
    // Za fizički uređaj, specificirajte IP adresu računala
    // host: '192.168.1.100',
  })
  .useReactNative({
    asyncStorage: false, // koristimo MMKV umjesto AsyncStorage
    networking: {
      ignoreUrls: /symbolicate|logs/, // ignoriraj dev server zahtjeve
    },
    errors: { veto: () => false },
    editor: true,
    overlay: true,
  })
  .use(mmkvPlugin({
    storage,
    ignore: ['persist:root', '@REACTOTRON/clientId'],
  }))
  .connect();

export default reactotron;

Uvezite konfiguraciju na vrh index.js ili App.tsx:

// index.js ili App.tsx — mora biti na vrhu datoteke
if (__DEV__) {
  require('./devtools/ReactotronConfig');
}

Integracija sa Zustandom

Zustand je u ovom trenutku praktički standard za klijentsko stanje u React Native aplikacijama. Integracija s Reactotronom čini debugiranje stanja puno ugodnijim:

// devtools/ReactotronConfig.ts — dodajte Zustand plugin
import reactotronZustand from 'reactotron-plugin-zustand';
import { useAuthStore } from '../stores/useAuthStore';
import { useSettingsStore } from '../stores/useSettingsStore';

const reactotron = Reactotron
  .configure({ name: 'MojaAplikacija' })
  .useReactNative()
  .use(reactotronZustand({
    stores: [
      { name: 'auth', zustand: useAuthStore },
      { name: 'settings', zustand: useSettingsStore },
    ],
  }))
  .connect();

S ovom integracijom, Reactotron prikazuje sve promjene stanja u realnom vremenu. Vidite točno kad se korisnik prijavio, kad su se postavke promijenile, i možete čak ručno modificirati stanje iz Reactotron sučelja za testiranje edge case scenarija. To zadnje je fantastično za reprodukciju bugova koje korisnici prijave, a vi ne možete rekreirati normalnim korištenjem aplikacije.

MMKV inspekcija

Reactotron MMKV plugin automatski logira sve operacije pisanja u MMKV storage. Kad aplikacija spremi token, korisničke preferencije ili keširane podatke — sve se vidi u Reactotronu. Možete filtrirati ključeve koristeći ignore opciju za isključivanje osjetljivih podataka.

Custom logovi umjesto console.log

Umjesto rasutih console.log poziva po cijelom kodu (koji onda uvijek zaboravite obrisati prije commita), Reactotron nudi strukturirano logiranje:

import Reactotron from 'reactotron-react-native';

// Umjesto: console.log('User data:', userData)
Reactotron.display({
  name: 'USER_FETCH',
  value: userData,
  preview: `Korisnik: ${userData.name}`,
  important: true,
});

// Mjerenje performansi
const benchmark = Reactotron.benchmark('Učitavanje početnog ekrana');
await loadInitialData();
benchmark.stop(); // Prikazuje točno trajanje u Reactotronu

Hermes profiler: CPU profiliranje u praksi

Hermes engine, koji pokreće JavaScript u React Native aplikacijama, ima ugrađeni profiler za analizu CPU performansi. Ono po čemu se razlikuje od DevTools performance tracinga je da Hermes profiler radi i u release (produkcijskim) buildovima — a to je kritično jer se performanse u debug i release modu značajno razlikuju.

Ručno profiliranje kroz Dev Menu

Za brzo profiliranje u development modu:

Otvorite Dev Menu (protresite uređaj ili Cmd+D/Cmd+M)
Odaberite "Enable Sampling Profiler"
Koristite aplikaciju 10-30 sekundi, reproducirajući tok koji želite analizirati
Vratite se u Dev Menu i odaberite "Disable Sampling Profiler"
Profiler generira .cpuprofile datoteku koju možete preuzeti

Programatsko profiliranje za produkciju

Za profiliranje u produkcijskim buildovima koristite react-native-release-profiler od Margelo tima:

npm install react-native-release-profiler

import { startProfiling, stopProfiling } from 'react-native-release-profiler';

// Započnite profiliranje kritičnog dijela aplikacije
startProfiling();

// ... korisnik koristi aplikaciju ...

// Zaustavite i dohvatite rezultate
const profile = await stopProfiling();
// Pošaljite profil na server za analizu
await uploadProfile(profile);

Zašto je ovo toliko bitno? U debug buildovima postoje dodatni overheadi — garbage collection markeri, LLDB hookovi i ostale debug operacije — koji mogu stvoriti lažne pozitive. Tek profiliranje u release buildu daje realnu sliku performansi kakve korisnici stvarno doživljavaju.

Analiza profila u Chrome DevTools

Generirane profile možete konvertirati u format koji Chrome DevTools razumije:

# Konverzija Hermes profila u Chrome Tracing format
npx react-native profile-hermes android/app/build/loading.cpuprofile

Otvorite chrome://tracing u Chromeu, učitajte konvertiranu datoteku, i dobivate vizualnu vremensku traku s flame chartom. Tražite funkcije koje zauzimaju više od 10% ukupnog vremena — to su kandidati za optimizaciju.

Nativni alati za debugiranje

React Native DevTools pokriva JavaScript sloj, ali ponekad je problem u nativnom kodu. Za takve situacije su vam potrebni platformski alati.

Xcode Instruments za iOS

Xcode Instruments je nezamjenjiv za iOS-specifične probleme:

Allocations instrument — praćenje memorijskih alokacija po objektu
Leaks instrument — automatska detekcija memorijskih leakova u nativnom kodu
Time Profiler — CPU profiliranje s call treeom
Core Animation instrument — mjerenje GPU rendera i off-screen renderinga

Za pokretanje: otvorite projekt u Xcodeu, odaberite Product → Profile, izaberite instrument i pokrenite snimanje. Malo je sporije od DevToolsa, ali za nativne probleme nema alternative.

Android Studio Profiler

Na Android strani, Android Studio Profiler pruža:

CPU Profiler — analiza Java/Kotlin izvršavanja na nativnom threadu
Memory Profiler — heap dump s mogućnošću praćenja alokacija po klasi
Network Profiler — detaljna analiza mrežnog prometa na razini socketa
Energy Profiler — potrošnja baterije po komponenti (CPU, network, GPS)

Za povezivanje: pokrenite aplikaciju u debug modu, otvorite Android Studio, i u donjem dijelu kliknite na Profiler tab.

Praktični obrasci debugiranja

Debugiranje sporog rendera

Ako primjećujete da se ekran renderira sporo ili animacije zastajkuju, koristite React DevTools Profiler (dostupan unutar React Native DevToolsa, tab "Profiler"):

// 1. Identificirajte nepotrebne rerendere wrappanjem komponente
const ProductCard = React.memo(({ product, onPress }) => {
  // Dodajte console.log da vidite koliko često se renderira
  if (__DEV__) {
    console.log(`ProductCard render: ${product.id}`);
  }

  return (
     onPress(product.id)}>
      {product.name}
      {product.price} EUR
    
  );
});

// 2. Stabilizirajte callback referencu
const ProductList = () => {
  const handlePress = useCallback((id: string) => {
    navigation.navigate('ProductDetail', { id });
  }, [navigation]);

  return (
     (
        
      )}
      estimatedItemSize={80}
    />
  );
};

Debugiranje mrežnih problema

Mrežni problemi na fizičkim uređajima znaju biti izvor pravih frustracija. Evo kontrolne liste koja mi je višestruko pomogla:

Provjerite da su uređaj i računalo na istoj Wi-Fi mreži
Na Androidu dodajte android:usesCleartextTraffic="true" u AndroidManifest.xml za HTTP zahtjeve
Za iOS, provjerite App Transport Security postavke u Info.plist
Koristite Network panel u DevToolsu za inspekciju headera i tijela zahtjeva
Za timeout probleme, provjerite DNS rezoluciju i proxy postavke

Strategija za efikasno debugiranje

Na temelju iskustva s većim React Native projektima, evo redoslijed koji se pokazao najefikasnijim:

React Native DevTools — primarni alat za breakpointe, mrežu, konzolu i memory analizu
Reactotron — kontinuirano praćenje stanja (Zustand/Redux), MMKV-a i API poziva
Hermes Profiler — za CPU profiliranje kad primijetite spore operacije
Xcode / Android Studio — samo kad sumnjate na problem u nativnom kodu
LogBox — za brzo uočavanje upozorenja i deprecation obavijesti

I još jedan savjet: standardizirajte alate unutar tima. Nema ničeg goreg nego kad jedan developer koristi Reactotron, drugi ima console.log svugdje, a treći debugira na potpuno drugačiji način. Konzistentnost ubrzava cijeli tim.

Česta pitanja (FAQ)

Može li se React Native DevTools koristiti bez Hermes enginea?

Ne. React Native DevTools podržava isključivo aplikacije na Hermes engineu. Budući da je Hermes zadani engine od React Native 0.70, većina modernih aplikacija ga već koristi. Ako iz nekog razloga koristite JSC (JavaScriptCore), morat ćete se osloniti na starije alate poput React Native Debuggera ili Safari DevToolsa za iOS.

Zašto je Flipper uklonjen i trebam li ga još koristiti?

Flipper je uklonjen iz zadanog React Native templatea jer je uzrokovao probleme s buildanjem (posebno na iOS-u), povećavao vrijeme kompilacije, i imao neriješene bugove. Od verzije 0.76, preporučeni zamjenski alat je React Native DevTools. Flipper tehnički još radi ako ga ručno instalirate, ali aktivno se ne održava za React Native kontekst — nema smisla koristiti ga na novim projektima.

Kako debugirati aplikaciju na fizičkom uređaju?

Povežite uređaj USB-om, pokrenite development server, i aplikacija bi se trebala automatski povezati. Za Wi-Fi debugiranje, uređaj i računalo moraju biti na istoj mreži. U Reactotronu specificirajte IP adresu računala u configure({ host: '192.168.x.x' }). Za DevTools, pritisnite "j" u terminalu ili otvorite Dev Menu na uređaju.

Rade li alati za debugiranje u produkcijskim buildovima?

Kratki odgovor: ne. Dev Menu, LogBox, React Native DevTools i Reactotron su isključivo za development buildove. Jedini alat koji radi u produkciji je react-native-release-profiler za Hermes CPU profiliranje. Za praćenje grešaka u produkciji koristite servise poput Sentry, Firebase Crashlytics ili Bugsnag.

Kako optimizirati debugging workflow u timu?

Standardizirajte alate: React Native DevTools za svakodnevno debugiranje, Reactotron za praćenje stanja, Hermes profiler za performance probleme. Dodajte Reactotron konfiguraciju u repozitorij (s __DEV__ guardom) tako da svi članovi tima imaju isti setup. Definirajte konvencije — na primjer, koristite Reactotron display() umjesto console.log() za strukturiranije logove.