Comment déboguez-vous React Native?

266

Comment déboguer leur code React avec React Native pendant que l'application s'exécute dans le simulateur d'application?

McG
la source
En dehors de ces réponses, si vous travaillez sur VS Code et que vous souhaitez déboguer dedans plutôt que Chrome, alors vérifiez ma cette réponse
gprathour
Veuillez suivre ce blog. medium.com/javascript-in-plain-english/…
Tunvir Rahman Tusher

Réponses:

159

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 .

xanadont
la source
8
En utilisant le simulateur v8.2, Cmd + D semble ne rien faire. Chrome est le dernier. Faut-il un plugin spécial en chrome ou un proxy?
McG
5
Obtenir "Le débogueur Websocket n'est pas disponible. Avez-vous oublié d'inclure RCTWebSocketExecutor?". : /
Tyler McGinnis
1
J'ai eu l'erreur suivante: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: erreur de script: nom de classe attendu mais propriété trouvée. (-2741). J'ai découvert que si je désactivais le partage d'applications Windows avec Mac dans Parallels, cela commencerait à fonctionner. Voir stackoverflow.com/questions/29310936/… .
Serge van den Oever
5
Ce sera Cmd+Msur OS X et Android
floconneux
2
Notez que Cmd + D ne fera rien si votre configuration de construction est définie sur "Release" - assurez-vous qu'elle est définie sur "Debug".
jwinn
79

Débogage des applications natives React

Pour déboguer le code javascript de votre application React, procédez comme suit:

  1. Exécutez votre application dans le simulateur iOS.
  2. La presse Command + Det une page Web devraient s'ouvrir à http: // localhost: 8081 / debugger-ui . (Chrome uniquement pour l'instant) ou utilisez leShake Gesture
  3. Activez les exceptions de pause sur les captures pour une meilleure expérience de débogage.
  4. Appuyez sur Command + Option + Ipour ouvrir les outils Chrome Developer ou ouvrez-le via View-> Developer-> Developer Tools.
  5. Vous devriez maintenant pouvoir déboguer comme vous le feriez normalement.

Optionnel

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' Reactonglet lorsque les outils de développement sont ouverts.

Recharger en direct

Pour activer Live Reload, procédez comme suit:

  1. Exécutez votre application dans le simulateur iOS.
  2. Appuyez sur Control + Command + Z.
  3. Vous verrez maintenant les Enable/Disable Live Reload, Reloadet les Enable/Disable Debuggingoptions.
Jiuhong Deng
la source
Cette réponse copie essentiellement le document, ce qui est un début, mais pas particulièrement éclairant. Que signifie «déboguer comme vous le feriez normalement» dans ce contexte?
GreenAsJade
6
Remarque importante: React Developer Tools ne fonctionne pas avec React Native depuis des mois et reste à corriger. Plus d'infos ici: github.com/facebook/react-devtools/issues/229
Lane Rettig
Qui a dit que c'était sur Mac?
shinzou
@shinzou c'est sous-entendu par la mention d'un simulateur (c'est simulateur pour devs iOS, émulateur pour devs Android). Oui, je sais que ça fait un moment, mais quand même, juste FWIW
Konrad Morawski
58

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.

  • Widget décocher
  • Activez-le en CMD + mcliquant sur déboguer dans Chrome
John Lim
la source
5
Enfin trouvé une solution Android, merci! Et dans la dernière version, le debug in chromeest remplacé par start debug remotely.
MewX
@MewX Pourriez-vous s'il vous plaît nous faire savoir comment procéder? 🤔
Mo.
@ Muhammed Salut, vous pouvez simplement suivre cmd + mou ctrl + met sélectionner start debug remotelydans les fenêtres contextuelles de votre simulateur
MewX
31

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

drikoda
la source
F ya! Voilà ce dont j'avais besoin! Merci mon ami!
I_am_learning_now
27

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 entrez la description de l'image ici

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.

bpsourav21
la source
existe-t-il un équivalent iOS à cette commande? Je viens de commencer récemment avec RN et cela aiderait beaucoup à l'avenir
Juan Carlos Alpizar Chinchilla
26

entrez la description de l'image ici

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

Fonctionne sur: windows, osxet linux.

Il prend en charge: react nativeetredux

Vous pouvez également inspecter l'arborescence des composants virtuels et modifier les styles qui se reflètent dans l'application.

Rob
la source
Puis-je voir la valeur d'une variable spécifique via ce débogueur? J'ai essayé console.log(url), mais je ne trouve pas où se trouve la sortie.
QuarK
24

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:

Options de débogage natives React

Plus de détails ici.

bigtex777
la source
Je ne vois pas ces options ... :(
Noah
16

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

BdN3504
la source
14

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.

  1. 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.

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

    Je préfère laisser le programme s'exécuter et enregistrer certaines informations plutôt que d'ajouter un debuggerpoint 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.)

  3. Enable Chrome Debuggingavec 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.

chinloong
la source
12

Au lieu de Cmd+M, pour Android Emulator Press F10dans Windows. L'émulateur commence à afficher toutes les options de débogage natives réactives.

image

Priyanga
la source
10
adb logcat *:S ReactNative:V ReactNativeJS:V

exécutez ceci dans le terminal pour le journal Android.

nagasundaram I
la source
osx: adb logcat '*: S' ReactNative: V ReactNativeJS: V
mbunch
9

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: INSTALLER COURIR

N'oubliez pas d'activer Debug JS à distance dans l'émulateur si vous l'utilisez.

Rencontrez Patel
la source
9

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.

Naveen Vignesh
la source
8

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')

Vinay
la source
8
  1. Exécutez votre application dans le simulateur - run-ios natif réactif
  2. Appuyez sur ctrl + d et cliquez sur Debug JS à distance

entrez la description de l'image ici

  1. la page Web devrait s'ouvrir à http: // localhost: 8081 / debugger-ui , sinon tapez l'URL et accédez à ce lien dans Chrome
  2. Faites un clic droit sur la page et cliquez sur Inspecter et cela devrait ouvrir les outils de développement pour Chrome

entrez la description de l'image ici

  1. Allez aux sources dans le menu supérieur et trouvez votre fichier de classe js dans l'explorateur de fichiers de droite

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

Sameera Chathuranga
la source
6

Par défaut, mon simulateur ios ne détectait pas les frappes, c'est pourquoi cmd-D ne fonctionnait pas. 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 de chrome.

McG
la source
6

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

Sujeesh Balan
la source
5

Avoir un espace dans le chemin du fichier empêche le Cmd+ Dde fonctionner. J'ai déplacé mon projet vers un emplacement sans espace et j'ai finalement réussi à faire fonctionner le débogueur Chrome. On dirait un bug .

micksabox
la source
5

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

Olcay Ertaş
la source
À un endroit précis, je devrais mettre ces 4 lignes? Dans App.js ou index.js?
Julien Lamarche
@JulienLamarche Put in App.js
Olcay Ertaş
cela devrait être accepté comme réponse .... pourquoi aussi croire aux commandements .....
Tushar Pandey
4

Très simple, juste deux commandes

For IOS $ react-native log-ios
For Android $ react-native log-android
Abhijit Chakra
la source
c'est comme ça que je le fais!
Zach Cook
C'est une excellente façon de voir ce qui se passe avec votre magasin
Daan
4

En supposant que vous souhaitez afficher ce menu sur l' émulateur Android entrez la description de l'image ici

  • Ensuite, essayez ⌘+md'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. entrez la description de l'image ici

  • 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 toliste déroulante / liste déroulante, puis sélectionnez l' Emulator controls (default)option.

entrez la description de l'image ici

  • Et puis réessayez ⌘+m.

  • J'espère que cela aide, cela a fonctionné pour moi.

Nkokhelox
la source
4

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.

Nunchucks
la source
4

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.

réactif-débogueur natif

ainsi maintenant quelques jours, vous pouvez utiliser directement le lien ci-dessous pour vous aider.

chrome-developer-tools

Hardik Virani
la source
3
  1. Si vous utilisez l'émulateur, utilisez Ctrl+ Met simulateur Cmd+D

  2. Cliquez sur le - Déboguer js à distance

  3. Google Chrome va à la console

Krishnendu Bhattacharyya
la source
3

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. ;)

Youcef EL KAMEL
la source
Je vous remercie! Nous utilisions RN 0.59 qui ne semblait pas compatible avec Flipper.
chichilatte
3

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 dans Android

Secouez l'appareil avec le toucher (assurez-vous que votre option de développeur est activée)

jatin.7744
la source
1
Belle explication.
Narendra Solanki
3

Étape 1: placez debuggeroù 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+Dsur l' émulateur ios et Cmd+Msur 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

entrez la description de l'image ici

Étape 4: SélectionnezDeveloper Tools.

entrez la description de l'image ici

Étape 5: Votre débogueur est mis en pause dans l' Sourcesonglet où vous avez écrit debuggerdans 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: entrez la description de l'image ici 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 !!

Aishwarya
la source
3

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
Hussam Kurd
la source
3

Tout d'abord dans votre simulateur ios, si vous appuyez sur la touche [commande + D], vous pouvez voir cet écran.

entrez la description de l'image ici

Cliquez ensuite sur le bouton Déboguer JS à distance.

Après avoir vu la page React Native Debugger comme celle-ci.

entrez la description de l'image ici

Et puis ouvrez votre inspecteur [f12], et allez dans l'onglet console le déboguer! :)

Jinsung Sunwoo
la source
2

React Native 0.62 est sorti - La solution officielle est Flipper 🚀

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.

entrez la description de l'image ici

Le plugin de mise en page comprend le mode d'accessibilité et le mode cible.

entrez la description de l'image ici

Vous pouvez également voir les demandes / réponses brutes du réseau dans votre application.

MJ Studio
la source
Faut-il installer manuellement Flipper? Ou est-il livré avec React Native d'une manière ou d'une autre? Si oui, comment l'ouvrir?
Charanor
@Charanor que j'ai installé à l'aide du guide de mise à niveau natif de Reaper lors de la mise à niveau vers la version 0.62
MJ Studio