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 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.
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.
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:
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.
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:
Vous pouvez en savoir plus sur l'utilisation de l'application Developer Tools de React ici.
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.
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.
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!
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.
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.
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.
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.
É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.
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.
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.
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é.
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.
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!
Comment ouvrir un fichier zip
Quelle interface est audio ?
Introduction aux raisons pour lesquelles le bureau à distance ne peut pas se connecter
Pendant combien d'années faut-il payer une assurance maladie pour bénéficier d'une assurance médicale à vie ?
Qu'est-ce que Spring MVC
odm
Où est la lampe de poche du téléphone OnePlus ?
Utilisation de la commande source sous Linux
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
