6 outils pour déboguer React Native

Les plats clés

• Le débogage est une partie cruciale du développement de logiciels, aidant à identifier et à résoudre les problèmes avant d'être poussés à la production. Dans le monde indigène React, il existe plusieurs outils disponibles pour le débogage, chacun adapté à différents environnements et problèmes.
• Certains des outils les plus couramment utilisés incluent le menu Developer, Yellowboxs et Redboxes, Chrome’s Devtools, React Developer Tools, React Native Debugger et React Native CLI. Chaque outil offre ses propres fonctionnalités uniques, telles que l'affichage des erreurs et des avertissements, permettant des recharges en direct, inspecter les éléments d'interface utilisateur, et plus encore.
• React Native Debugger est un outil particulièrement utile pour ceux qui utilisent Redux dans leur application Native React. Il s'agit d'une application de bureau autonome qui intègre à la fois les outils de développeur Devtools et React de Redux en un seul endroit, ce qui rend le processus de débogage plus efficace.
• La CLI native React peut également être utilisée pour le débogage, vous permettant d'afficher les journaux de l'application et d'obtenir des informations pertinentes sur les bibliothèques et les dépendances que vous utilisez dans votre application. Cela peut être particulièrement utile pour corriger les bogues causés par les décalages de version.

Le débogage est un élément essentiel du développement de logiciels. C’est par le débogage que nous savons ce qui ne va pas et ce qui est bien, ce qui fonctionne et ce qui ne fonctionne pas. Le débogage offre la possibilité d'évaluer notre code et de résoudre les problèmes avant qu'ils ne soient poussés à la production.

Dans le monde indigène React, le débogage peut être fait de différentes manières et avec différents outils, car React Native est composé de différents environnements (iOS et Android), ce qui signifie qu'il existe un assortiment de problèmes et une variété d'outils nécessaires pour le débogage .

Grâce au grand nombre de contributeurs à l'écosystème indigène React, de nombreux outils de débogage sont disponibles. Dans ce bref guide, nous allons explorer les plus couramment utilisés, à commencer par le menu du développeur.

Le débogage est deux fois plus difficile que d'écrire le code en premier lieu. Par conséquent, si vous écrivez le code aussi intelligemment que possible, vous n'êtes, par définition, pas assez intelligent pour le déboguer. - Brian W. Kernighan

Le menu du développeur

Le menu du développeur dans l'application est votre première porte pour déboguer React Native, il a de nombreuses options que nous pouvons utiliser pour faire différentes choses. Décomposons chaque option.

• Recharger: Recharger l'application
• Debug JS à distance: ouvre un canal à un débogueur JavaScript
• Activer le rechargement en direct: fait le rechargement de l'application automatiquement en cliquant sur Enregistrer
• Activer le rechargement chaud: les montres pour les modifications accumulées dans un fichier modifié
• Bascule inspecteur: bascule une interface inspecteur, qui nous permet d'inspecter n'importe quel élément d'interface utilisateur sur l'écran et ses propriétés, et présente et interface qui a d'autres onglets comme le réseau, qui nous montre les appels HTTP, et un onglet pour les performances.

Yellowbox et Redboxs

Redbox est utilisé pour afficher les erreurs. Chaque fois qu'une application lance une erreur, elle affichera une Redbox et la description de l'erreur. Vous pouvez l'afficher à tout moment en écrivant Console.Error. Mais cela ne fonctionne pas dans la production, ce qui signifie que si une erreur se produit dans cet environnement, l'application s'écrase et cessera de fonctionner.

La Redbox est votre ami. L'une des choses utiles à ce sujet est qu'elle affiche l'erreur et vous donne les suggestions sur la façon de le réparer, que vous ne trouverez pas dans la console. Par exemple, j'écrirai fréquemment une propriété de style qui n'est pas prise en charge par React Native, ou une propriété qui est utilisée pour un élément spécifique, telles que la création de backroundImage pour l'élément de vue. La Redbox lancera une erreur, mais elle affichera également la liste des propriétés de style prise en charge que vous pouvez appliquer à la vue.

Yellowboxs sont utilisés pour afficher des avertissements. Vous pouvez les désactiver en ajoutant une ligne de code indiquée ci-dessous à l'intérieur index.js dans le répertoire racine de votre application. Mais ce n'est pas recommandé, car les Yellowboxs sont très utiles. Ils vous mettent en garde contre des choses comme les problèmes de performances et le code obsolète. Vous pouvez utiliser l'élément Yellowbox de React-Native pour afficher un avertissement spécifique.

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

La plupart des avertissements Yellowbox sont liés à une mauvaise pratique dans votre code. Par exemple, vous pourriez obtenir un avertissement que vous avez un EventListener que vous ne supprimez pas lorsque le composant démoule, ou que vous avez des fonctionnalités et des dépendances obsolètes comme celle-ci:

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

La résolution de ces problèmes empêchera de nombreux bogues et améliorera la qualité de votre code.

Vous pouvez toujours en savoir plus sur le débogage de React Native dans les documents officiels.

Devtools de Chrome

Chrome est peut-être le premier outil auquel vous pensez pour déboguer React Native. Il est courant d'utiliser les DevTools de Chrome pour déboguer les applications Web, mais nous pouvons également les utiliser pour déboguer React Native car il est alimenté par JavaScript.

Pour utiliser les Devtools de Chrome avec React Native, assurez-vous d'abord que vous êtes connecté au même Wi-Fi, appuyez sur Commande r Si vous utilisez macOS, ou Ctrl m sur Windows / Linux. Lorsque le menu du développeur apparaît, choisissez Debug JS à distance. Cela ouvrira le débogueur JS par défaut.

Vérifiez ensuite cette adresse http: // localhost: 8081 / debugger-ui / in chrome. Vous devriez voir cette page:

Vous devrez peut-être faire du dépannage sur Android.

Pour résoudre ce problème, assurez-vous que votre machine et l'appareil sont connectés sur le même Wi-Fi, puis ajoutez Android: utiliseClearTextTraffic = "true" à Android / App / Src / Main / AndroidManifest.xml. Si cela ne fonctionne pas pour vous, consultez ces liens pour d'autres solutions:

• Stack Overflow
• github

Une fois que vous vous êtes connecté avec succès à Chrome, vous pouvez simplement basculer l'inspecteur de Chrome.

Ensuite, jetez un œil aux journaux de votre application Native React. Jetez également un coup d'œil à travers les autres fonctionnalités proposées par Chrome’s Devtools et utilisez-les avec React Native comme vous le faites avec n'importe quelle application Web.

L'une des limites de l'utilisation de Devtools de Chrome avec React Native est que vous ne pouvez pas déboguer les styles et modifier les propriétés de style comme vous le faites habituellement lorsque vous déboguez les applications Web. Il est également limité en comparaison avec Devtools de React lors de l'inspection de la hiérarchie des composants de React.

réagir les outils du développeur

Pour déboguer React Native à l'aide des outils de développement de React, vous devez utiliser l'application de bureau. Vous pouvez l'installer globalement ou localement dans votre projet en exécutant simplement cette commande suivante:

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

ou npm:

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

Démarrez ensuite l'application en exécutant le fil React-Devtools, qui lancera l'application.

Les outils de développeur de React peuvent être le meilleur outil pour déboguer React Native pour ces deux raisons:

• Il permet de déboguer les composants de réaction.
• Il permet de déboguer les styles dans React Native (ma fonctionnalité préférée de ces outils de développeur!). La nouvelle version est livrée avec cette fonctionnalité qui fonctionne également avec l'inspecteur dans le menu Developer. Auparavant, c'était un problème d'écrire des styles et de devoir attendre que l'application recharge les changements. Maintenant, nous pouvons déboguer et mettre en œuvre des propriétés de style et voir l'effet du changement instantanément sans recharger l'application.

Vous pouvez en savoir plus sur l'utilisation de l'application Developer Tools de React ici.

réagir le débogueur natif

Si vous utilisez Redux dans votre application Native React, React Native Debugger est probablement le bon débogueur pour vous. Il s'agit d'une application de bureau autonome qui fonctionne sur macOS, Windows et Linux. Il intègre à la fois les outils de développement de DevTools et React dans une application afin que vous n'ayez pas à travailler avec deux applications distinctes pour le débogage.

React Native Debugger est mon débogueur préféré et celui que j'utilise habituellement dans mon travail avec React Native. Il a une interface pour les DevTools de Redux où vous pouvez voir les journaux Redux et les actions, et une interface pour les outils de développeur de React où vous pouvez inspecter et déboguer les éléments React. Vous pouvez trouver les instructions d'installation ici. Vous pouvez vous connecter avec ce débogueur de la même manière que vous ouvrez l'inspecteur de Chrome.

Utilisation du débogueur natif React sur Devtools de Chrome a certains avantages. Par exemple, vous pouvez basculer l'inspecteur à partir du menu Dev pour inspecter les éléments natifs React et modifier les styles, qui n'est pas disponible dans les Devtools de Chrome.

réagir CLI natif

Vous pouvez utiliser la CLI native React pour faire du débogage également. Vous pouvez l'utiliser pour afficher les journaux de l'application. Hitting React-Native Log-Android vous affichera les journaux de DB Logcat sur Android, et pour afficher les journaux dans iOS, vous pouvez exécuter React-Native Log-IOS, et avec Console.log, vous pouvez envoyer des journaux au terminal:

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

Vous devez ensuite voir les journaux dans le terminal.

Vous pouvez utiliser la CLI native React pour obtenir des informations pertinentes sur les bibliothèques et les dépendances que vous utilisez dans votre application, en exécutant des informations React-Native sur le terminal. Il nous montre quelques informations utiles sur les outils que vous utilisez. Par exemple, voici un exemple de sortie lorsque vous exécutez des informations réagis natives:

Vous pouvez utiliser ces informations pour corriger certains bogues causés par les décalages de version d'un outil que vous utilisez dans votre projet, il est donc toujours bon de vérifier les informations sur l'environnement en utilisant cette commande.

Résumé

Il existe de nombreux outils pour le débogage de React Native en plus de ceux que nous avons regardés ici. Cela dépend vraiment des besoins spécifiques de votre projet. J'utilise principalement React Native Debugger Desktop parce que je travaille souvent avec Redux, et il combine un tableau d'outils dans une application qui est super et un gain de temps.

Veuillez me frapper sur Twitter si vous souhaitez parler davantage des outils pour déboguer React Native et REACT Native en général. J'aimerais avoir de vos nouvelles!

Les questions fréquemment posées (FAQ) sur le débogage dans React Native

Quels sont les meilleurs outils pour déboguer dans React Native?

Il existe plusieurs outils disponibles pour déboguer dans React Native. Certains des plus populaires incluent React Native Debugger, Reactotron et Flipper. React Native Debugger est une application autonome qui combine React Devtools et Redux Devtools. Il vous permet d'inspecter la hiérarchie des composants React, les actions Redux Store et Dispatch. Reactotron, en revanche, est une application de bureau qui vous permet d'inspecter l'état d'application Redux ou MobX-State-Tree. Flipper est une plate-forme pour déboguer les applications mobiles. Il est extensible et dispose d'un marché pour installer des plugins qui peuvent aider à déboguer diverses parties de votre application.

Comment puis-je déboguer les demandes de réseau dans React Native?

Les demandes de réseau peuvent être déboguées dans React Native React Native? Utilisation d'outils comme Flipper ou Reactotron. Ces outils vous permettent d'afficher toutes les demandes de réseau faites par votre application, d'inspecter leurs détails et même de modifier leurs réponses. Vous pouvez également utiliser l'inspecteur de réseau intégré dans React Native Debugger.

Comment puis-je déboguer les problèmes de mise en page dans React Native?

Les problèmes de mise en page dans React Native peuvent être débogués à l'aide de l'outil d'inspecteur dans React Native Debugger. Cet outil vous permet de sélectionner n'importe quel composant à l'écran et d'inspecter sa mise en page, ses styles et ses accessoires. Vous pouvez également utiliser l'inspecteur de mise en page dans Flipper, qui fournit une fonctionnalité similaire.

Comment puis-je déboguer les problèmes de performance dans React Native?

Les problèmes de performances dans React Native peuvent être débogués à l'aide du moniteur de performance intégré à React Native. Cet outil fournit des statistiques en temps réel sur les performances de votre application, telles que FPS (cadres par seconde), l'utilisation de la RAM et l'utilisation du processeur. Vous pouvez également utiliser le profileur dans React Devtools pour mesurer la fréquence à laquelle un composant React rend et ce qui le fait rendre.

Comment puis-je déboguer l'état Redux dans React Native?

État redux en Redux en Redux React Native peut être débogué à l'aide de Redux Devtools. Cet outil vous permet d'inspecter chaque charge utile d'état et d'action, et il vous permet de remonter dans le temps en «annulant» les actions. Vous pouvez utiliser Redux Devtools comme une application autonome, ou vous pouvez l'intégrer dans le débogueur natif React ou Reactotron.

Comment puis-je déboguer le code natif dans React Native?

Le code natif peut-être Native peut React être débogué à l'aide d'outils spécifiques à la plate-forme. Pour Android, vous pouvez utiliser le débogueur intégré d'Android Studio. Pour iOS, vous pouvez utiliser le débogueur intégré de Xcode. Ces outils vous permettent de définir des points d'arrêt, de parcourir le code et d'inspecter les variables.

Comment puis-je déboguer les fuites de mémoire dans React Native?

Les fuites de mémoire dans React Native peuvent être débogues à l'aide du profiler de mémoire dans Flipper ou React Native Debugger. Ces outils fournissent des informations sur l'utilisation de la mémoire de votre application, et ils peuvent vous aider à identifier les composants qui ne sont pas correctement nettoyés.

Comment puis-je déboguer le code asynchrone dans React Native?

Le code asynchrone dans React Native peut être débogué à l'aide du stockage asynchrone. Cela vous permet de voir la séquence des actions et les changements d'état dans votre application, ce qui peut vous aider à identifier où les choses se passent mal. Vous pouvez également utiliser des outils comme Reactotron, qui fournissent des fonctionnalités pour suivre le stockage asynchronisé.

Comment puis-je déboguer les animations dans React Native?

Les animations dans React Native peuvent être débogues à l'aide de l'inspecteur d'animation dans React Débogueur indigène. Cet outil vous permet de voir les valeurs des propriétés animées à mesure qu'elles changent avec le temps. Vous pouvez également utiliser le moniteur de performance pour vérifier les FPS de vos animations.

Comment puis-je déboguer des accidents dans React Native?

Les plantages dans React Native peuvent être débogués à l'aide d'outils de rapport de crash comme Sentry ou Crashlytics. Ces outils collectent des rapports de crash de vos utilisateurs en temps réel, vous permettant de voir exactement ce qui s'est passé menant à un crash. Ils fournissent des traces de pile détaillées, des informations sur l'appareil et des actions des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!