Comment déboguer React Native?
Comment déboguer leur code React avec React Native lorsque l'application est exécutée dans le simulateur d'application?
Cmd+D depuis le simulateur. Il va ouvrir Chrome et à partir de là, vous pouvez utiliser les outils de développement.
Modifier:
Ceci est maintenant lié dans le aide .
Débogage d'applications natives réactives
Pour déboguer le code javascript de votre application react, procédez comme suit:
- Exécutez votre application dans le simulateur iOS.
- Appuyez sur
Command + Det une page Web devrait s'ouvrir à http: // localhost: 8081/debugger-ui . (Chrome seulement pour l'instant) ou utilisez leShake Gesture - Activer Pause sur les exceptions capturées pour une meilleure expérience de débogage.
- Appuyez sur
Command + Option + Ipour ouvrir les outils de développement Chrome ou viaView->Developer->Developer Tools. - Vous devriez maintenant pouvoir déboguer comme vous le feriez normalement.
Optionnel
Installez le React Developer Tools extension pour Google Chrome. Cela vous permettra de naviguer dans la hiérarchie des vues si vous sélectionnez l'onglet React lorsque les outils de développement sont ouverts.
Live Recharger
Pour activer Live Reload, procédez comme suit:
- Exécutez votre application dans le simulateur iOS.
- Appuyez sur
Control + Command + Z. - Vous verrez maintenant les options
Enable/Disable Live Reload,ReloadetEnable/Disable Debugging.
Si vous utilisez Genymotion pour une application Android, vous pouvez changer de menu en appuyant sur CMD + m, mais vous devrez peut-être l'activer dans le menu en procédant ainsi.
- Décocher widget
- Activez-le par
CMD + mcliquez sur debug in chrome
cmd ⌘ + D curieusement, cela n'a pas fonctionné pour moi. Pressage ctrl + cmd ⌘ + Z dans le simulateur iOS a ouvert la fenêtre du navigateur de débogage pour moi.
Voici l'écran qui apparaît:
En plus des autres réponses. Vous pouvez déboguer react-native en utilisant la déclaration du débogueur
exemple:
debugger; //breaks execution
Vos outils de développement chrome doivent être ouverts pour que cela fonctionne
Essayez ce programme: https://github.com/jhen0409/react-native-debugger
Fonctionne sur: windows, osx et linux.
Il supporte: react native et redux
Vous pouvez également inspecter l'arborescence des composants virtuels et modifier les styles reflétés dans l'application.
si vous voulez déboguer avec un appareil Android sous Windows, ouvrez simplement une invite de commande, puis tapez (assurez-vous que votre annonce fonctionne correctement)
adb Shell input keyevent 82
un écran semblable à l’image apparaîtra 
puis sélectionnez
debug JS Remotely
cela ouvrira automatiquement une nouvelle fenêtre. ouvrez ensuite l'élément inspect ou appuyez sur F12 pour la console.
Le débogage de react-native 0.40.0 sur Debian 8 (Jessie) peut être effectué en accédant à http: // localhost: 8081/debugger-ui dans Chromium ou Firebug lorsque votre application est exécutée dans le simulateur Android. Pour accéder au menu du développeur intégré à l'application, exécutez la commande suivante dans une autre fenêtre de terminal, comme indiqué par here :
adb Shell input keyevent 82
Je n'ai pas assez de réputation pour commenter les réponses précédentes qui sont excellentes. :) Voici quelques-unes des méthodes utilisées pour déboguer lors du développement de l'application react-native.
Rechargement en direct
react-native facilite la visualisation de vos modifications avec les touches + R ou même simplement enable live reload. Watchman actualisera le simulateur avec les dernières modifications. 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 fonctionnement et recommenceront.
console.log('yeah, seriously.')Je préfère me laisser laisser exécuter le programme et enregistrer certaines informations que d’ajouter un point de rupture
debugger. (Le débogueur difficile est utile lorsque vous essayez de travailler avec des paquetages/bibliothèques externes et vient avec l'auto-complétion, vous permettant ainsi de savoir quelles autres méthodes vous pouvez utiliser.)Enable Chrome Debuggingwithdebugger;point de rupture dans votre programme.
Cela dépend du type d’erreur que vous avez rencontré et de vos préférences en matière de débogage. Pour la plupart des undefined is not an object (evaluating 'something.something'), les méthodes 1 et 2 me suffiront.
Considérant que traiter avec des bibliothèques externes ou des paquets écrits par d’autres développeurs nécessitera plus d’efforts pour déboguer, un bon outil comme Chrome Debugging
Parfois, cela vient de la plate-forme native native rea lui-même, il est donc utile de rechercher des problèmes natifs sur réactifs.
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.
Pour moi, le meilleur moyen de déboguer sur React-Native consiste à 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 ne vous reste plus qu'à vous connecter à votre code . Exemple: console.tron.log('debug')
- Exécutez votre application dans un simulateur - réactif natif run-ios
- Appuyez sur ctrl + d et cliquez sur Debug JS à distance
- la page Web devrait s'ouvrir à http: // localhost: 8081/debugger-ui , sinon, tapez l'URL et accédez à ce lien dans Chrome
- Faites un clic droit sur la page et cliquez sur Inspecter pour ouvrir les outils de développement pour chrome.
Allez aux sources dans le menu du haut 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 y déboguer le code, comme vous pouvez le voir dans l'image.
Au lieu de Cmd+M, pour Android Emulator Press F10 sous Windows. L'émulateur commence à afficher toutes les options de débogage de reag-native.
Si vous utilisez Microsoft Visual Code, installez l'extension React Native Tools. Vous pouvez ensuite ajouter des points d'arrêt en cliquant simplement sur le numéro de ligne souhaité. Suivez les étapes suivantes pour configurer et déboguer une application: 
N'oubliez pas d'activer Debug JS à distance dans l'émulateur si vous l'utilisez.
Pour une application Android, appuyez sur Ctrl + M, sélectionnez debug js à distance. Une nouvelle fenêtre chromée apparaît avec url http: // localhost: 8081/debugger-ui . Vous pouvez maintenant déboguer l'application dans le navigateur Chrome
Avoir un espace dans le chemin du fichier empêche la Cmd+D de travailler. J'ai déplacé mon projet vers un emplacement sans espace et j'ai enfin réussi à faire fonctionner le débogueur Chrome. On dirait un bug .
Par défaut, mon simulateur ios ne captait pas les touches, raison pour laquelle cmd-D n'a pas fonctionné. J'ai dû activer les paramètres du clavier à l'aide du menu du simulateur:
Matériel> Clavier> Connecter le clavier
Maintenant, cmd-D lance le débogage chromé.
En supposant que vous souhaitiez afficher ce menu sur émulateur Android 
Ensuite, essayez
⌘+mpour ouvrir cette boîte de dialogue des paramètres de développement sur l'émulateur Android sur un Mac.S'il ne s'affiche pas, passez à
AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box.![enter image description here]()
Et puis réessayez
⌘+m.S'il ne s'affiche toujours pas, accédez aux paramètres de l'émulateur en cours d'exécution et, dans la liste déroulante
Send keyboard shortcuts to, sélectionnez l'optionEmulator controls (default).
Et puis réessayez
⌘+m._ {J'espère que cela aide, cela a fonctionné pour moi.} _
Très simple juste deux commandes
For IOS $ react-native log-ios
For Android $ react-native log-Android
Si vous utilisez Redux, je recommande vivement React Native Debugger. Il inclut Chrome devtools, mais aussi Redux devtools et React devtools.
Redux Devtools : Ceci vous permet de visualiser vos actions et d’aller de l’avant. Il vous permet également de visualiser votre magasin redux et dispose d'une fonctionnalité permettant de différer automatiquement l'état précédent avec l'état mis à jour pour chaque action. Vous pouvez ainsi le voir lorsque vous parcourez une série d'actions.
React Devtools : Ceci vous permet d'inspecter un composant donné, à savoir tous ses accessoires ainsi que son état. Si vous avez un élément 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 mettre en pause le débogueur. etc. Fonctionnalités de débogage standard. Si vous cliquez avec le bouton droit sur la zone dans laquelle vos actions sont répertoriées dans Redux Devtools et que vous sélectionnez "Autoriser l'inspection du réseau", vous pouvez alors inspecter vos appels d'API dans l'onglet Réseau de Chrome Devtools, ce qui est très pratique.
En conclusion, avoir tout cela au même endroit est fantastique! Si vous n'en avez pas besoin, vous pouvez l'activer ou le désactiver. Obtenez React Native Debugger et profitez de la vie.
Pour Android: Ctrl + M (émulateur) ou Secouez le téléphone (In Device) pour afficher le menu.
Pour iOS: Cmd + D ou Shake the Phone pour afficher le menu.
Assurez-vous d'avoir du chrome.
Dans le menu révélé, sélectionnez Option de débogage JS à distance.
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 enregistrés.
C'est le moyen alternatif d'utiliser le débogueur réactif natif.
vous pouvez télécharger une application en utilisant le lien ci-dessous, c’est une très bonne application pour gérer redux store avec le code source.
vous pouvez aussi utiliser directement le lien ci-dessous pour vous aider.
Il existe également un très bon nom de débogueur Reactotron . https://github.com/infinitered/reactotron
Vous n'avez pas besoin d'être en mode débogage pour voir des données et il y a beaucoup d'options.
allez jeter un oeil qui est vraiment utile. ;)
Dans React-Native, le débogage est beaucoup plus facile.
- Pour déboguer dans IOS, utilisez
cmd + d
ctrl + cmd + z (pour simulateur)
- Déboguer sous Android
Secouez l'appareil avec touch (assurez-vous que votre option de développeur est activée)
pour déboguer votre application native, réagissez simplement à l'adresse suivante:
localhost: 8081/debugger-ui dans votre navigateur par défaut (chrome) et ouvrez des outils de développement pour déboguer votre application native native
C'est en fait assez simple. Appuyez simplement sur cmd D (si sur mac) et le simulateur créera un menu contextuel. À partir de là, cliquez simplement sur "Déboguer JS à distance" ou quelque chose du genre. Attention, l'exécution du débogueur lors de l'exécution du code associé à certains packages est connue pour causer des problèmes aux utilisateurs. J'ai eu un problème avec react-native-maps et le débogueur. Mais c'était réglé. Pour la plupart, ça devrait aller.
Le meilleur moyen de déboguer les applications natives pour Android et ios en utilisant Visual Code Studio
Étape 1.
Installer React Native - Pack complet extension
Étape 2.
Connectez l'appareil mobile en utilisant Mode de débogage USB ou ouvrez l'émulateur depuis le studio Android.
Étape 3.
Cliquez sur l'option de débogage dans le menu de gauche dans Visual Code Studio. Cliquez sur Ajouter une configuration et sélectionnez Réagir natif puis créez launch.json
Étape 4.
Ouvrez l'option de dev dans le téléphone sur le dossier long appuyez ou secouez le téléphone et activez Débogage js à distance
Étape 5.
Dernière étape, cliquez sur le bouton de lecture et sélectionnez Debug Android ou Debug ios
Pour plus d'informations, consultez ce lien.
https://medium.com/@tunvirrahmantusher/Android-debug-with-vscode-for-react-native-96f54d73462a
Si vous utilisez un émulateur Ctrl+M et simulateur Cmd+D
Cliquez sur le - Débogage js à distance
Google Chrome aller à la console
Vous pouvez installer React Native Debugger à partir de brew. il est plus confortable à utiliser que le débogueur en chrome
Étape 1: Placez debugger où que vous souhaitiez arrêter le script, par exemple:
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 parviendra à ce bloc de code.
Étape 2: Appuyez sur Cmd+D sur ios émulateur et Cmd+M sur simulateur Android . Si vous avez un périphérique réel, secouez-le pour ouvrir le menu dev. ne veut pas secouer appareil suivre ce blog
Étape 3: Sélectionnez Enable Remote JS Debugging, cela ouvrira Chrome
Étape 4: Sélectionnez Developer Tools.
Étape 5: Votre débogueur est suspendu dans l’onglet Sources partout où vous avez écrit debugger dans votre code. Accédez à la console et tapez tous les paramètres que vous souhaitez déboguer (présents dans le bloc de code), par exemple: 
Pour passer au point de débogage suivant, sélectionnez à nouveau Sources -> cliquez sur le bouton Reprendre l'exécution du script (bouton bleu dans le coin droit)
Placez le débogueur, où vous voulez mettre le script en pause.
Profitez du débogage !!
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: Lancer une application React Native avec "Debug JS Remote" activé par défaut
J'utilise cette bibliothèque pour déboguer des projets natifs de réaction
https://github.com/jhen0409/react-native-debugger Il comprend
- Inclut l'inspecteur de réaction de react-devtools-core.
- Inclut Redux DevTools, créé par la même API avec redux-devtools-extension.
ou vous pouvez utiliser
For IOS $ react-native log-ios
For Android $ react-native log-Android
Sous Windows et en utilisant l'émulateur Android, vous pouvez effectuer les étapes suivantes:
- Une fois que l'émulateur est en cours d'exécution et que l'application est dessus, appuyez sur le bouton Menu, puis sélectionnez "Debug JS Remotely" ou "Debug in Chrome" (Cela dépend de l'émulateur utilisé). Vous pouvez voir l'image suivante comme référence: emulator with steps image
- Un nouvel onglet Chrome apparaîtra. Vous devez appuyer sur Ctrl + ⇧J pour afficher les outils de développement et commencer à suivre les étapes de débogage. Voir cette image comme référence
De plus, vous devriez utiliser la fonction console.log() pour rendre le processus de débogage plus descriptif.
Vous pouvez utiliser Safari pour déboguer la version iOS de votre application sans avoir à activer "Débogage 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
Vous pouvez également utiliser la bibliothèque personnalisée pour cela si vous ne voulez pas secouer votre vrai téléphone toutes les 2 minutes.
J'ai créé une bibliothèque qui vous permet d'utiliser 3 doigts au lieu de secouer pour ouvrir le menu dev, en mode développement
https://github.com/pie6k/react-native-dev-menu-on-touch
Vous devez seulement envelopper votre application à l'intérieur:
importer DevMenuOnTouch de 'réagir-native-dev-menu-tactile';; // ou: importer {DevMenuOnTouch} de 'réagir-native-dev-menu-tactile'
class YourRootApp extends Component {
render() {
return (
<DevMenuOnTouch>
<YourApp />
</DevMenuOnTouch>
);
}
}
C'est vraiment utile lorsque vous devez déboguer sur un périphérique réel et que des collègues sont assis à côté de vous.
Si vous exécutez votre application sur de vrais appareils connectés à un ordinateur portable, vous pouvez la déboguer via un terminal à l'aide de react-native log-ios ou react-native log-Android (cela fonctionne également pour les simulateurs).
Dans la nouvelle version de react-native, vous pouvez utiliser react-native log-Android ou react-native log-Android pour afficher les journaux de votre application en mode dev.
- exécuté dans le terminal
adb logcat *:S ReactNative:V ReactNativeJS:V - ouvrir un projet dans Android Studio, ouvrir
logcat(bouton en bas de l'écran). - exécuté dans le terminal
react-native run-Android
Après la construction, vous devez voir les journaux de détail dans Android Studio dans logcat.
Vous pouvez utiliser expo pour le débogage: https://expo.io/
Expo permet aux développeurs Web de créer de véritables applications natives qui fonctionnent à la fois iOS et Android en les écrivant une fois en JavaScript. C'est ouvert source, libre et utilise React Native.
C'est un excellent outil et vous pouvez regarder cet atelier à la conférence React Europe:
Cela dépend vraiment de ce que je fais. Si je suis en train de modifier ou de déboguer l’UI, j’active généralement le rechargement à chaud et à chaud et je fais les changements nécessaires pour obtenir un retour instantané. Si c'est quelque chose de plus technique, j'active le débogage de JS pour examiner l'état de l'application. Cependant, parce que le rechargement est si rapide en mode natif, si l'état est trop compliqué, je console simplement le journal.
Une technique très similaire à une tactique de débogage sous Android que j'utilise consiste à inclure une variable globale appelée TAG dans tous mes fichiers .js.
const TAG = 'APP_NAME+SCREEN_NAME';
Ensuite, le cas échéant, je ferai: console.log(TAG + 'ACTION');
De cette façon, je peux suivre les actions et voir d'où proviennent les instructions du journal.
Réagissez le débogueur natif. Cela m'aide à résoudre 90% de mes problèmes