Debugging in React Native nel 2026: React Native DevTools, Hermes Inspector e Reactotron

Aggiornato: 18 giugno 2026

Nel 2026 il debugging di un'app React Native si fa principalmente con React Native DevTools, lo strumento ufficiale integrato a partire dalla versione 0.76 e basato sul protocollo Chrome DevTools. Affianca l'Hermes Inspector per i breakpoint sul motore JS, Reactotron per ispezionare stato e network in tempo reale, e Sentry per il monitoraggio in produzione. Flipper, invece, non fa più parte del template ufficiale: è stato deprecato nella 0.73 e poi rimosso del tutto nelle release successive.

• React Native DevTools è il debugger ufficiale dalla 0.76: si apre con j dal Metro CLI e include Console, Sources, Network e Performance.
• Flipper è stato deprecato nella React Native 0.73 (gennaio 2024) e non è più nel template; chi lo usa ancora deve migrare a DevTools o Hermes Inspector.
• Hermes è il motore JS predefinito; espone un Inspector nativo via CDP che permette breakpoint, watch e step-through senza emulare JS sul browser.
• Reactotron resta utile per ispezionare Redux/Zustand/MMKV, registrare le chiamate API e fare time-travel debugging sullo stato applicativo.
• I source map devono essere caricati su Sentry o Bugsnag per ottenere stack trace leggibili nei crash di produzione.
• Per i problemi nativi servono ancora Xcode Instruments e Android Studio Profiler: nessuno strumento JS può ispezionare codice Objective-C, Swift o Kotlin.

Cosa è cambiato nel debugging React Native nel 2026

Il panorama del debugging React Native è cambiato parecchio fra il 2023 e il 2026. Tre eventi hanno riscritto il workflow standard: la deprecazione di Flipper nella 0.73, l'introduzione di React Native DevTools come default nella 0.76 di ottobre 2024, e l'adozione di Hermes come motore JS predefinito (oggi obbligatorio se vuoi sfruttare la nuova architettura React Native con JSI, TurboModules e Fabric).

Il risultato è un toolkit più stretto ma più affidabile. Invece di un debugger remoto che eseguiva il JS in Chrome (un modello che introduceva differenze di comportamento fra debug e produzione), si lavora direttamente sul motore Hermes che gira sul dispositivo, attraverso il protocollo Chrome DevTools (CDP). Questo significa breakpoint accurati, stack trace senza traduzioni, e niente più bug che spariscono in debug mode.

Onestamente, per chi torna al framework dopo due anni il primo impatto è capire che molte guide YouTube e StackOverflow del 2022–2023 sono ormai obsolete. Tutto quello che parla di react-devtools-core, react-native-debugger standalone, o dell'integrazione Flipper in android/app/build.gradle è da ignorare. Il nuovo punto di ingresso è un solo tasto premuto dal terminale Metro.

Come usare React Native DevTools

React Native DevTools è il debugger di riferimento dal 2026. È built-in: non serve installare nulla, non serve un'estensione del browser, e funziona sia su Android che su iOS, sia su emulatori che su dispositivi fisici. Ci si accede direttamente dal CLI di Metro.

Per aprirlo, lancia l'app in development build (npx expo run:android, npx expo run:ios, oppure npx react-native start) e poi premi j nel terminale Metro. Si apre una finestra basata su Chromium con i pannelli familiari di Chrome DevTools, ma collegata al motore Hermes che gira sul dispositivo. La documentazione ufficiale di React Native DevTools elenca le scorciatoie disponibili e le versioni minime richieste.

# Avvio dev server e apertura DevTools
npx expo start
# Premi 'j' per aprire React Native DevTools
# Premi 'r' per ricaricare l'app
# Premi 'm' per aprire il menu dev sul dispositivo

I pannelli più utili sono:

• Console: i console.log appaiono qui, con stack trace navigabili. Supporta filtraggio per livello (log, warn, error) e ricerca testuale.
• Sources: permette di mettere breakpoint nel codice TypeScript/JSX. I source map sono generati automaticamente da Metro, quindi vedi i file originali, non il bundle.
• Network: registra fetch, XHR e WebSocket. Mostra headers, payload, timing, e permette di filtrare per dominio.
• Performance: profiler dello stack JS con fiamma temporale. Identifica le funzioni che bloccano il thread JS.
• Components e Profiler: i pannelli React DevTools integrati, per ispezionare l'albero dei componenti e misurare i re-render.

Una funzione spesso ignorata è Pause on caught exceptions: nelle impostazioni di Sources, attivala per fermarti su ogni errore try/catch, anche quelli silenziati. L'ho usata nell'ultimo progetto per trovare una promessa rifiutata nascosta dentro un middleware Redux, e in due minuti ha rivelato un bug che avevo inseguito per due giorni.

Flipper è ancora supportato in React Native?

No. Flipper è stato rimosso dal template React Native a partire dalla 0.74 ed era già stato deprecato ufficialmente nella release 0.73 di dicembre 2023. Il team ha citato due ragioni: l'alto costo di manutenzione di un'app desktop Electron e la difficoltà di tenere allineati i plugin con le nuove versioni del runtime.

Chi parte da zero nel 2026 non deve preoccuparsi: il template di npx create-expo-app o npx @react-native-community/cli init non include più Flipper. Chi mantiene un progetto avviato prima della 0.73 può ancora installarlo manualmente come dipendenza opzionale, ma non riceve più aggiornamenti per la nuova architettura, e i plugin più popolari (Layout Inspector, Hermes Debugger plugin) sono di fatto fermi.

La strada raccomandata è migrare tutti i casi d'uso a React Native DevTools, Reactotron o estensioni specifiche:

• Layout Inspector → React Native DevTools (pannello Elements + Components).
• Hermes Debugger → DevTools Sources panel via CDP.
• Network plugin → DevTools Network panel.
• Redux DevTools plugin → Reactotron o estensione browser su React Native Web.
• Crash Reporter → Sentry o Bugsnag direttamente in produzione.

Debugging con Hermes Inspector

Hermes è il motore JavaScript predefinito di React Native dal 2022 e nel 2026 è di fatto obbligatorio: la nuova architettura presuppone il suo runtime. Il suo Inspector espone il protocollo Chrome DevTools (CDP) tramite WebSocket, ed è ciò che React Native DevTools usa sotto il cofano per breakpoint e stepping.

Per un uso avanzato si può collegare Hermes direttamente al browser Chrome senza passare per DevTools. Il workflow è questo:

1. Avvia Metro con npx react-native start.
2. Apri chrome://inspect in Chrome.
3. Verifica che la sezione Remote Target elenchi il tuo dispositivo (es. Hermes React Native).
4. Clicca inspect: si apre una finestra DevTools standard collegata al runtime Hermes sul dispositivo.

// Esempio: misurare il tempo di parse di un blocco di codice
console.time('parse-articoli');
const articoli = JSON.parse(payload);
console.timeEnd('parse-articoli');
// Output: parse-articoli: 38.21 ms

// Stack trace di un errore catturato
try {
  await api.fetchUser();
} catch (e) {
  console.error('Fetch user fallito', e);
}

Hermes ha anche un sampling profiler integrato. Per attivarlo aggiungi hermesProfiler al metro.config.js, poi triggera console.profile('label') nel codice. Il profile generato è un file .cpuprofile che si apre direttamente nella tab Performance di DevTools.

Reactotron nel 2026: quando ha ancora senso

Con DevTools che copre console, network e profiler, Reactotron potrebbe sembrare superfluo. In realtà conserva un suo spazio per tre motivi: ispezione di store di stato (Redux, Zustand, MobX), persistenza di sessione (puoi tenere aperto Reactotron mentre ricarichi l'app), e plugin custom per dominio specifico.

Setup minimo in un progetto Expo:

// reactotron.config.ts
import Reactotron from 'reactotron-react-native';
import { reactotronZustand } from 'reactotron-plugin-zustand';
import { useStore } from './src/store';

if (__DEV__) {
  Reactotron
    .configure({ name: 'MyApp', host: 'localhost' })
    .useReactNative({ networking: true, asyncStorage: true })
    .use(reactotronZustand({ stores: [{ name: 'main', store: useStore }] }))
    .connect();
}

// index.ts
if (__DEV__) require('./reactotron.config');

Reactotron è particolarmente utile se la tua app ha uno stato complesso e usi una soluzione come Zustand o Jotai per la gestione dello stato. Il pannello State permette di vedere l'albero dello store, fare time-travel sulle azioni Redux e dispatcher event manualmente per riprodurre bug.

Performance profiling: JS, UI e Native

Un'app React Native ha tre thread che possono diventare un collo di bottiglia: il thread JS (dove gira il tuo codice), il thread UI (responsabile del rendering nativo), e lo shadow thread (calcoli di layout Yoga). Il profiling richiede strumenti diversi per ciascuno.

Per il thread JS, usa il pannello Performance di React Native DevTools. Avvia la registrazione, esegui l'interazione lenta (es. apertura di una lista, scroll, navigazione), ferma la registrazione e analizza la fiamma temporale. Le funzioni più larghe sono quelle che bloccano il thread.

Per il thread UI su iOS, Xcode Instruments con il template Time Profiler resta la scelta migliore. Su Android usa Android Studio Profiler in modalità System Trace. Entrambi mostrano frame drops e ti dicono quali metodi nativi sono in esecuzione quando l'UI si blocca.

Strumento	Thread	Casi d'uso	Setup
RN DevTools Performance	JS	Funzioni JS lente, re-render	Built-in
React Profiler	JS (React)	Re-render eccessivi dei componenti	Built-in
Hermes Sampling Profiler	JS	Profile esportabili (.cpuprofile)	1 flag in metro.config
Xcode Instruments	UI + Native	iOS frame drops, memory leak	Xcode
Android Studio Profiler	UI + Native	Android system trace, CPU, GPU	Android Studio
Perfetto	System (Android)	Trace di basso livello inter-thread	Browser, perfetto.dev

Un anti-pattern comune è ottimizzare il thread JS quando il problema sta nel rendering. Se la tua lista scorre a 30 fps ma il profiler JS mostra che le funzioni durano meno di 5 ms a frame, il collo di bottiglia è sul lato UI/Native: rivedi il numero di elementi virtualizzati e considera l'uso di FlashList v2 al posto di FlatList.

Debugging delle chiamate di rete

Il pannello Network di React Native DevTools cattura automaticamente tutte le chiamate fetch e XMLHttpRequest. Filtra per dominio, mostra il timing dettagliato (DNS, TLS, TTFB, download), e permette di copiare la richiesta come curl.

Per WebSocket e gRPC il supporto è parziale: vedi il handshake ma non i messaggi successivi. Per questi casi servono strumenti esterni come Charles Proxy o mitmproxy con certificato CA installato sul dispositivo.

# mitmproxy su macOS per intercettare il traffico del simulatore iOS
brew install mitmproxy
mitmproxy --listen-port 8080

# Configura il simulatore iOS:
# Settings → Wi-Fi → Configure Proxy → Manual
# Server: localhost, Port: 8080
# Poi installa il certificato mitmproxy aprendo http://mitm.it sul simulatore

Su Android l'analoga configurazione passa da Network Security Config: devi aggiungere un network_security_config.xml che permetta il certificato user-installed. Senza, le richieste HTTPS falliscono con un errore di trust store.

Debugging in produzione con Sentry e source map

I bug più insidiosi sono quelli che non riesci a riprodurre in dev. Per questi serve un servizio di crash reporting che catturi gli errori in produzione e li mappi al codice originale. Sentry per React Native è lo standard de facto nel 2026, con supporto first-party.

# Installazione con il wizard Sentry per RN
npx @sentry/wizard@latest -i reactNative

# Setup manuale: in App.tsx
import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'https://[email protected]/___',
  tracesSampleRate: 0.2,
  enableNativeCrashHandling: true,
  environment: __DEV__ ? 'dev' : 'production',
});

export default Sentry.wrap(App);

Il passaggio critico è il caricamento dei source map. Senza, gli stack trace mostrano nomi minificati come a.b.c invece dei nomi dei file originali. Con EAS Build il caricamento è automatico se imposti SENTRY_AUTH_TOKEN nei secret di progetto. Se gestisci la build manualmente devi invocare sentry-expo-upload-sourcemaps nel post-build hook.

Per chi spedisce app tramite EAS Build e Submit verso App Store e Play Store, Sentry diventa il complemento naturale: ogni release riceve un proprio set di source map, e i crash sono raggruppati per versione.

Errori comuni e come diagnosticarli

Alcuni errori si ripresentano regolarmente. Conoscere la diagnostica giusta risparmia ore di trial and error. Quelli qui sotto li ho incontrati tutti almeno una volta nei progetti reali.

"Unable to resolve module" dopo upgrade

Metro cache stale. Esegui npx expo start --clear oppure watchman watch-del-all && rm -rf node_modules && npm install. Se il problema persiste, controlla che metro.config.js abbia il resolver corretto per la nuova architettura.

"Native module cannot be null"

Hai installato un pacchetto con codice nativo ma non hai eseguito pod install o ricompilato il dev client. Con Expo, esegui npx expo prebuild --clean seguito da npx expo run:ios.

App che si blocca durante una navigazione

Quasi sempre un re-render in cascata. Apri il React Profiler, registra la navigazione, e cerca componenti che si ri-renderizzano più di 5 volte. Memoizza con React.memo o sposta lo stato fuori dal componente padre.

Crash silenzioso su startup in release

Hermes non logga sullo stdout dei device fisici in modalità release. Collega il dispositivo a Xcode (iOS) o esegui adb logcat | grep ReactNative (Android) per leggere lo stack trace nativo. Spesso è una variabile d'ambiente mancante o una chiave Firebase non configurata. Mi è capitato l'ultima volta a un'ora dalla deadline di submission, e il logcat l'ha smascherata in trenta secondi.

Domande frequenti

Come si apre React Native DevTools?

Avvia il dev server con npx expo start o npx react-native start e premi j nel terminale Metro. Si apre una finestra Chromium con i pannelli Console, Sources, Network e Performance collegati al runtime Hermes sul dispositivo.

Posso ancora usare Flipper con React Native 0.76 o superiore?

Tecnicamente sì, come dipendenza opzionale, ma non riceve più aggiornamenti per la nuova architettura e i plugin principali sono fermi. La raccomandazione ufficiale è migrare a React Native DevTools, Reactotron e Sentry.

Qual è la differenza fra Hermes Inspector e React Native DevTools?

Hermes Inspector è il backend CDP che gira nel motore JavaScript sul dispositivo. React Native DevTools è il frontend integrato che si collega a quel backend. Da utente usi DevTools; Hermes è ciò che lavora sotto.

Reactotron serve ancora se ho già React Native DevTools?

Solo per casi specifici: ispezione di store Redux/Zustand/MobX, persistenza di sessione fra reload, e plugin custom. Per console, network e breakpoint DevTools è sufficiente.

Come faccio a vedere stack trace leggibili in produzione?

Carica i source map su Sentry o Bugsnag al momento del build. Con EAS Build basta impostare SENTRY_AUTH_TOKEN nei secret di progetto; il caricamento avviene automaticamente nel post-build.