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

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 .

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.

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

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

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:

Plus de détails ici.

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.

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.

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

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

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

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

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

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

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.

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

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 .

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

Très simple, juste deux commandes

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

En supposant que vous souhaitez afficher ce menu sur l' émulateur Android

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

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

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

réactif-débogueur natif

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

chrome-developer-tools

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

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.

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

É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

Étape 4: SélectionnezDeveloper Tools.

É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: 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! :)

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.

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.