React Native DevTools

Le panneau Performance est celui que les équipes sous-utilisent. Combiné aux Web Performance APIs de React Native (stables depuis la 0.83 : performance.mark, performance.measure), il permet d’instrumenter un démarrage ou une navigation avec des marques posées dans le code et de les lire sur la même timeline que les rendus React. C’est la méthode que j’utilise pour objectiver un « l’app est lente » avant de toucher au code. Le panneau Network a ses limites documentées : WebSocket seulement sur le canal Canary depuis la 0.88, pas de mocking ni de throttling, et sur Expo le panneau « Expo Network » reste disponible à côté.

Le piège d’outillage classique est une version de React Native inférieure à 0.76 ou un moteur autre que Hermes : React Native DevTools n’est pas disponible, et les tutoriels pointent vers Flipper, dont l’intégration a été retirée du template. Autre cas fréquent : une boîte de dialogue « Debugging connection was closed » après un rebuild ou un crash ; « Reconnect DevTools » suffit une fois la cause réglée, sans relancer Metro s’il tourne encore.

Pour l’arbre React, le bouton « select element » localise un composant sur le device et le réglage « Highlight updates » montre les re-rendus en direct, ce qui règle la majorité des discussions sur les useMemo inutiles en quelques minutes.