Commencer par le débogage des autochtones réagisser

React Native est devenu l'un des cadres les plus largement adoptés pour construire des applications mobiles multiplateforme, en tirant parti de JavaScript et de React pour fournir des expériences natives. Le débogage est une compétence de base qui affecte directement la vitesse de développement et la qualité de l'application. Que vous soyez un nouveau venu ou un développeur expérimenté, comprendre l'écosystème de débogage disponible dans React Native vous aidera à identifier les problèmes plus rapidement, réduire le temps passé sur la reproduction des bogues, et expédier un code plus fiable. Cet article fournit une visite en profondeur des outils et des techniques de débogage essentiels, des outils Chrome Developer intégrés aux plateformes avancées comme Flipper et React Native Debugger.

Avant de plonger dans des outils spécifiques, il aide à configurer votre environnement de développement pour un débogage optimal. Assurez-vous que vous avez la dernière version de React Native installée, car les versions plus récentes incluent souvent des améliorations de débogage et des déprécations de méthodes dépassées. Pour iOS, l'utilisation d'un appareil réel avec une connexion USB peut révéler des problèmes que les simulateurs obscurs, tandis que Android émulateur offre des fonctionnalités de débogage riches via la logage ADB. Familiarisez-vous avec le menu Réact Native Développeur, accessible en agitant un appareil physique ou en appuyant sur Cmd+D (simulator iOS) ou Cmd+M (émulateur Android).

Outils de développeurs Chrome : Le cheval de travail classique de débogage

Les outils de développement Chrome (DevTools) ont été un agrafe dans le débogage Native React depuis le framework , les premiers jours. Lorsque vous activez le débogage depuis le menu de développement, le code JavaScript apps fonctionne à l'intérieur de Chrome, vous permettant d'utiliser la suite complète des fonctionnalités DevTools. Cette méthode fonctionne en établissant une connexion WebSocket entre l'application Native React et Chrome, de sorte que vous pouvez inspecter les éléments, définir des points d'arrêt, surveiller les requêtes réseau, et de déboger JavaScript en temps réel.

Activer Chrome DevTools dans Réagir Native

Pour commencer à déboger avec Chrome DevTools :

  1. Ouvrez votre application React Native sur un émulateur ou un appareil physique.
  2. Ouvrez le menu développeur en agitant le périphérique ou en appuyant sur Cmd+D (iOS) / Cmd+M (Android).
  3. Sélectionnez -Debug (ou -Debug JS Remotely) dans les anciennes versions. Un nouvel onglet Chrome s'ouvrira avec l'interface DevTools.
  4. Dans Chrome, appuyez sur Cmd+Option+I (Mac) ou Ctrl+Shift+I (Windows/Linux) pour ouvrir DevTools si elle n'apparaît pas automatiquement.

Une fois connecté, vous pouvez utiliser efficacement les panneaux suivants:

  • Éléments: Bien que moins riche que les outils d'inspecteur natifs, le panneau Éléments affiche un arbre DOM simplifié de vos vues natives React. Vous pouvez modifier les styles en ligne pour tester les modifications de la disposition.
  • Console: Voir les journaux de , et [. La console évalue également les expressions JavaScript dans le contexte de votre application.
  • Sources: Définir des points d'arrêt, passer par le code et inspecter les piles d'appels. C'est la fonctionnalité la plus puissante pour déboger les erreurs logiques.
  • Network: Surveillez les requêtes HTTP et WebSocket faites par votre application. Utile pour vérifier les appels API et les données de réponse.
  • Performance: Enregistrer et analyser les performances d'exécution, y compris FPS, l'utilisation de la mémoire et le temps d'exécution JavaScript.

Cependant, gardez à l'esprit que le débogage de Chrome DevTools introduit un léger frais-volant parce que le JavaScript fonctionne dans le moteur V8 Chrome , plutôt que dans le moteur JavaScript natif (Hermes ou JSC). Cela signifie que certains bogues qui apparaissent seulement sur le moteur natif ne peuvent pas se reproduire dans Chrome.

Réagir Debugger Native: Redux intégré et Réagir DevTools

React Native Debugger est une application de bureau autonome qui regroupe React DevTools et Redux DevTools en une interface unique et conviviale pour les développeurs. Elle élimine le besoin de basculer entre différents outils et offre une vue unifiée des arbres de composants, des changements d'état et des actions Redux. Cet outil est particulièrement bénéfique pour les projets qui utilisent Redux pour la gestion d'état, car il offre le débogage temps-voyage et la diffusion d'état hors de la boîte.

Configuration du débogueur natif de réaction

Pour utiliser React Native Debugger :

  1. Téléchargez la dernière version du dépôt officiel GitHub et installez-la sur votre machine.
  2. Lancez l'application React Native Debugger avant de démarrer votre application React Native. Elle écoutera automatiquement sur le port 8081 (ou le port de paquet Metro par défaut).
  3. Ouvrez le menu du développeur de votre application et sélectionnez -Debug ou, si vous avez configuré un débogueur personnalisé, -Debug avec React Native Debugger.- L'application se connectera à la fenêtre de débogueur.
  4. L'interface combine un panneau de gauche pour React DevTools (arborescence des composants) et un panneau de droite pour Redux DevTools (log d'action, inspecteur d'état).

Au-delà des deux DevTools, React Native Debugger comprend également une console intégrée, inspecteur réseau, et inspecteur d'éléments similaire à Chrome DevTools. Il prend en charge les points d'arrêt et les variables de veille, en faisant un environnement de débogage complet. Parce qu'il exécute le JavaScript dans Electron , il partage la même limitation que Chrome DevTools pour les problèmes spécifiques à Hermes.

Quand utiliser React Debugger Native sur Chrome DevTools

Si votre projet repose fortement sur Redux ou MobX, React Native Debugger , les outils de gestion d'état intégrés sont un changement de jeu. Vous pouvez rejouer des actions, inspecter les diffs d'état et exporter l'état à tout moment. Pour les développeurs qui préfèrent une fenêtre séparée dédiée uniquement au débogage sans distractions d'autres onglets Chrome, cet outil offre un workflow plus propre.

Flipper : La plateforme officielle de débogage autochtone réagisse

Flipper est une plateforme open-source développée par Meta (anciennement Facebook) pour le débogage des applications mobiles. Il a été adopté comme outil de débogage par défaut pour React Native dans la version 0.62 et fournit un riche écosystème de plugins. Flipper fonctionne nativement aux côtés des applications iOS et Android, offrant des fonctionnalités comme l'inspection de la mise en page, l'enregistrement en réseau, le rapport d'accident et la navigation de base de données.

Installation et configuration du Flipper

Pour configurer Flipper pour votre projet React Native :

  1. Télécharger Flipper depuis le site officiel de Flipper.
  2. Assurez-vous que votre version React Native est 0.62 ou plus tard (ou ajoutez manuellement les dépendances Flipper à votre projet). Pour les nouveaux projets créés avec , Flipper est inclus par défaut.
  3. Lancez votre application sur un émulateur ou un périphérique. Flipper devrait automatiquement détecter l'application une fois qu'elle démarre. Sur certains émulateurs Android, vous pouvez avoir besoin d'exécuter pour activer la communication.
  4. Si Flipper ne se connecte pas, vérifiez que le paquet est lié dans votre et .

Plugins clés pour réacter Native

  • Layout Inspector: Cliquez sur n'importe quel élément d'interface utilisateur sur l'appareil pour voir son nom de composant, styles, hiérarchie parent-enfant, et coordonnées absolues.
  • Greffon réseau[: Voir toutes les requêtes réseau faites par votre application, y compris les en-têtes, charges utiles et le timing. Vous pouvez filtrer, rechercher et rejouer des requêtes. Ce plugin affiche également les requêtes et les codes d'erreur échoués.
  • Logs Plugin: Centralise , Android logcat et iOS NSLog entrées. Les journaux sont codés en couleur par niveau de log et peuvent être filtrés par tag.
  • Crash Reporter Plugin[: Capture les accidents natifs et les traces de la pile JavaScript, fournissant une chronologie des événements menant à l'écrasement.
  • Hermes Plugin de débogueur: Si vous utilisez Hermes comme moteur JavaScript, ce plugin permet de déboguer directement avec des points de rupture, des étapes de surclassement et des inspections variables sur l'appareil. C'est la façon la plus fiable de déboguer les problèmes spécifiques à Hermes.
  • Greffon de base de données: Parcourir et modifier les bases de données SQLite que votre application utilise pendant le développement, ce qui facilite la vérification de la persistance des données.

L'architecture plugin Flipper , permet également des plugins personnalisés. Les équipes créent souvent des plugins pour visualiser l'état de l'application interne, les réponses de serveur simulé ou les événements d'analyse de log. Cette flexibilité fait de Flipper l'outil de débogage le plus à l'épreuve du futur dans l'écosystème React Native.

Profilage des performances et débogage de la mémoire

Au-delà de la correction d'erreurs logiques, le débogage des problèmes de performance est essentiel pour fournir une expérience utilisateur fluide.

Utilisation du moniteur de performance React Native

Le menu Développeur comprend une option -Afficher le moniteur de Perf - qui recouvre un petit graphique sur le dessus de votre application. Il affiche:

  • FPS: Cadres par seconde. Une expérience fluide devrait maintenir 60 FPS (ou 90/120 sur les dispositifs à taux de rafraîchissement élevé).
  • JS FPS: La vitesse de l'image du fil JavaScript. Si cela tombe, votre code JavaScript peut bloquer le fil principal.
  • ] : Consommation approximative de la mémoire de l'application.
  • Voir le nombre : Le nombre de vues natives actuellement montées.

Utilisez ce moniteur comme premier indicateur que quelque chose ne va pas, puis utilisez des outils plus granulaires pour identifier la cause.

Profilage avec Chrome DevTools Performance Tab

Lorsque vous débogez à distance avec Chrome DevTools, l'onglet Performance peut enregistrer une chronologie de votre exécution JavaScript, y compris les appels de fonction, les mises en page et les événements de peinture.

  1. Ouvrez les outils DevTools Chrome connectés à votre application.
  2. Allez dans l'onglet Exécution et cliquez sur le bouton enregistrement.
  3. Interagissez avec votre application pour reproduire le problème de performance.
  4. Arrêtez d'enregistrer et d'analyser le diagramme de flamme. Cherchez des fonctions à long terme, des mises en page fréquentes ou des re-retendeurs excessifs.

Cependant, parce que le JavaScript fonctionne dans Chrome, les numéros de performance (surtout la mémoire) peuvent différer de l'appareil réel. Pour le profilage de production, utilisez le plugin de performance Flippers ou les outils de performance autonomes React Native comme .

Déboguage de mémoire avec Xcode et Android Studio

Pour les fuites de mémoire native, utilisez des outils spécifiques à la plateforme :

  • Xcode Instruments (iOS)[: Exécutez votre application dans Xcode, puis utilisez les instruments de fuites et d'allocations pour détecter les objets conservés et la croissance de la mémoire.
  • Android Studio Profiler (Android)[: Ouvrez l'onglet Profiler lors de l'exécution de votre application sur un émulateur ou un périphérique. Il montre la mémoire, le processeur et l'utilisation du réseau en temps réel.

Ces outils sont indispensables pour le débogage des problèmes qui apparaissent seulement après une utilisation prolongée de l'application, comme les fuites de mémoire d'auditeurs non déplacés ou de composants non montés.

Scénarios et solutions communs de débogage

Même avec des outils puissants, savoir aborder des problèmes spécifiques accélère la résolution. Voici quelques problèmes fréquents rencontrés pendant le développement de Réagir autochtones et comment les déboguer.

- Impossible de résoudre les erreurs de module

Cela se produit souvent lorsqu'un paquet est manquant ou qu'il y a une inadéquation de version. Vérifiez votre et assurez-vous que vous avez exécuté ou . Si le module est un fichier local, double-vérifiez le chemin d'importation. Utilisez le message d'erreur Metro packager , pour voir quel fichier échoue. Vous pouvez également effacer le cache Metro avec .

Écran vierge sur le lancement de l'application

Un écran vide indique généralement une erreur JavaScript pendant l'initialisation. Avec Chrome DevTools ou React Native Debugger, ouvrez le panneau Console pour voir le message d'erreur. Les causes communes incluent des erreurs de syntaxe, manquant , ou un lien incorrect entre le module natif. Si l'erreur est natif (par exemple, un Pod manquant), la console de périphérique ou le plugin FlipperS Logs affichera les détails.

État non actualisé comme prévu

Les problèmes de gestion de l'état peuvent être délicats. Utilisez React DevTools (soit dans React Native Debugger ou Chrome DevTools avec l'extension des outils de développeur de React) pour inspecter l'arborescence des composants et vérifier l'état actuel et les accessoires. Pour les applications Redux, ouvrez le panneau Redux DevTools et comparez l'action envoyée avec la diff d'état attendue.

Performances de défilement lent

Consultez le Réaction Native Performance Monitor pour les gouttes FPS. Puis profil avec Chrome DevTools pour voir quels composants re-rendent fréquemment. Utilisez , , ou pour empêcher les mises à jour inutiles. Pour les grandes listes, utilisez avec ou passez à pour une meilleure performance.

Intégrer le débogage dans votre flux de travail de développement

Les outils de débogage sont plus efficaces lorsqu'ils sont utilisés de façon cohérente tout au long du cycle de développement, pas seulement lorsqu'un bug apparaît. Voici des pratiques pour intégrer le débogage dans votre workflow quotidien.

Configuration automatique de la gestion des erreurs

Utilisez les limites d'erreur dans vos composants React pour attraper les erreurs JavaScript gracieusement et les enregistrer dans un système comme Sentry ou Bugsnag. Pendant le développement, vous pouvez rediriger ces journaux vers Flipper ou la console afin que vous attrapez les problèmes tôt.

Écrire un code testable et débogable

Découpez votre code en petites fonctions et composants purs. Cela facilite l'isolement des bogues et l'écriture des tests unitaires. Lorsqu'un problème survient, vous pouvez rapidement le reproduire dans un environnement de test sans l'application complète en cours d'exécution.

Utiliser le rechargement à chaud et le rafraîchissement rapide

Réagir Native , Fast Refresh (facilable par défaut dans les versions récentes) vous permet de voir les changements instantanément sans perdre l'état de l'application . Cependant, il peut masquer les problèmes qui se produisent seulement sur un nouveau lancement de l'application . Lorsque vous débogez les bogues d'état initial, désactiver Fast Refresh temporairement en éditant votre code après une recharge complète.

Tirer parti des tests automatisés avec débogage

Combinez le débogage avec les tests automatisés en utilisant des outils comme Detox ou Appium pour les tests de bout en bout. Lorsqu'un test e2e échoue, utilisez l'outil de capture d'écran de Flipper , pour saisir l'état de l'interface utilisateur au moment de la défaillance, ou intégrez avec Flipper pour arrêter les échecs de test pour une inspection manuelle.

Déboguement continu de l'intégration

Dans les pipelines CI/CD, le débogage peut être difficile parce qu'il n'y a pas d'interface utilisateur interactive. Utilisez les commandes et pour stream logs, ou capturez les logs Flipper programmatiquement en utilisant le SDK Flipper. Configurez votre CI pour stocker les logs de crash et les captures d'écran comme artefacts pour l'analyse post-construction.

Proof de votre configuration de débogage

L'écosystème de React Native évolue rapidement et les outils de débogage suivent la même tendance. Hermes, le moteur JavaScript optimisé pour React Native, est maintenant la valeur par défaut pour de nouveaux projets. Le plugin de débogage de Flippers Hermes s'améliore constamment, et l'équipe de Flipper ajoute des fonctionnalités comme l'importation de bases de données et la moquerie de requêtes réseau.

Gardez un œil sur le document officiel Réagir à la documentation de débogage natif pour les mises à jour. En outre, vérifiez le site Flipper pour les nouveaux plugins et améliorations.

En maîtrisant des outils comme Chrome DevTools, React Native Debugger et Flipper, et en adoptant un état d'esprit de débogage proactif, vous pouvez considérablement raccourcir vos cycles de développement et produire des applications Natives React plus robustes. Debugging n'est pas seulement à propos de corriger les bugs – c'est une pratique essentielle qui aiguise votre compréhension du cadre et conduit à un code plus propre et plus durable.