Comment faire pour vous connecter à React Native?

Comment puis-je 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.

    Depuis le simulateur IOS, appuyez sur ( + D ) et appuyez sur Débogage JS distant . Cela ouvrira une ressource, http: // localhost: 8081 / debugger-ui sur localhost. A partir de là, utilisez la console JavaScript des outils Chrome Developer 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, lancez:

    react-native log-ios

    ou

    react-native log-android

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

    Cela montre toutes les consoles.log (), les erreurs, les notes, etc. et provoque un ralentissement nul.

    Utilisez 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 le journal:
     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.

    entrer la description de l'image ici

    VS Code est, le plus souvent, React Native friendly.

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

    Simulateur Xcode Img

    Voir : Déboguer les applications natives React

    Quelque chose qui vient de sortir est “Create React Native App”, une formule géniale qui vous permet (avec un minimum d’effort) de montrer à quoi ressemble votre application en direct sur votre appareil mobile (N’IMPORTE QUELLE avec une caméra) en utilisant l’application Expo . Il a non seulement des mises à jour en direct, mais il vous permettra également de voir les journaux de la console dans votre terminal, tout comme lors du développement sur le Web , plutôt que de devoir utiliser le navigateur comme avec React Native auparavant.

    Bien entendu, vous devez faire un nouveau projet avec ce modèle … 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 une caméra. J’ai dit que pour scanner un code QR, vous pouvez aussi taper quelque chose pour le synchroniser avec votre serveur, pas seulement un code QR.

    Je préfère vous recommander les utilisateurs de React Native Debugger. Vous pouvez le télécharger et l’installer en utilisant 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

    Heureux piratage!

    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 faire apparaître le menu de débogage, et je me suis souvenu que j’avais activé “Debug in Safari”.

    Je l’ai désactivé et certains messages ont été imprimés sur le message de sortie, mais pas les messages de la console. Cependant, l’un des messages de journal indiquait:

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

    C’était parce que j’avais auparavant regroupé mon projet pour le tester sur un périphérique réel avec la commande:

     react-native bundle --minify 

    Ceci est fourni sans “dev-mode”. Pour autoriser les messages dev, incluez le drapeau –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 redirect jsCodeLocation dans AppDelegate.m vers localhost (je l’ai fait!).

    Le module react-native-xlog qui peut vous aider est le Xlog de WeChat pour react -native. Cela peut générer 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'); 

    C’est là que les outils de développement Chrome sont vos amis.

    Les étapes suivantes devraient vous permettre d’accéder aux outils de développement Chrome, où vous pourrez voir vos instructions console.log .

    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-android react-native run-ios ou de react-native run-ios
    3. Ouvrir le menu développeur
      • Mac: ⌘+D pour iOS ou ⌘M pour Android iOS
      • Windows / Linux: secouer le téléphone Android
    4. Sélectionnez Debug JS Remotely
    5. Cela devrait lancer le débogueur dans Chrome
    6. Dans Chrome: Tools -> More Tools -> Developer Options et assurez-vous d’être sur l’onglet console

    Maintenant, chaque fois qu’une instruction console.log est exécutée, elle doit apparaître dans les outils de développement Chrome. La documentation officielle est ici .

    Enregistrement du temps de développement

    Pour la journalisation du temps de développement, vous pouvez utiliser console.log () . Une chose importante, si vous voulez désactiver la journalisation en mode production, dans le fichier racine de l’application, atsortingbuez une fonction vide comme celle-ci – console.log = {} Cela désactivera toute la publication de journal dans l’ensemble de l’application. mode comme console.log consum du temps.


    Enregistrement du temps d’exécution

    En mode 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 bogues, l’utilisation et les cas indésirables. Il existe de nombreux outils payants tiers disponibles sur le marché. L’un d’eux que j’ai utilisé est par Logensortinges

    La bonne chose est que Logensortinges a aussi le module React Native . Ainsi, il vous faudra moins de temps pour activer la journalisation du temps d’exécution avec votre application mobile.

    Il 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 que vous pouvez afficher dans la console du navigateur. Si vous voulez vérifier le journal de l’appareil ou dire la production APK journal que vous pouvez utiliser

     adb logcat adb -d logcat 

    Vous pouvez utiliser l’option debugly distante de votre appareil ou simplement utiliser log- and -native et log-ios natifs pour ios.

    console.log () est un moyen facile de déboguer votre code, mais il doit être utilisé avec la fonction flèche ou bind () lors de l’affichage de n’importe quel état. Vous pouvez trouver le lien utile.

    Il y a deux options pour déboguer ou obtenir la sortie de votre application native lorsque vous utilisez

    Emulateur ou périphérique réel

    Pour la première utilisation de l’émulateur: utiliser

    log-androïde natif ou réactif log-ios

    obtenir la sortie du journal

    sur le vrai périphérique.shake votre appareil

    Ainsi, le menu viendra de l’endroit où vous sélectionnez le débogage à distance et il ouvrira cet écran dans votre navigateur. Ainsi, vous pouvez voir la sortie de votre journal dans l’onglet Console. entrer la description de l'image ici

    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 de votre menu de développeur

    Chrome Devtool est la meilleure et la plus simple pour la journalisation et le débogage.

    Si vous êtes sur osx et que vous utilisez un émulateur, vous pouvez afficher votre console.log s directement dans l’inspecteur web safari.

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

    Il existe 3 méthodes que je utilise pour déboguer dans le développement d’applications réactives.

      1- console.log() // shows in console 2- console.warn() // shows in yellow box bottom of application 3- alert() // shows as a prompt just like it does in web