React Native DevTools : Le Guide Complet du Débogage Moderne (2026)

Mis à jour : 3 juillet 2026

React Native DevTools est le débogueur officiel de React Native, livré avec la version 0.76+, qui remplace définitivement Flipper. Basé sur le frontend Chrome DevTools et branché directement sur Hermes via le protocole CDP (Chrome DevTools Protocol), il propose des points d'arrêt fiables, une console riche, l'inspection du composant React et un panneau réseau, le tout sans configuration native. En 2026, c'est devenu l'outil standard de débogage pour toutes les applications Expo et React Native modernes.

• React Native DevTools est intégré au CLI depuis React Native 0.76 et activé par défaut dans Expo SDK 52+.
• Il remplace Flipper, officiellement déprécié en 2024 et retiré du modèle par défaut avec l'arrivée de la Nouvelle Architecture.
• Il utilise le protocole CDP pour communiquer avec Hermes, ce qui rend les breakpoints beaucoup plus fiables que l'ancien débogueur JS distant.
• Ouvrez-le avec j dans le terminal Metro, via le menu développeur ou avec la commande npx react-native-devtools.
• Il inclut React DevTools, un inspecteur de composants, un profiler de performance et un panneau réseau pour intercepter fetch et XMLHttpRequest.
• Pour un profiling avancé (rendus natifs, Fabric, TurboModules), combinez-le avec Perfetto sur Android et Instruments sur iOS.

Qu'est-ce que React Native DevTools ?

React Native DevTools est un débogueur autonome fondé sur le frontend Chrome DevTools, adapté aux besoins spécifiques de React Native. Contrairement à l'ancien "débogueur JavaScript distant" (qui déportait toute l'exécution vers Chrome), DevTools se connecte à l'instance Hermes qui tourne réellement sur votre appareil ou simulateur. Ça change tout : le code s'exécute là où il est censé s'exécuter, avec les mêmes valeurs de Date, les mêmes performances et les mêmes appels natifs qu'en production.

L'outil est distribué comme un binaire packagé avec React Native 0.76 et plus (versions Bridgeless), et il apparaît automatiquement dans le menu développeur d'Expo Go et des builds de développement. Il regroupe :

• Un panneau Console avec autocomplétion, filtrage et évaluation à la volée.
• Un panneau Sources pour poser des breakpoints, inspecter la pile d'appels et surveiller des variables.
• Un panneau Network qui capture les requêtes HTTP côté JS, y compris les headers et le corps.
• React DevTools et le React Profiler pour analyser les rendus, les hooks et le temps de commit.
• Un panneau Memory pour prendre des heap snapshots Hermes.

En clair, DevTools est devenu le point d'entrée unique du débogage frontend, exactement comme Chrome DevTools l'est pour le web. Il fonctionne sur macOS, Windows et Linux, et prend en charge iOS, Android et les émulateurs.

Flipper est-il vraiment obsolète en 2026 ?

Oui. Flipper a été officiellement déprécié par l'équipe React Native en 2024 et retiré du template par défaut à partir de la version 0.73. La Nouvelle Architecture (Fabric + TurboModules + Bridgeless) rendait la maintenance des plugins Flipper trop coûteuse : chaque intégration reposait sur le bridge classique, incompatible avec le modèle synchrone de JSI. L'équipe a préféré miser sur un outil aligné avec l'écosystème Chrome DevTools, largement connu des développeurs web.

Concrètement, si vous démarrez un projet en 2026 avec npx create-expo-app ou npx @react-native-community/cli init, Flipper n'est plus installé. Les entreprises qui maintiennent des applications existantes peuvent encore l'utiliser, mais elles doivent le brancher manuellement et accepter qu'aucune correction majeure ne soit publiée. Pour toute nouvelle fonctionnalité (inspection Fabric, profiling TurboModules, breakpoints natifs), seul React Native DevTools est activement développé.

Cela s'aligne aussi avec la migration vers la New Architecture, où Flipper ne peut plus refléter fidèlement l'état de l'application. Si votre équipe hésite encore, le moment est venu de basculer. J'ai fait le saut sur trois apps l'an dernier, et la courbe d'apprentissage est vraiment courte pour quiconque connaît Chrome DevTools.

Comment activer React Native DevTools ?

L'activation est immédiate sur un projet à jour. Voici les trois méthodes selon votre environnement.

Depuis un projet React Native CLI

Assurez-vous d'être sur React Native 0.76 ou ultérieur et que Hermes est activé (ce qui est le cas par défaut). Lancez ensuite Metro :

npx react-native start
# Dans un autre terminal
npx react-native run-ios   # ou run-android

Une fois l'application ouverte, appuyez sur la touche j dans le terminal Metro. DevTools s'ouvre dans une fenêtre autonome (Electron) et se connecte automatiquement à Hermes.

Depuis Expo (SDK 52+)

Avec un projet Expo, exécutez :

npx expo start
# Puis dans le terminal
# Appuyez sur j pour ouvrir React Native DevTools

Expo utilise le même mécanisme sous le capot. Si vous tournez sur un appareil physique, secouez-le pour ouvrir le menu développeur et choisissez Open DevTools.

Depuis le menu développeur

Sur simulateur iOS, appuyez sur Cmd+D. Sur émulateur Android, Cmd+M (macOS) ou Ctrl+M. Sélectionnez Open DevTools. Le menu affiche aussi des options pour activer le Fast Refresh, le rechargement à chaud et l'inspecteur d'éléments.

Déboguer avec des points d'arrêt et la console

Le panneau Sources est le cœur de DevTools. Il liste tous les modules chargés (y compris ceux issus des bundles node_modules) grâce aux source maps émises par Metro. Vous pouvez ouvrir n'importe quel fichier avec Cmd+P, cliquer dans la gouttière pour poser un breakpoint et déclencher l'action correspondante dans l'application. L'exécution s'arrête, la pile d'appels s'affiche, et vous pouvez survoler les variables pour voir leur valeur.

Un exemple minimal :

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

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

  const increment = () => {
    // Posez un breakpoint sur la ligne suivante
    const next = count + 1;
    console.log('Nouveau compte :', next);
    setCount(next);
  };

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

Quand vous appuyez sur le bouton, l'exécution se fige sur la ligne du breakpoint. Le panneau Scope affiche count, next et les hooks du composant. Vous pouvez alors :

• Utiliser Step over (F10) et Step into (F11) pour avancer instruction par instruction.
• Poser un logpoint (clic droit sur la gouttière) pour émettre un message sans arrêter l'exécution.
• Créer des watch expressions pour surveiller une valeur dérivée.

Honnêtement, les logpoints changent la vie quand on débogue un bug de rendu intermittent : plus besoin de repackager l'app à chaque fois qu'on veut logger une valeur. La console prend en charge les commandes classiques : console.log, console.table, console.group et console.time. En 2026, elle supporte aussi les console formatters (%c, %O) et affiche les objets Immer, Zustand ou Redux avec leur inspecteur natif.

Comment inspecter le réseau dans React Native ?

Le panneau Network de React Native DevTools capture automatiquement toutes les requêtes issues de fetch et XMLHttpRequest. Vous verrez la méthode HTTP, le statut, la taille, le temps et les en-têtes, y compris ceux ajoutés par Metro pour le rechargement. Contrairement à Flipper, aucune configuration native n'est requise ; l'interception est faite côté JS via un polyfill intégré à React Native 0.76+.

Un cas d'usage classique : diagnostiquer une requête bloquée par CORS ou par un token expiré. J'ai perdu une matinée sur exactement ce scénario le mois dernier avant de me souvenir que l'onglet existait. Ouvrez Network, filtrez sur Fetch/XHR, cliquez sur la requête et inspectez :

• Headers : vérifier Authorization, Content-Type et les cookies.
• Preview : affiche la réponse JSON parsée avec un explorateur arborescent.
• Response : la charge brute, utile pour repérer des espaces indésirables ou du HTML renvoyé au lieu de JSON.
• Timing : le breakdown DNS/Connect/TTFB, pratique pour repérer les temps morts côté backend.

Pour intercepter des requêtes provenant de bibliothèques natives (par exemple expo-image ou react-native-firebase), vous devez encore passer par un proxy HTTP local comme Proxyman ou Charles. DevTools ne voit que le trafic JavaScript ; c'est une limite volontaire pour rester léger.

Utiliser React DevTools et le profiler

DevTools embarque une version à jour de React DevTools, ce qui évite d'installer react-devtools globalement. L'onglet Components montre l'arbre de composants avec leurs props, hooks et contexte. Vous pouvez sélectionner un composant à l'écran via l'inspecteur d'éléments (icône en haut à gauche) puis modifier ses props en direct pour tester une hypothèse. C'est un gain de temps énorme sur les listes complexes.

L'onglet Profiler enregistre chaque commit React avec sa durée. En 2026, il prend en charge les concurrent features de React 19 : vous voyez les rendus en background, les transitions et les suspensions. Un flux typique :

1. Cliquez sur Record puis reproduisez l'action lente (par exemple, filtrer une liste de 1000 éléments).
2. Arrêtez l'enregistrement et parcourez les commits avec la timeline.
3. Repérez les composants dont le temps de rendu dépasse 16 ms. Ceux-là cassent la fluidité à 60 fps.
4. Utilisez la vue Flamegraph pour trouver la sous-arborescence coûteuse.
5. Appliquez React.memo, useMemo ou passez à FlashList pour les listes performantes.

Pour les cas où le rendu React n'est pas en cause (par exemple des ponts JSI trop bavards), passez au profiler natif : Perfetto sur Android ou Instruments (Time Profiler) sur iOS. Ces outils voient les threads UI et JS séparément et exposent les appels TurboModules.

Alternatives et outils complémentaires

React Native DevTools ne fait pas tout. Selon la nature du bug, d'autres outils restent indispensables. Le tableau suivant résume les cas d'usage typiques en 2026.

Outil	Cas d'usage	Statut 2026	Nouvelle Architecture
React Native DevTools	Débogage JS, réseau JS, profiler React	Officiel, activement développé	Oui
Flipper	Historique, plugins natifs	Déprécié depuis 2024	Non
Reactotron	Inspection Redux/MobX, logs personnalisés	Communautaire, maintenu	Partiel
Perfetto	Profiling natif Android, threads UI	Recommandé par Google	Oui
Instruments (Xcode)	Profiling natif iOS, mémoire, énergie	Standard Apple	Oui
Proxyman / Charles	Interception HTTPS complète	Payant, à jour	Oui
Sentry	Erreurs et performances en production	Standard SaaS	Oui

Reactotron mérite une mention spéciale : sa capacité à observer les actions Redux et les mutations Zustand reste supérieure au panneau générique de DevTools. Pas mal d'équipes le conservent en complément, même après avoir adopté DevTools comme débogueur principal. Pour le suivi en production, Sentry offre un tracing distribué compatible avec la documentation officielle Expo pour Sentry.

Dépannage des problèmes courants

Voici les erreurs qui reviennent le plus souvent en support communautaire.

DevTools ne s'ouvre pas quand j'appuie sur "j"

Vérifiez que Metro est bien en cours d'exécution et que la fenêtre du terminal a le focus. Sur Windows, certains émulateurs de terminal (Windows Terminal, Cmder) ne transmettent pas la touche j. Utilisez alors la commande npx react-native devtools directement.

Les breakpoints ne se déclenchent jamais

C'est presque toujours un problème de source maps. Assurez-vous que metro.config.js ne remplace pas sourceMaps: false et que Hermes est activé dans ios/Podfile et android/gradle.properties. Un rebuild propre (npx react-native run-ios --reset-cache) suffit dans 90 % des cas. J'ai été piégé une fois par un vieux metro.config.js qui traînait depuis une migration Expo, ça vaut le coup de le relire ligne par ligne.

Le panneau Network est vide

Vérifiez qu'aucun polyfill personnalisé de fetch (par exemple, un ancien whatwg-fetch) n'écrase l'implémentation React Native. Si vous utilisez axios, tout fonctionne car il repose sur XMLHttpRequest intercepté.

DevTools se déconnecte après un rechargement

C'est un bug connu jusqu'à React Native 0.76.4. Mettez à jour vers 0.77+ ou lancez DevTools en autonome avec npx react-native-devtools --keep-alive.

Questions fréquentes

Comment déboguer une application React Native en 2026 ?

Utilisez React Native DevTools, livré par défaut avec React Native 0.76+ et Expo SDK 52+. Ouvrez-le avec la touche j dans Metro ou depuis le menu développeur. Il combine console, breakpoints, inspecteur réseau et React DevTools dans une seule fenêtre autonome.

Faut-il encore installer react-devtools séparément ?

Non. React Native DevTools embarque déjà la version à jour de React DevTools, avec l'inspecteur de composants et le profiler. L'installation globale de react-devtools n'est nécessaire que si vous préférez utiliser l'ancienne interface autonome.

React Native DevTools fonctionne-t-il sans Hermes ?

Non. DevTools s'appuie sur le protocole CDP exposé uniquement par Hermes. Si vous utilisez JavaScriptCore, vous devez repasser à Hermes (recommandé) ou continuer avec l'ancien débogueur JS distant, désormais déprécié.

Peut-on inspecter les requêtes HTTPS chiffrées ?

Oui pour les requêtes JavaScript (fetch, axios), le panneau Network les affiche déchiffrées côté client. Pour les requêtes natives (SDK Firebase, expo-image), passez par un proxy comme Proxyman ou Charles avec un certificat racine installé sur le simulateur.

Quelle est la meilleure alternative si mon projet est encore sur React Native 0.72 ?

Continuez avec Flipper pour la maintenance, ou installez Expo Router et migrez vers Expo SDK 52 pour bénéficier immédiatement de React Native DevTools. Reactotron reste une option légère pour Redux et les logs personnalisés.