web-dev-qa-db-fra.com

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? 

188
McG

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 .

140
xanadont

Débogage d'applications natives réactives

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

  1. Exécutez 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 l'instant) ou utilisez le Shake Gesture
  3. Activer Pause sur les exceptions capturées pour une meilleure expérience de débogage.
  4. Appuyez sur Command + Option + I pour ouvrir les outils de développement Chrome ou via View -> Developer -> Developer Tools.
  5. 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:

  1. Exécutez votre application dans le simulateur iOS.
  2. Appuyez sur Control + Command + Z.
  3. Vous verrez maintenant les options Enable/Disable Live Reload, Reload et Enable/Disable Debugging.
69
Jiuhong Deng

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 + m cliquez sur debug in chrome
45
John Lim

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:

React Native debugging options

Plus de détails ici.

23
bigtex777

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

23
drikoda

 enter image description here

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.

22
Rob

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  enter image description here

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.

14
bpsourav21

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

14
BdN3504

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.

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

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

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

13
chinloong
adb logcat *:S ReactNative:V ReactNativeJS:V

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

9
nagasundaram I

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

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

 enter image description here

  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 pour ouvrir les outils de développement pour chrome.

 enter image description here

  1. Allez aux sources dans le menu du haut 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 y déboguer le code, comme vous pouvez le voir dans l'image.

8

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.

image

7
priyanga

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:  SETUP  RUN

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

6
radiance

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

6
Sujeesh Balan

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 .

5
micksabox

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

5
McG

En supposant que vous souhaitiez afficher ce menu sur émulateur Android enter image description here

  • Ensuite, essayez ⌘+m pour 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'option Emulator controls (default).

 enter image description here

  • Et puis réessayez ⌘+m.

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

5
Nkokhelox

Très simple juste deux commandes

For IOS $ react-native log-ios
For Android $ react-native log-Android
4
Abhijit Chakra

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.

4
Nunchucks

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.

4
Naveen Vignesh

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.

react-native-debugger

vous pouvez aussi utiliser directement le lien ci-dessous pour vous aider.

chrome-developer-tools

3
Hardik Virani

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

2
Youcef EL KAMEL

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)

1
jatin.7744

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

1
André Abboud

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. 

1
S. Sinha

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

1
Vishal Dhanotiya
  1. Si vous utilisez un émulateur Ctrl+M et simulateur Cmd+D

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

  3. Google Chrome aller à la console

1

Vous pouvez installer React Native Debugger à partir de brew. il est plus confortable à utiliser que le débogueur en chrome

0
Ainur Baizhumanova

É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

 enter image description here

Étape 4: Sélectionnez Developer Tools.

 enter image description here

É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:  enter image description here 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 !! 

0
Aishwarya

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

0
Olcay Ertaş

J'utilise cette bibliothèque pour déboguer des projets natifs de réaction

https://github.com/jhen0409/react-native-debugger Il comprend 

  1. Inclut l'inspecteur de réaction de react-devtools-core.
  2. 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
0
Sarmad

Sous Windows et en utilisant l'émulateur Android, vous pouvez effectuer les étapes suivantes:

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

0
Jhonny Banegas

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
0
Hussam Kurd

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.

0
pie6k

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

0
Urska

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.

0
zerob4wl
  1. exécuté dans le terminal adb logcat *:S ReactNative:V ReactNativeJS:V
  2. ouvrir un projet dans Android Studio, ouvrir logcat (bouton en bas de l'écran).
  3. 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.

0
tavriaforever

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:

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

0

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.

0
Jeff

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. 

0
ish

Réagissez le débogueur natif. Cela m'aide à résoudre 90% de mes problèmes

0
Gabriel Arantes