Comment se connecter dans React Native?

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

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

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

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.

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

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

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

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 .

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

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!

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

Appuyez sur [commande + contrôle + Z] dans Xcode Simulator, choisissez Déboguer JS à distance, puis appuyez sur [commande + option + J] pour ouvrir les outils de développement Chrome.

Xcode Simulator Img

voir ：Débogage des applications natives React

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

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

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.

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.

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.

Utilisez 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

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

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.

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.

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

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.

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

Vous pouvez également utiliser Reactotron, cela vous donnera beaucoup plus de fonctionnalités que la simple journalisation. https://github.com/infinitered/reactotron

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.

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.

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

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

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

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.

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.