Comment se connecter React Native?
Comment enregistrer une variable dans React Native, comme si vous utilisiez console.log lors du développement pour le Web?
console.log fonctionne.
Par défaut, sur iOS, il se connecte au volet de débogage dans Xcode.
À partir du IOS simulateur, appuyez sur (⌘+D) et appuyez sur Débogage JS distant . Cela ouvrira une ressource, http: // localhost: 8081/debugger-ui sur localhost. À partir de là, utilisez Chrome la console javascript des outils de développement pour afficher console.log.
Utilisez console.log, console.warn etc.
À 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, lancez 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 l'a dit Martin dans une autre réponse.
Cela montre tous les console.log (), les erreurs, les notes, etc. et ne ralentit pas.
Utiliser console.debug("text");
Vous verrez les journaux à l'intérieur du terminal.
Pas:
- Lancer l'application:
react-native run-ios # For iOS
react-native run-Android # For Android
- Lancer le logger:
react-native log-ios # For iOS
react-native log-Android # For Android
Le code de Visual Studio a une console de débogage décente qui peut montrer votre console.log.
VS Code est, le plus souvent, React Amical pour les Autochtones.
C’est là que les outils de développement Chrome sont votre ami.
Les étapes suivantes devraient vous permettre d'accéder aux Chrome Outils de développement, où vous pourrez voir vos instructions console.log.
Pas
- Installer Google Chrome , si ce n'est déjà fait
- Lancer l'application en utilisant
react-native run-Androidoureact-native run-ios - Ouvrir le menu du développeur
- Mac:
⌘+Dpour iOS ou⌘Mpour Android iOS - Windows/Linux: Secouez Android téléphone
- Mac:
- Sélectionnez
Debug JS Remotely - Cela devrait lancer le débogueur dans Chrome
- Sous Chrome:
Tools -> More Tools -> Developer Optionset assurez-vous d'être sur l'ongletconsole.
Maintenant, chaque fois qu'une instruction console.log est exécutée, elle devrait apparaître dans Chrome Outils de développement. La documentation officielle est ici .
Il existe 3 méthodes que j'utilise pour déboguer lors du développement de React applications natives:
console.log(): s'affiche dans la consoleconsole.warn(): apparaît dans la boîte jaune en bas de l'applicationalert(): s'affiche sous forme d'invite, exactement comme sur le Web.
Je préfère vous recommander les gars utilisant 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
Il suffit de vérifier le lien ci-dessous.
https://github.com/jhen0409/react-native-debugger
Bonne piraterie!
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 utilisé cmd-d pour afficher le menu de débogage et je me suis rappelé que j'avais activé "Déboguer dans Safari".
J'ai désactivé cette fonction et certains messages ont été imprimés dans le message de sortie, mais pas ceux de la console. Cependant, l'un des messages du journal indiquait:
__DEV__ === false, development-level warning are OFF, performance optimizations are ON"
En effet, j'avais déjà regroupé mon projet pour effectuer des tests sur un périphérique réel avec la commande suivante:
react-native bundle --minify
Ceci fourni sans "dev-mode". Pour autoriser les messages dev, incluez l'indicateur --dev:
react-native bundle --dev
Et les messages console.log sont de retour! Si vous ne regroupez pas pour un périphérique réel, n'oubliez pas de re-pointer jsCodeLocation dans AppDelegate.m sur localhost (c'est ce que j'ai fait!).
C'est tellement 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 voir dans la console du navigateur. Si vous voulez vérifier le journal de l'appareil ou dire le journal de production APK, vous pouvez utiliser
adb logcat
adb -d logcat
Appuyez sur [command + control + Z] dans Xcode Simulator, choisissez Debug JS à distance, puis appuyez sur [command + option + J] pour ouvrir les outils de développement Chrome.
se référer ： Débogage React Applications natives
Utilisez le débogueur natif 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 Debug à partir du simulateur.
Il prend en charge d'autres fonctionnalités de débogage, tout comme les éléments des outils de développement chrome, ce qui permet de visualiser le style fourni à chaque composant.
Dernier support complet pour les outils de développement redux
react-native-xlog module qui peut vous aider, est-ce que WeChat est Xlog 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');
Quelque chose vient de paraître il y a environ un mois est "Créez React Application native", un générique qui vous permet (avec un minimum d'effort) de montrer à quoi ressemble votre application en direct sur votre appareil mobile (ANY caméra) en utilisant l'application Expo. Il dispose non seulement de mises à jour en direct, mais cela vous permettra de voir les journaux de la console dans votre terminal, comme lors du développement pour le Web, plutôt que de devoir utiliser le navigateur comme nous l'avons fait avec React Natif avant.
Bien entendu, vous devrez créer un nouveau projet avec ce modèle standard ... mais si vous devez migrer vos fichiers, cela ne devrait pas poser de problème. Donner un coup de feu.
Edit: En fait, il ne nécessite même pas de caméra. J'ai dit cela pour scanner un code QR, mais vous pouvez aussi taper quelque chose pour le synchroniser avec votre serveur, pas seulement un code QR.
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, assignez simplement une fonction vierge comme celle-ci dans le fichier Root Js de l’application suivante: console.log = {}. Elle désactivera complètement la publication des journaux dans l’application, ce qui est réellement nécessaire en production. Le mode console.log consomme du temps.
Journalisation de l'exécution
En mode de production, il est également nécessaire de consulter les journaux lorsque de vrais utilisateurs utilisent votre application en temps réel. Cela aide à comprendre les bugs, l’utilisation et les cas non désirés. Il existe de nombreux outils payants tiers disponibles sur le marché pour cela. L'un d'eux que j'ai utilisé est par Logentries
La bonne chose est que Logentries a aussi module réactif natif. L'activation de la journalisation à l'exécution avec votre application mobile prendra donc beaucoup moins de temps.
Il existe deux options pour déboguer ou obtenir la sortie de votre application native rea en utilisant
Emulateur ou périphérique réel
Pour la première utilisation de l’émulateur: utilisez
log-native log-Android ou log-ios natif
pour obtenir la sortie du journal
sur appareil réel. secouez votre appareil
le menu viendra donc de l'endroit où vous sélectionnez le débogage distant et ouvrira cet écran dans votre navigateur. afin que vous puissiez voir votre journal de sortie dans l'onglet console . 
Vous pouvez utiliser l'option de débogage js à distance à partir de votre appareil ou vous pouvez simplement utiliser log-native log-Android et log-native log-ios pour ios.
Chaque développeur confronté à cette question de débogage avec le natif de réaction, même moi aussi et je me réfère à cela et la solution me suffit au niveau initial, cela couvre de nombreuses manières qui nous aident à essayer d’utiliser ce qui nous convient le mieux
- Débogage avec console.log
- Code de débogage (logique) avec Nuclide
- Code de débogage (logique) avec Chrome
- 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
console.log () est un moyen facile de déboguer votre code, mais il doit être utilisé avec une fonction de flèche ou bind () lors de l'affichage de 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 vous ouvrez un pop-up, il est donc préférable de ne pas utiliser le bouclage.
Import the {Alert} from 'react-native'
// use this alert
Alert.alert("somthing " +this.state.Some_Sates_of_variables);
Il y a normalement deux scénarios où nous avons besoin de débogage.
Lorsque nous sommes confrontés à des problèmes liés aux données et que nous souhaitons vérifier nos données, le débogage associé à ces données
console.log('data::',data)et déboguer js à distance est la meilleure option.
L'autre cas concerne l'interface utilisateur et les problèmes de styles pour lesquels nous devons vérifier le style du composant. Dans ce cas, la meilleure option est de réagir.
Chrome Devtool est le moyen le plus simple et le plus simple pour la journalisation et le débogage.
Utilisateurs avec Windows et Android Studio:
Vous allez le trouver sous Logcat dans Android Studio. Il y a beaucoup de messages de journalisation qui s'affichent ici. Il peut donc être plus facile de créer un filtre pour "ReactNativeJS" qui affichera uniquement les messages console.log créés dans votre application native rea.
Si vous utilisez osx et utilisez un émulateur, vous pouvez afficher votre console.logs directement dans l'inspecteur Web Safari.
Safari => Développement => Simulateur - [la version de votre simulateur ici] => JSContext
console.log() est le moyen le plus simple et le plus simple de visualiser votre console d’ouverture de session lorsque vous utilisez le débogueur js distant à partir du menu de votre développeur.
console.log peut être utilisé pour tout projet JS. Si vous exécutez l'application dans localhost, il est évident qu'il ressemble à n'importe quel projet javascript. Mais lorsque vous utilisez un simulateur ou tout autre appareil, connectez ce simulateur à notre hôte local et vous pourrez le voir dans la console.
je l'ai obtenu dans les fenêtres comme ...
- Téléchargez React Native Debugger à partir de la page release .
- Après avoir exécuté l'application dans l'émulateur, appuyez sur ctrl + m (sous Windows), vous obtiendrez une liste d'options dans les options du développeur, puis sélectionnez démarrer-déboguer à partir de cet emplacement. (toutes les autres positions de débogage doivent être fermées avant)
Juste console.log ('debug');
Et lancez-le, vous pouvez voir le journal dans l'invite terminal/cd.
Mettez conole.log ("Mon journal") dans votre code
allez dans votre commande Les outils de ligne se positionnent dans son dossier de développement. Dans Android: écrivez cette commande: React-native log-Android Dans IOS écrivez cette commande: React-native log-ios