Comment puis-je enregistrer une variable dans React Native, comme utiliser console.loglors du développement pour le Web?
Réponses:
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
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.
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.
adb logcat -v time -s ReactNativeJS
Utilisation console.debug("text");
Vous verrez les journaux à l'intérieur du terminal.
Pas:
react-native run-ios # For iOS
react-native run-android # For Androidreact-native log-ios # For iOS
react-native log-android # For AndroidInitializing React Xplat Bridge..
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.
react-native run-androidoureact-native run-ios⌘+D pour iOS ou ⌘Mpour Android iOSDebug JS RemotelyTools -> More Tools -> Developer Optionset assurez-vous que vous êtes sur l' consoleongletDé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:
console.log(): affiche dans la consoleconsole.warn(): apparaît dans la case jaune en bas de l'applicationalert(): s'affiche comme une invite comme sur le WebJe 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!
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"
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.
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
console.loget console.warn.
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
console.log("My log text")votre codeSous Android:
Sous IOS:
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
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:
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.console.warnmais votre écran mobile serait inondé de ces étranges boîtes jaunes qui pourraient ou non être réalisables selon votre situation.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.
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.
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.
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.