Comment déboguer leur code React avec React Native pendant que l'application s'exécute dans le simulateur d'application?
Comment déboguer leur code React avec React Native pendant que l'application s'exécute dans le simulateur d'application?
Réponses:
Cmd+Ddepuis l'intérieur du simulateur. Cela fera apparaître Chrome et à partir de là, vous pouvez utiliser les outils de développement.
Éditer:
Ceci est maintenant lié dans les documents d'aide .
Cmd+M
sur OS X et Android
Pour déboguer le code javascript de votre application React, procédez comme suit:
Command + D
et une page Web devraient s'ouvrir à http: // localhost: 8081 / debugger-ui . (Chrome uniquement pour l'instant) ou utilisez leShake Gesture
Command + Option + I
pour ouvrir les outils Chrome Developer ou ouvrez-le via View
-> Developer
-> Developer Tools
.Installez l' extension React Developer Tools pour Google Chrome. Cela vous permettra de naviguer dans la hiérarchie des vues si vous sélectionnez l' React
onglet lorsque les outils de développement sont ouverts.
Pour activer Live Reload, procédez comme suit:
Control + Command + Z
.Enable/Disable Live Reload
, Reload
et les Enable/Disable Debugging
options.Pour une application Android, si vous utilisez Genymotion, vous pouvez basculer le menu en appuyant sur CMD + m
, mais vous devrez peut-être l'activer dans le menu en procédant ainsi.
CMD + m
cliquant sur déboguer dans Chromedebug in chrome
est remplacé par start debug remotely
.
cmd + m
ou ctrl + m
et sélectionner start debug remotely
dans les fenêtres contextuelles de votre simulateur
En plus des autres réponses. Vous pouvez déboguer en natif réactif à l'aide de l'instruction de débogage
exemple:
debugger; //breaks execution
Vos outils de développement Chrome doivent être ouverts pour que cela fonctionne
si vous souhaitez déboguer à l'aide d'un appareil Android sous Windows, ouvrez simplement une invite de commande, puis tapez (assurez-vous que votre adb fonctionne correctement)
adb shell input keyevent 82
il affichera un écran comme l'image
puis sélectionnez
debug JS Remotely
il ouvrira automatiquement une nouvelle fenêtre. puis ouvrez l'élément d'inspection ou appuyez sur F12 pour la console.
Essayez ce programme: https://github.com/jhen0409/react-native-debugger
Fonctionne sur: windows
, osx
et linux
.
Il prend en charge: react native
etredux
Vous pouvez également inspecter l'arborescence des composants virtuels et modifier les styles qui se reflètent dans l'application.
console.log(url)
, mais je ne trouve pas où se trouve la sortie.
cmd ⌘+ Dbizarrement, ça n'a pas marché pour moi. Appuyer sur ctrl+ cmd ⌘+ Zdans le simulateur iOS a déclenché la fenêtre du navigateur de débogage pour moi.
Voici l'écran qui apparaît:
Le débogage de natif réactif 0.40.0 sur Debian 8 (Jessie) peut être effectué en accédant à http: // localhost: 8081 / debugger-ui dans Chromium ou Firebug pendant que votre application s'exécute dans le simulateur Android. Pour accéder au menu développeur intégré à l'application, exécutez la commande suivante dans une autre fenêtre de terminal, comme indiqué ici :
adb shell input keyevent 82
Je n'ai pas assez de réputation pour commenter les réponses précédentes qui sont super. :) Voici quelques façons de déboguer lors du développement d'une application native native.
Rechargement en direct
react-native rend super facile à voir vos changements avec les touches ⌘ + R ou même juste activer le rechargement en direct et watchman "rafraîchira" le simulateur avec les derniers changements. Si vous obtenez une erreur, vous pouvez obtenir un indice à partir du numéro de ligne de cet écran rouge. Quelques annulations vous ramèneront à l'état de travail et recommenceront.
console.log('yeah, seriously.')
Je préfère laisser le programme s'exécuter et enregistrer certaines informations plutôt que d'ajouter un debugger
point d'arrêt. (Un débogueur difficile est utile lorsque vous essayez de travailler avec des packages / bibliothèques externes et il est fourni avec la saisie semi-automatique, donc vous savez quelles autres méthodes vous pouvez utiliser.)
Enable Chrome Debugging
avec debugger;
point d'arrêt dans votre programme.
Cela dépend du type d'erreurs que vous avez rencontrées et de vos préférences sur la façon de déboguer. Pour la plupart des undefined is not an object (evaluating 'something.something')
, les méthodes 1 et 2 me suffiront.
Alors que traiter des bibliothèques externes ou des packages écrits par d'autres développeurs nécessitera plus d'efforts pour déboguer, donc un bon outil comme Chrome Debugging
Parfois, cela vient de la plate-forme React-native elle-même, donc la recherche de problèmes React-Native sera certainement utile.
espérons que cela aide quelqu'un là-bas.
adb logcat *:S ReactNative:V ReactNativeJS:V
exécutez ceci dans le terminal pour le journal Android.
Si vous utilisez Microsoft Visual Code, installez l'extension React Native Tools. Ensuite, vous pouvez ajouter des points d'arrêt simplement en cliquant sur le numéro de ligne souhaité. Suivez ces étapes pour configurer et déboguer l'application:
N'oubliez pas d'activer Debug JS à distance dans l'émulateur si vous l'utilisez.
Pour Android: Ctrl + M (émulateur) ou Secouez le téléphone (dans l'appareil) pour révéler le menu.
Pour iOS: Cmd + D ou Secouez le téléphone pour révéler le menu
Assurez-vous d'avoir du chrome.
Dans le menu révélé, sélectionnez Debug JS Remotely Option.
Chrome sera ouvert automatiquement sur localhost: 8081 / debugger-ui. Vous pouvez également accéder manuellement au débogueur avec ce lien.
Il révèle la console et vous pouvez voir les journaux être notés.
Pour moi, la meilleure façon de déboguer sur React-Native est d'utiliser "Reactotron" .
Installez Reactotron puis ajoutez-les à votre package.json:
"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2",
maintenant, il suffit de se connecter à votre code. par exemple:console.tron.log('debug')
Allez aux sources dans le menu supérieur et trouvez votre fichier de classe js dans l'explorateur de fichiers de droite
Vous pouvez placer des points d'arrêt dans la vue et déboguer le code comme vous pouvez le voir dans l'image.
Pour l'application Android .Appuyez sur Ctrl + M sélectionnez déboguer js à distance, cela ouvrira une nouvelle fenêtre en chrome avec l'URL http: // localhost: 8081 / debugger-ui . Vous pouvez maintenant déboguer l'application dans le navigateur Chrome
Si vous souhaitez activer le débogage par défaut:
import { NativeModules } from 'react-native';
if (__DEV__) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}
Pour que cela fonctionne sur Android:
npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android
Référence: Lancez une application React Native avec «Debug JS Remotely» activé par défaut
En supposant que vous souhaitez afficher ce menu sur l' émulateur Android
Ensuite, essayez ⌘+m
d'afficher cette boîte de dialogue des paramètres de développement sur l'émulateur Android sur un Mac.
Si cela ne s'affiche pas, allez à AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box
.
Et puis réessayez ⌘+m
.
S'il ne s'affiche toujours pas, accédez aux paramètres de l'émulateur en cours et dans la zone de Send keyboard shortcuts to
liste déroulante / liste déroulante, puis sélectionnez l' Emulator controls (default)
option.
Et puis réessayez ⌘+m
.
J'espère que cela aide, cela a fonctionné pour moi.
Si vous utilisez Redux, je recommande fortement React Native Debugger. Il comprend Chrome devtools, mais a également Redux devtools et React devtools.
Redux Devtools : Cela vous permet de visualiser vos actions et de les parcourir d'avant en arrière. Il vous permet également d'afficher votre magasin redux et dispose d'une fonction pour différencier automatiquement l'état précédent de l'état mis à jour pour chaque action, de sorte que vous pouvez le voir lorsque vous faites un va-et-vient dans une série d'actions.
React Devtools : Cela vous permet d'inspecter un certain composant, à savoir tous ses accessoires ainsi que son état. Si vous avez un morceau de l'état du composant qui est un booléen, il vous permet de cliquer dessus pour le basculer et voir comment votre application réagit lorsqu'elle change. Grande fonctionnalité.
Chrome Devtools Vous permet de voir toutes les sorties de votre console, d'utiliser des points d'arrêt, de faire une pause sur le débogueur; etc. Fonctions de débogage standard. Si vous cliquez avec le bouton droit sur la zone où vos actions sont répertoriées dans Redux Devtools et sélectionnez "Autoriser l'inspection du réseau", vous pouvez ensuite inspecter vos appels d'API dans l'onglet réseau de Chrome Devtools qui est doux.
En conclusion, avoir tout cela en un seul endroit est fantastique! Si vous n'en avez pas besoin, vous pouvez l'activer / le désactiver. Obtenez React Native Debugger et profitez de la vie.
Il s'agit de l'autre manière d'utiliser l'application de débogage native de react.
vous pouvez télécharger l'application en utilisant le lien ci-dessous, c'est une très bonne application pour gérer le magasin redux avec le code source.
ainsi maintenant quelques jours, vous pouvez utiliser directement le lien ci-dessous pour vous aider.
Si vous utilisez l'émulateur, utilisez Ctrl+ Met simulateur Cmd+D
Cliquez sur le - Déboguer js à distance
Google Chrome va à la console
Il existe également un très bon débogueur nommé Reactotron. https://github.com/infinitered/reactotron
Vous n'avez pas besoin d'être en mode débogage pour voir une valeur de données et il y a beaucoup d'options.
allez jeter un œil vraiment utile. ;)
Dans React-Native, le débogage est beaucoup plus facile.
cmd + d
ctrl + cmd + z (pour simulateur)
Secouez l'appareil avec le toucher (assurez-vous que votre option de développeur est activée)
Étape 1:
placez debugger
où vous voulez arrêter le script, comme:
async saveItem(item, selectedValue) {
debugger
try {
await AsyncStorage.setItem(item, selectedValue);
}
catch (error) {
console.error('AsyncStorage error: ' + error.message);
}
}
Cela mettra le débogueur en pause chaque fois que le contrôle viendra sur ce bloc de code.
Étape 2:
Appuyez Cmd+D
sur l' émulateur ios et Cmd+M
sur le simulateur Android . Si vous avez un vrai appareil, secouez l'appareil pour ouvrir le menu de développement, si vous ne voulez pas secouer l'appareil suivez ce blog
Étape 3:
Sélectionnez Enable Remote JS Debugging
, cela ouvrira Chrome
Étape 4:
SélectionnezDeveloper Tools.
Étape 5:
Votre débogueur est mis en pause dans l' Sources
onglet où vous avez écrit debugger
dans votre code. Accédez à la console et tapez tous les paramètres que vous souhaitez déboguer (qui sont présents dans le bloc de code) comme:
Pour passer au point de débogage suivant, déplacez-vous à nouveau vers Sources -> cliquez sur le bouton Reprendre l'exécution du script (bouton bleu dans le coin droit)
Placez le débogueur, partout où vous souhaitez suspendre le script.
Profitez du débogage !!
Vous pouvez utiliser Safari pour déboguer la version iOS de votre application sans avoir à activer "Debug JS à distance", suivez simplement les étapes suivantes:
1. Enable Develop menu in Safari: Preferences → Advanced → Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
Tout d'abord dans votre simulateur ios, si vous appuyez sur la touche [commande + D], vous pouvez voir cet écran.
Cliquez ensuite sur le bouton Déboguer JS à distance.
Après avoir vu la page React Native Debugger comme celle-ci.
Et puis ouvrez votre inspecteur [f12], et allez dans l'onglet console le déboguer! :)
Flipper est un outil de débogage Android et iOS Mobile sans utiliser le mode de débogage en mode natif React.
Depuis RN 0.62 (voir ce lien ), Flipper est initialisé avec le projet par défaut.
Flipper a quelques plugins pour le débogage. Les plugins Layout
, Network
,Shared preferences
Le plus grand avantage de Flipper n'est pas aussi de nombreux plugins, mais vous pouvez également voir le débogage de la console de l'appareil Android / iOS facilement.
Le Flipper vous alerte également en cas de panne ou de rejet du réseau.
Le plugin de mise en page comprend le mode d'accessibilité et le mode cible.
Vous pouvez également voir les demandes / réponses brutes du réseau dans votre application.