Comment déboguer Réagir Natif?

Cmd+d de L'intérieur du simulateur. Il apparaîtra sur Chrome et de là, vous pouvez utiliser les outils de développement.

Edit:

Ceci est maintenant lié dans le aide docs .

Débogage De Réagir À Des Applications Natives

pour déboguer le code javascript de votre application react faites ce qui suit:

1. lancez votre application dans le simulateur iOS.
2. appuyez sur Command + D et une page web devrait s'ouvrir à http://localhost:8081/debugger-ui . (Chrome seulement pour le moment) ou utiliser le Shake Gesture
3. Enable Pause Sur Les Exceptions Capturées pour une meilleure expérience de débogage.
4. presser Command + Option + I pour ouvrir les outils de développement Chrome, ou l'ouvrir via View -> Developer -> Developer Tools .
5. vous devriez maintenant être en mesure de déboguer comme vous le feriez normalement.

optionnel

installez l'extension React Developer Tools pour Google Chrome. Cela vous permettra de naviguer dans la vue hiérarchie si vous sélectionnez l'onglet React lorsque les outils de développement sont ouverts.

Live Reload

pour activer le rechargement en direct faire ce qui suit:

1. lancez votre application dans le simulateur iOS.
2. Appuyez sur Control + Command + Z .
3. vous pouvez maintenant voir les options Enable/Disable Live Reload , Reload et Enable/Disable Debugging .

Pour une Application Android, si vous utilisez Genymotion vous pouvez activer / désactiver le menu en appuyant sur CMD + m , mais vous devez l'activer dans le menu en faisant cela.

• Décocher widget
• activer par CMD + m cliquer sur déboguer dans chrome

En plus des autres réponses. Vous pouvez débugger react-native en utilisant la déclaration de débugger

exemple:

debugger; //breaks execution

vos outils chrome dev doivent être ouverts pour que cela fonctionne""

cmd փ փ փ փ + D փ oddly didn't work for me. Le fait d'appuyer sur Ctrl + cmd pontage + Z dans le simulateur iOS a déclenché la fenêtre du navigateur de débogage pour moi.

C'est l'écran qui apparaît:

plus de détails ici.

essayez ce programme: https://github.com/jhen0409/react-native-debugger

: windows , osx et linux .

il supporte: react native et redux

vous pouvez également inspecter l'arbre des composants virtuels et modifier les styles qui sont reflétés dans l'application.

débogage react-native 0.40.0 sur Debian 8 (Jessie) peut être fait en naviguant sur http://localhost:8081/debugger-ui en chrome ou Firebug pendant que votre application est en cours d'exécution dans le simulateur android. Pour accéder au menu in-app developer, 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 grands. :) Voici quelques - unes des façons dont je débogue lors du développement de react-native app.

1. rechargement en direct

   react-native rend il super facile de voir vos changements avec les touches PCI + R ou tout simplement activer live reload et watchman va "rafraîchir" le simulateur avec la dernière changement. Si vous obtenez une erreur, vous pouvez obtenir un indice à partir du numéro de ligne de cet écran rouge. Un couple d'undo vous ramènera à l'état de travail et recommencer.

2. console.log('yeah, seriously.')

   je préfère laisser le programme tourner et enregistrer quelques informations plutôt que d'ajouter un point d'arrêt debugger . (le débogueur difficile est utile quand on essaye de travailler avec des paquets/bibliothèques externes et il est livré avec autocompletion, donc vous savez quelles autres méthodes vous pouvez utiliser.)

3. Enable Chrome Debugging avec debugger; point de rupture dans votre programme.

Cela dépend du type d'erreurs que vous avez rencontrées et de vos préférences quant à 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.

attendu que traiter avec des bibliothèques externes ou des paquets écrits par d'autres développeurs exigera plus d'efforts pour déboguer d'où un bon outil comme Chrome Debugging

parfois, il vient de la plateforme react-native elle-même donc googler pour les questions react-native aidera certainement.

j'espère que ça aidera quelqu'un là-bas.

si vous voulez déboguer en utilisant l'appareil android sur Windows juste ouvrir une invite de commande puis taper ( assurez-vous que votre Bad fonctionne correctement)

adb shell input keyevent 82

il invite un écran comme l'image

puis sélectionner

debug JS Remotely

il ouvrira automatiquement une nouvelle fenêtre.ouvrez ensuite l'élément inspecter ou appuyez sur F12 pour la console.

1. Exécuter votre application sur simulateur - réagir-exécution natif ios
2. appuyez sur ctrl + d et cliquez sur Debug js Remote

1. la page web devrait s'ouvrir à http://localhost:8081/debugger-ui , si ce n'est pas Tapez L'URL et allez à ce lien dans Chrome
2. clic droit sur la page et cliquez inspecter et il devrait ouvrir les outils de développement pour chrome

3. allez aux sources dans le menu du haut et trouvez votre fichier de classe js dans l'Explorateur de fichiers de droite

4. Vous pouvez mettre des points d'arrêt à la vue et déboguer le code là comme vous pouvez le voir dans l'image.

adb logcat *:S ReactNative:V ReactNativeJS:V

exécutez ceci dans le terminal pour android log.

pour moi, la meilleure façon de déboguer sur React-Native est d'utiliser " Reactotron " .

installez Reactotron puis ajoutez - les à votre paquet.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')

pour android app .Appuyez sur Ctrl+M sélectionnez debug JS à distance il ouvrira une nouvelle fenêtre dans chrome avec url http://localhost:8081/debugger-ui . Vous pouvez maintenant déboguer l'application dans chrome browser

par défaut, mon simulateur ios ne détectait pas les touches, ce qui explique pourquoi le cmd-d ne fonctionnait pas. J'ai dû activer les réglages du clavier en utilisant le menu du simulateur:

Matériel > Clavier > Connecter Un Clavier

maintenant cmd-d lance le débogage chrome.

ayant un espace dans le chemin de fichier empêche le Cmd + d de fonctionner. J'ai déménagé mon projet dans un endroit sans espace et j'ai finalement réussi à faire fonctionner le débogueur Chrome. On dirait un bug .

en supposant que vous voulez afficher ce menu sur émulateur Android

• ensuite, essayez ⌘+m pour faire apparaître ce dialogue dev settings sur L'émulateur Android sur un Mac.

• si elle ne s'affiche pas, allez à AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box .

• puis réessayez ⌘+m .

• si elle ne s'affiche pas encore, allez aux paramètres de l'émulateur en cours d'exécution et sur le combobox/dropdown Send keyboard shortcuts to , sélectionnez l'option Emulator controls (default) .

• puis réessayez ⌘+m .

• j'espère que ça va aider, ça a marché pour moi.

très simple juste deux commandes

For IOS $ react-native log-ios
For Android $ react-native log-android

si vous utilisez le code visuel de Microsoft , installez alors L'extension React Native Tools. Ensuite, vous pouvez ajouter des points de rupture simplement en cliquant sur le numéro de ligne désiré. Suivez ces étapes pour configurer et déboguer l'application :

N'oubliez pas d'activer le Débogage JS à Distance dans l'émulateur si vous l'utilisez.

si vous utilisez Redux,je recommande fortement le débogueur natif React. Il comprend des devtools de Chrome, mais a aussi Redux devtools et React devtools.

Redux Devtools : cela vous permet de voir vos actions, et de faire des allers-retours à travers eux. Il vous permet également de voir votre magasin redux et dispose d'une fonctionnalité pour différencier automatiquement l'état précédent avec l'état mis à jour pour chaque action, de sorte que vous pouvez voir que vous marchez en va-et-vient à travers une série d'actions.

React Devtools : cela vous permet d'inspecter un certain composant, à savoir tous ses accessoires ainsi que son état de Composant. Si vous avez un morceau de l'état composant qui est un booléen, il vous permet de le cliquer pour le basculer et voir comment votre application réagit quand il change. Grande fonctionnalité.

Chrome Devtools vous permet de voir toutes les sorties de votre console, utiliser les points d'arrêt, pause sur débogueur; etc. Fonctions de débogage Standard. Si vous cliquez avec le bouton droit de la souris sur la zone où vos actions sont listées dans Redux Devtools et sélectionnez "Autoriser L'inspection réseau", vous pouvez alors inspecter vos appels 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/désactiver. Obtenir Réagir Débogueur Natif et profiter de la vie.

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 Secouer le Téléphone pour révéler menu

assurez-vous d'avoir du chrome.

dans le menu révélé, sélectionnez Debug js Remote Option.

Chrome sera ouvert automatiquement à localhost: 8081 / debugger-ui. Vous pouvez aussi aller manuellement au débogueur avec ce lien.

il révèle console et vous pouvez voir les journaux de noter.

il y a aussi 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 une valeur de données et il y a beaucoup d'options.

allez jeter un oeil, c'est vraiment utile. ;)

1. si vous utilisez un émulateur, utilisez Ctrl + M & simulator Cmd + D

"

2. Cliquez sur le Débogage js à distance

3. Google Chrome aller à la console

c'est en fait assez simple. Appuyez simplement sur cmd D (SI sur mac) et le simulateur créera un menu pop up. De là, il suffit de cliquer sur "Debug js Remote" ou quelque chose du genre. Attention, exécuter le débogueur pendant l'exécution du code lié à certains paquets est connu pour causer des problèmes aux gens. J'ai eu un problème avec réagissent-native-cartes et le débogueur. Mais ça a été réparé. Pour la plupart, vous devriez être bien.

pour déboguer votre application native react, allez à l'adresse suivante:

localhost: 8081 / debugger-ui dans votre navigateur par défaut(chrome) et ouvrez les outils de développement pour déboguer votre application react native

si vous utilisez Nuclide dans Atom editor pour le développement de L'application Native React, vous pouvez également utiliser" Element Inspector " qui aide à observer les variations des props et des valeurs d'état lorsque l'application tourne sur un périphérique en phase de développement. En savoir plus ici - https://nuclide.io/docs/platforms/react-native/#element-inspector entrez la description de l'image ici

dans React-Native debugging est beaucoup plus facile.

• debug dans IOS utiliser

cmd + d

ctrl + cmd + z (pour simulateur)

• pour déboguer sur android

Shake device with touch ( assurez-vous que votre option de développeur est activée )

au lieu de Cmd+M , pour émulateur Android Appuyez sur F10 sous Windows. L'émulateur commence à afficher toutes les options de débogage react-native.

dans Windows et en utilisant l'émulateur android, vous pouvez faire cette étape:

1. après le lancement de l'émulateur et de l'application sur celui-ci, appuyez sur le bouton Menu puis sélectionnez "Debug js Remote" ou "Debug in Chrome" (Cela dépend de l'émulateur en utilisant). Vous pouvez voir l'image suivante comme référence: émulateur avec image de pas
2. un nouvel onglet Chrome apparaît. Vous devez appuyer sur Ctrl + Hongkong pour afficher le Outils de développement et commencer à suivre les étapes de débogage. voir cette image comme référence

en outre, vous devez utiliser la fonctionnalité console.log() pour rendre le processus de débogage plus descriptif.

vous pouvez installer React Native Debugger à partir de brew. c'est plus confortable à utiliser que le débogueur dans chrome

cela dépend vraiment de ce que je fais. Si j'effectue des modifications de L'interface utilisateur ou du débogage de L'interface utilisateur, j'active généralement le rechargement en direct et à chaud et je fais des modifications, puis j'obtiens instantanément un retour d'information à ce sujet. Si c'est quelque chose de plus technique, j'allume le débogage JS pour voir l'état de l'application. Cependant, parce que le rechargement est si rapide dans react native, si l'état est trop désordonné, Je console log.