6 outils de débogage de React Native –

Le débogage est une partie essentielle du développement logiciel. C’est par le débogage que nous savons ce qui ne va pas, ce qui marche et ce qui ne marche pas. Le débogage offre la possibilité d'évaluer notre code et de résoudre les problèmes avant qu'ils ne soient mis en production.

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

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

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

Le menu du développeur intégré à l'application est votre première porte d'accès au débogage de React Native. Il propose de nombreuses options permettant d'effectuer différentes opérations. Décomposons chaque option.

• Reload : recharge l'application
• Debug JS à distance : ouvre un canal vers un débogueur JavaScript
• Activer Live Reload : ouvre le canal vers un débogueur JavaScript. cliquant sur Enregistrer
• Activer le rechargement à chaud : surveille les modifications apportées à un fichier modifié
• Basculer Inspecteur : active / désactive une interface d'inspecteur, ce qui permet d'inspecter tout élément d'interface utilisateur à l'écran et ses propriétés, présente et une interface comportant d'autres onglets, tels que la mise en réseau, qui nous montre les appels HTTP et un onglet de performances.

Les YellowBox et les RedBox

Les RedBox sont utilisées pour afficher les erreurs. Chaque fois qu'une application génère une erreur, une boîte rouge et sa description sont affichées. 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 va se bloquer et cesser de fonctionner.

La RedBox est votre amie. L’une des choses utiles à ce sujet est qu’il affiche l’erreur et vous suggère des solutions, que vous ne trouverez pas dans la console. Par exemple, j'écrirai fréquemment une propriété de style non prise en charge par React Native ou une propriété utilisée pour un élément spécifique, telle que la définition de backroundImage pour l'élément View . La Redbox générera une erreur, mais elle affichera également la liste des propriétés de style prises en charge que vous pouvez appliquer à la View .

[19659004] Les YellowBoxes sont utilisés pour afficher des avertissements. Vous pouvez les désactiver en ajoutant la ligne de code indiquée ci-dessous dans index.js dans le répertoire racine de votre application. Mais cela n’est pas recommandé, car les YellowBox sont très utiles. Ils vous avertissent de problèmes de performances et de code obsolète. Vous pouvez utiliser l'élément YellowBox de react-native pour afficher un avertissement spécifique.

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

La plupart des avertissements YellowBox sont liés à une mauvaise pratique dans votre code. Par exemple, vous pourriez recevoir un avertissement indiquant que vous avez un eventListener que vous ne supprimez pas lorsque le composant est démonté, ou que vous avez des fonctions obsolètes et des dépendances telles que celle-ci:

 avertissement: ViewPagerAndroid a été extrait à partir du noyau react-native et sera supprimé dans une prochaine version. Il peut maintenant être installé et importé à partir de '@ react-native-community / viewpager' au lieu de 'react-native'. Voir https://github.com/react-native-community/react-native-viewpager

Résoudre ces problèmes évitera de nombreux bogues et améliorerait la qualité de votre code.

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

Chrome est probablement le premier. outil que vous penseriez pour le débogage de React Native. Il est courant d'utiliser les outils DevTools de Chrome pour déboguer des applications Web, mais nous pouvons également les utiliser pour déboguer React Native, car JavaScript est activé.

Pour utiliser les outils DevTools de Chrome avec React Native, vérifiez d'abord que vous êtes connecté au même réseau. Fi, puis appuyez sur la commande + R si vous utilisez macOS ou Ctrl + M sous Windows / Linux. Lorsque le menu du développeur apparaît, choisissez Déboguer Js à distance . Cela ouvrira le débogueur JS par défaut.

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

Vous devrez peut-être faire un dépannage sous Android.

résolvez ce problème, assurez-vous que votre ordinateur et l'appareil sont connectés au même réseau Wi-Fi, puis ajoutez android: usesCleartextTraffic = "true" à android / app / src / main / AndroidManifest .xml . Si cela ne fonctionne pas pour vous, recherchez d'autres solutions dans ces liens:

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

Ensuite, jetez un coup d'œil aux journaux de votre application React Native. Consultez également les autres fonctionnalités offertes par les outils de développement de Chrome et utilisez-les avec React Native comme avec n'importe quelle application Web.

L'une des limites de l'utilisation de l'outil de développement de Chrome avec React Native est qu'il est impossible de déboguer les styles. et modifiez les propriétés de style comme vous le faites habituellement lorsque vous déboguez des applications Web. Il est également limité par rapport à devtools 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 la commande suivante:

 yarn add react-devtools

Ou npm:

 npm installer react-devtools --save

Puis lancez l'application en exécutant le fil réagit-devtools qui lancera l'application

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

• Il permet le débogage des composants React
• Il permet de déboguer des styles dans React Native (ma fonction préférée de ces outils de développement!). La nouvelle version est fournie avec cette fonctionnalité, qui fonctionne également avec inspecteur dans le menu du développeur. Auparavant, il était problématique d'écrire des styles et d'attendre le rechargement de l'application pour voir les modifications. Maintenant, nous pouvons déboguer et implémenter les propriétés de style et voir l'effet du changement instantanément sans recharger l'application.

Pour en savoir plus sur l'utilisation de l'application Outils de développement de React ici .

Réagissez le débogueur natif

Si vous utilisez Redux dans votre application React Native, réactivez le débogueur natif est probablement le bon débogueur. Il s’agit d’une application de bureau autonome fonctionnant sous macOS, Windows et Linux. Il intègre à la fois les outils DevTools de Redux et les outils de développement de React dans une seule application, vous évitant ainsi de 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 mon travail avec React Native. Il a une interface pour les outils de développement de Redux où vous pouvez voir les journaux et les actions de Redux, ainsi qu’une interface pour les outils de développement de React où vous pouvez inspecter et déboguer les éléments de React. Vous pouvez trouver les instructions d'installation ici . Vous pouvez vous connecter à ce débogueur de la même manière que vous ouvrez l’inspecteur de Chrome.

L’utilisation de React Native Debugger sur les outils de développement de Chrome présente certains avantages. Par exemple, vous pouvez basculer l'inspecteur du menu Dev pour inspecter les éléments React Native et modifier les styles, ce qui n'est pas disponible dans l'outil de développement de Chrome.

React Native CLI

Vous pouvez utiliser la CLI React Native pour effectuer un débogage. ainsi que. Vous pouvez l'utiliser pour afficher les journaux de l'application. Frapper réagit natif log-android vous montrera les journaux de db logcat sur Android, et pour afficher les journaux dans iOS, vous pouvez exécuter réagir-natif log-ios et avec console.log vous pouvez envoyer des journaux au terminal:

 console.log ("une erreur?")

Vous devriez alors voir les journaux dans le terminal.

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

Vous pouvez utiliser cette information pour corriger certains bugs causés par la version. les incompatibilités d'un outil que vous utilisez dans votre projet, il est donc toujours utile de vérifier les informations sur l'environnement à l'aide de cette commande.

Résumé

Il existe de nombreux outils pour le débogage de React Native en plus de ceux que nous avons examiné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 qu'il combine une multitude d'outils dans une seule application, ce qui est génial et permet de gagner du temps.

Veuillez cliquer sur . si vous souhaitez en savoir plus sur les outils de débogage de React Native et sur React Native en général.

Said est un développeur front-end, un rédacteur technique et un instructeur basé à New York.