Comment se connecter dans React Native?

345

Comment puis-je enregistrer une variable dans React Native, comme utiliser console.loglors du développement pour le Web?

skyline75489
la source
Essayez le paquet npm react -native-log-ios , il fonctionne dès le départ sans débogage JS à distance.
bobby

Réponses:

325

console.log travaux.

Par défaut sur iOS, il se connecte au volet de débogage à l'intérieur de Xcode.

Dans le simulateur IOS, appuyez sur ( + D), puis sur Débogage JS distant . Cela ouvrira une ressource, http: // localhost: 8081 / debugger-ui sur localhost. À partir de là, utilisez la console javascript des outils de développement Chrome pour afficherconsole.log

Yinfeng
la source
47
Et comment imprimer le journal de la console dans Android en utilisant Atom pour React Native?
sablonneux
3
@sandy Voir cette réponse . Ce n'est pas spécifiquement pour Atom, mais peut être utilisé dans le développement non XCode (alias non macOS)
alexdriedger
21
Notez qu'à partir de React Native 0.29 et versions ultérieures, vous pouvez obtenir des journaux sans exécuter le débogueur. Exécutez simplement react-native log-ios ou react-native log-android sur la ligne de commande à l'intérieur de votre dossier de projet.
Martin Konicek
1
Et lorsque vous ouvrez le débogage JS distant, vous devez appuyer sur l'option + commande + i et vérifier la console. Des informations absolument nécessaires qui manquaient et m'ont rendu confus.
sudo
1
rappelez-vous juste que console.log dans la version de production de votre application peut planter votre application dans ios. assurez-vous donc de vérifier si l'environnement est en développement, vous pouvez le savoir par la variable globale DEV en réagir natif.
Yash Ojha
347

Utilisation console.log, console.warnetc.

À partir de React Native 0.29, vous pouvez simplement exécuter ce qui suit pour voir les journaux dans la console:

$ react-native log-ios
$ react-native log-android
Martin Konicek
la source
2
Ceci est très utile car le démarrage du débogueur rend les animations trop lentes.
jcollum
13
Cela ne fonctionne pas. J'obtiens ce message lorsque j'exécute react-native log-ios evelopers-Mac-mini com.apple.CoreSimulator.SimDevice.02C1B6C7-2CD2-406E-AC93-DD430E5E3C69 [948] (com.apple.videosubscriptionsd) <Avis>: le service n'a fonctionné que pendant 0 secondes. Pousser la réapparition de 10 secondes.
rptwsthi
@rptwsthi J'ai le même problème. Avez-vous pu résoudre ce problème?
Ben
2
@Denis Kniazhev Je ne pense pas qu'il existe une option pour enregistrer uniquement les erreurs, mais vous pouvez filtrer la sortie. Si vous êtes sur Mac ou Linux: log-android réactif | grep "mon filtre pour les erreurs".
Martin Konicek
1
console.warn m'a aidé à vérifier certaines préoccupations.
Madhavi Jayasinghe
39

Pre React Native 0.29, exécutez ceci dans la console:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, exécutez:

react-native log-ios

ou

react-native log-android

Comme Martin l'a dit dans une autre réponse.

Cela affiche tous les fichiers console.log (), les erreurs, les notes, etc. et provoque un ralentissement nul.

Joe
la source
3
+1 pour cette option simple. J'ai fini par utiliser une commande légèrement variante (après avoir lu le manuel fin) pour obtenir également les horaires:adb logcat -v time -s ReactNativeJS
spechter
Garder l'onglet de débogage en arrière-plan produit un décalage. La solution consiste à conserver l'onglet au premier plan ou à l'ouvrir dans une nouvelle fenêtre.
Sabbir
J'utilise React Native Debugger depuis des mois et c'est la meilleure option pour éviter le décalage Sabbir a dit: github.com/jhen0409/react-native-debugger
Fran Verona
36

Utilisation console.debug("text");

Vous verrez les journaux à l'intérieur du terminal.

Pas:

  • Exécutez l'application:
react-native run-ios        # For iOS
react-native run-android    # For Android
  • Exécutez l'enregistreur:
react-native log-ios        # For iOS
react-native log-android    # For Android
omprakash8080
la source
2
un moyen de filtrer uniquement à partir de console.log?
Cela ne fonctionne pas pour moi, je ne vois que les messages de journal génériques React Native, tels que Initializing React Xplat Bridge..
Philipp Ludwig
21

Visual Studio Code a une console de débogage décente qui peut afficher votre console.log.

entrez la description de l'image ici

VS Code est, le plus souvent, convivial pour React Native.

goodhyun
la source
6
Pouvez-vous élaborer sur la façon dont VS Code peut recevoir la sortie de débogage de react-native. Merci!
mike123
Sélectionnez «Debug JS» dans votre application sur l'appareil et «Toggle debug console (shift-command-y)» dans votre menu d'affichage sur VS Code. Vous avez cependant besoin de github.com/Microsoft/vscode-react-native .
goodhyun
19

C'est là que Chrome Developer Tools est votre ami.

Les étapes suivantes devraient vous amener aux outils de développement Chrome, où vous pourrez voir vos console.logdéclarations.

Pas

  1. Installez Google Chrome , si vous ne l'avez pas déjà fait
  2. Exécutez l'application à l'aide de react-native run-androidoureact-native run-ios
  3. Ouvrir le menu développeur
    • Mac: ⌘+D pour iOS ou ⌘Mpour Android iOS
    • Windows / Linux: Secouez le téléphone Android
  4. Sélectionner Debug JS Remotely
  5. Cela devrait lancer le débogueur dans Chrome
  6. Dans Chrome: Tools -> More Tools -> Developer Optionset assurez-vous que vous êtes sur l' consoleonglet

Désormais, chaque fois qu'une console.loginstruction est exécutée, elle devrait apparaître dans Chrome Dev Tools. La documentation officielle est ici .

alexdriedger
la source
2
Cela peut ralentir les performances de l'application pendant le développement.
Andrien Pecson
17

Il existe 3 méthodes que j'utilise pour déboguer lors du développement d'applications React Native:

  1. console.log(): affiche dans la console
  2. console.warn(): apparaît dans la case jaune en bas de l'application
  3. alert(): s'affiche comme une invite comme sur le Web
Omar Samman
la source
6

Je préfère vous recommander d'utiliser React Native Debugger. Vous pouvez le télécharger et l'installer à l'aide de cette commande.

brew update && brew cask install react-native-debugger

ou

Vérifiez simplement le lien ci-dessous.

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

Happy Hacking!

Daniel Agus Sidabutar
la source
J'utilise ceci à la place par défaut startCela ouvrira le débogueur comme vous le débogueur par défaut au lieu de Chrome et le -gdrapeau l'empêchera de détourner l'attention sur les rechargements. "start": "env REACT_DEBUGGER=\"$([ -d '/Applications/React Native Debugger.app' ] && echo \"open -g 'rndebugger://set-debugger-loc?host=localhost&port=8081' --args\")\" node node_modules/react-native/local-cli/cli.js start"
floconneux
3

J'ai eu le même problème: les messages de la console n'apparaissaient pas dans la zone de débogage de XCode. Dans mon application, j'ai fait cmd-d pour afficher le menu de débogage, et je me suis souvenu d'avoir activé "Debug in Safari".

J'ai désactivé cette option et certains messages ont été imprimés dans le message de sortie, mais pas les messages de ma console. Cependant, l'un des messages du journal a déclaré:

__DEV__ === false, development-level warning are OFF, performance optimizations are ON"

C'est parce que j'avais déjà groupé mon projet pour le tester sur un vrai appareil avec la commande:

react-native bundle --minify

Ce bundle sans "dev-mode" sur. Pour autoriser les messages de développement, incluez l'indicateur --dev:

react-native bundle --dev

Et les messages console.log sont de retour! Si vous n'êtes pas LIASSES pour un dispositif réel, ne pas oublier de re point jsCodeLocationdans AppDelegate.mlocalhost (je l' ai fait!).

Monsieur le Président
la source
3

C'est si simple d'obtenir des journaux dans React-Native

Utilisez console.log et console.warn

console.log('character', parameter)

console.warn('character', parameter)

Ce journal, vous pouvez afficher dans la console du navigateur. Si vous souhaitez consulter le journal de l'appareil ou dire le journal APK de production, vous pouvez utiliser

adb logcat

adb -d logcat
jatin.7744
la source
Tout apparaît sur ADB à l'exception des instructions console.loget console.warn.
Andrew Koster
Oui @AndrewKoster Je suis d'accord avec vous, nous pouvons afficher tous les journaux avec ADB mais cela vous donne les journaux des appareils ici, la requête est liée à la journalisation d'un développement Web. ADB vous donne également les journaux des appareils, vous pouvez contrôler et vérifier les configurations des appareils. Vous pouvez recueillir des informations à partir du lien ci-dessous des commandes ADB qui peuvent vous aider pendant le développement. androidcentral.com/10-basic-terminal-commands-you-should-know
jatin.7744
2

Le module react-native-xlog qui peut vous aider est le Xlog de WeChat pour react -native. Cela peut sortir dans la console Xcode et le fichier journal, les fichiers journaux du produit peuvent vous aider à déboguer.

Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
EngsSH
la source
2

Journalisation du temps de développement

Pour la journalisation du temps de développement, vous pouvez utiliser console.log () . Une chose importante, si vous souhaitez désactiver la journalisation en mode production, puis dans le fichier Root Js de l'application, affectez simplement une fonction vierge comme celle-ci - console.log = {} Cela désactivera la publication de journaux dans toute l'application, ce qui est effectivement requis en production comme console.log consomme du temps.


Journalisation de l'exécution

En mode production, il est également nécessaire de voir les journaux lorsque de vrais utilisateurs utilisent votre application en temps réel. Cela aide à comprendre les bogues, l'utilisation et les cas indésirables. Pour cela, il existe de nombreux outils payants tiers. L'un d'eux que j'ai utilisé est par Logentries

La bonne chose est que Logentries a également le module natif React . Ainsi, il vous faudra beaucoup moins de temps pour activer la journalisation de l'exécution avec votre application mobile.

bygirish
la source
2

Quelque chose qui vient de sortir il y a environ un mois est "Create React Native App", une super plate-forme qui vous permet (avec un minimum d'effort) de montrer à quoi ressemble votre application en direct sur votre appareil mobile (TOUT avec une caméra) en utilisant l'application Expo . Il a non seulement des mises à jour en direct, mais il vous permettra de voir les journaux de la console dans votre terminal comme lors du développement pour le Web , plutôt que d'avoir à utiliser le navigateur comme nous l'avons fait avec React Native auparavant.

Vous devrez, bien sûr, faire un nouveau projet avec ce passe-partout ... mais si vous devez migrer vos fichiers, cela ne devrait pas être un problème. Donner un coup de feu.

Edit: En fait, il n'a même pas besoin d'un appareil photo. Je l'ai dit pour scanner un code QR, mais vous pouvez également taper quelque chose pour le synchroniser avec votre serveur, pas seulement un code QR.

Ryo-code
la source
2

Il existe deux options pour déboguer ou obtenir la sortie de votre application native React lors de l'utilisation

Émulateur ou appareil réel

Pour la première utilisation de l'émulateur: utilisez

log-android réactif-natif ou log-ios réactif-natif

pour obtenir la sortie du journal

sur un appareil réel. secouez votre appareil

donc le menu viendra d'où vous sélectionnez le débogage à distance et il ouvrira cet écran dans votre navigateur. afin que vous puissiez voir la sortie de votre journal dans l'onglet console.entrez la description de l'image ici

Mudassir Khan
la source
2

entrez la description de l'image iciUtilisez le débogueur natif React pour la journalisation et le magasin Redux https://github.com/jhen0409/react-native-debugg

Il suffit de le télécharger et de l'exécuter en tant que logiciel, puis d'activer le mode débogage à partir du simulateur.

Il prend en charge d'autres fonctionnalités de débogage, tout comme l'élément dans les outils de développement Chrome, ce qui permet de voir le style fourni à n'importe quel composant.

Dernière prise en charge complète des outils de développement redux

Rajender Dandyal
la source
2
  1. Mettez console.log("My log text")votre code
  2. accédez à vos outils de ligne de commande
  3. se positionner dans son dossier de développement

Sous Android:

  • écrivez cette commande: React-native log-android

Sous IOS:

  • écrire cette commande: log-ios React-native
Innocent TRA BI
la source
1

Vous pouvez utiliser l' option js à distance debugly à partir de votre appareil ou vous pouvez simplement utiliser réagir natif log-android et réagir natif log-ios pour ios.

Tanumay Ghosh
la source
1

console.log () est le moyen facile de déboguer votre code mais il doit être utilisé avec la fonction flèche ou bind () tout en affichant n'importe quel état. Vous pouvez trouver le lien utile.

Arun kumar
la source
1

Vous pouvez le faire en 2 méthodes

1> en utilisant warn

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> En utilisant Alert Ce n'est pas bon à chaque fois s'il atteint l'alerte, puis à chaque fois que pop sera ouvert, donc si faire une boucle signifie qu'il n'est pas préférable d'utiliser cela

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);
keerthi c
la source
1

Utilisateurs avec Windows et Android Studio:

Vous le trouverez sous Logcat dans Android Studio. Il y a beaucoup de messages de journalisation qui s'affichent ici, il peut donc être plus facile pour vous de créer un filtre pour "ReactNativeJS" qui n'affichera que vos messages console.log créés dans votre application native React.

David Hudman
la source
1

Tous les développeurs confrontés à ce problème de débogage avec le natif de React, même moi aussi, et je fais référence à cela et la solution est suffisante pour moi au niveau initial, elle couvre quelques façons qui nous aident à essayer d'utiliser ce qui nous convient le mieux

  1. Débogage avec console.log
  2. Débogage de code (logique) avec Nuclide
  3. Débogage de code (logique) avec Chrome
  4. Utiliser Xcode pour déboguer l'interface graphique

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

Chetan Sheladiya
la source
1

Il existe plusieurs façons d'y parvenir, je les énumère et j'inclus les inconvénients à les utiliser également. Vous pouvez utiliser:

  1. console.loget afficher les instructions de journalisation, sans désactiver l'option de débogage à distance à partir des outils de développement, Android Studio et Xcode. ou vous pouvez désactiver l'option de débogage à distance et afficher la journalisation sur les outils de développement Chrome ou vscode ou tout autre éditeur prenant en charge le débogage, vous devez être prudent car cela ralentira le processus dans son ensemble.
  2. Vous pouvez utiliser console.warnmais votre écran mobile serait inondé de ces étranges boîtes jaunes qui pourraient ou non être réalisables selon votre situation.
  3. La méthode la plus efficace que j'ai rencontrée consiste à utiliser un outil tiers, Reactotron . Un outil simple et facile à configurer qui vous permet de voir chaque instruction de journalisation de différents niveaux (erreur, débogage, avertissement, etc.). Il vous fournit l'outil GUI qui affiche toute la journalisation de votre application sans ralentir les performances.
Anus Kaleem
la source
1

Vous utilisez la même chose que celle utilisée pour le Web normal. La consolecommande fonctionne également dans ce cas. Par exemple, vous pouvez utiliser console.log(), console.warn(), console.clear()etc.

Vous pouvez utiliser Chrome Developer pour utiliser la consolecommande lorsque vous vous connectez pendant que vous exécutez votre application React Native.

zixuan
la source
0

console.log() est le moyen le plus simple et le plus simple de voir votre console de connexion lorsque vous utilisez le débogueur js distant depuis votre menu développeur

Nirali Vasoya
la source
0

Chrome Devtool est le moyen le plus simple et le plus facile de se connecter et de déboguer.

akshay gore
la source
0

Si vous êtes sur osx et utilisez un émulateur, vous pouvez voir vos console.logs directement dans l'inspecteur web safari.

Safari => Développement => Simulateur - [votre version de simulateur ici] => JSContext

Paulin Trognon
la source
0

Il y a normalement deux scénarios où nous avons besoin d'un débogage.

  1. Lorsque nous rencontrons des problèmes liés aux données et que nous voulons vérifier nos données et le débogage liés aux données dans ce cas console.log('data::',data)

    et déboguer js à distance est la meilleure option.

  2. L'autre cas est l'interface utilisateur et les problèmes liés aux styles où nous devons vérifier le style du composant dans ce cas, react-dev-tools est la meilleure option.

    les deux méthodes mentionnées ici.

Waheed Akhtar
la source
0

console.log peut être utilisé pour n'importe quel projet JS. Si vous exécutez l'application dans localhost, il est évidemment similaire à n'importe quel projet javascript. Mais tout en utilisant le simulateur ou tout autre appareil, connectez ce simulateur à notre hôte local et nous pouvons voir dans la console.

Thamizhselvan
la source