Wie kann ich eine Variable in React Native protokollieren, beispielsweise console.logbei der Entwicklung für das Web?
Antworten:
console.log funktioniert.
Unter iOS wird standardmäßig im Debug-Bereich in Xcode protokolliert.
Drücken Sie im IOS-Simulator ( ⌘+ D) und dann Remote JS Debugging . Dadurch wird eine Ressource geöffnet, http: // localhost: 8081 / debugger-ui auf localhost. Verwenden Sie von dort aus die Javascript-Konsole der Chrome Developer Tools, um sie anzuzeigenconsole.log
Verwendung console.log, console.warnusw.
Ab React Native 0.29 können Sie einfach Folgendes ausführen, um Protokolle in der Konsole anzuzeigen:
$ 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) ausführe. <Hinweis>: Der Dienst wurde nur 0 Sekunden lang ausgeführt. Respawn um 10 Sekunden herausdrücken.
Führen Sie dies vor der Reaktion auf Native 0.29 in der Konsole aus:
adb logcat *:S ReactNative:V ReactNativeJS:V
Post React Native 0.29, ausführen:
react-native log-ios
oder
react-native log-android
Wie Martin in einer anderen Antwort sagte.
Dies zeigt alle console.log (), Fehler, Notizen usw. an und führt zu einer Verlangsamung von Null.
adb logcat -v time -s ReactNativeJS
Verwenden console.debug("text");
Sie sehen die Protokolle im Terminal.
Schritte:
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 verfügt über eine anständige Debug-Konsole, die Ihr console.log anzeigen kann.
VS Code ist meistens React Native-freundlich.
Hier finden Sie die Chrome Developer Tools Ihr Freund.
Mit den folgenden Schritten gelangen Sie zu den Chrome Developer Tools, in denen Sie Ihre sehen können console.log Aussagen sehen können.
react-native run-android oder ausreact-native run-ios⌘+D für iOS oder⌘M für Android iOSDebug JS RemotelyTools -> More Tools -> Developer Optionsund stellen Sie sicher, dass Sie sich auf der consoleRegisterkarte befindenWenn eine console.logAnweisung ausgeführt wird, sollte sie jetzt in den Chrome Dev Tools angezeigt werden. Die offizielle Dokumentation finden Sie hier .
Es gibt drei Methoden, die ich zum Debuggen bei der Entwicklung von React Native-Apps verwende:
console.log(): zeigt in der Konsoleconsole.warn(): wird in der gelben Box unten in der Anwendung angezeigtalert(): wird wie im Web als Eingabeaufforderung angezeigtIch empfehle euch lieber, React Native Debugger zu verwenden. Sie können es mit diesem Befehl herunterladen und installieren.
brew update && brew cask install react-native-debugger
oder
Überprüfen Sie einfach den Link unten.
https://github.com/jhen0409/react-native-debugger
Viel Spaß beim Hacken!
startDies öffnet den Debugger, da Sie den Standard-Debugger anstelle von Chrome verwenden, und das -gFlag verhindert, dass der Fokus auf das Neuladen entführt wird. "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"
Ich hatte das gleiche Problem: Konsolenmeldungen wurden nicht im Debug-Bereich von XCode angezeigt. In meiner App habe ich cmd-d ausgeführt, um das Debug-Menü aufzurufen, und mich daran erinnert, dass ich "Debug in Safari" aktiviert hatte.
Ich habe dies deaktiviert und einige Nachrichten wurden in die Ausgabenachricht gedruckt, aber nicht meine Konsolennachrichten. In einer der Protokollnachrichten stand jedoch:
__DEV__ === false, development-level warning are OFF, performance optimizations are ON"
Dies lag daran, dass ich mein Projekt zuvor zum Testen auf einem realen Gerät mit dem folgenden Befehl gebündelt hatte:
react-native bundle --minify
Dies gebündelt ohne "dev-mode" an. Fügen Sie das Flag --dev hinzu, um Entwicklungsnachrichten zuzulassen:
react-native bundle --dev
Und console.log-Nachrichten sind zurück! Wenn Sie nicht für ein reales Gerät zu bündeln, vergessen Sie nicht zu re-Punkt jsCodeLocationin AppDelegate.mlocalhost (tat ich!).
Drücken Sie in Xcode Simulator auf [Befehl + Steuerung + Z], wählen Sie JS aus der Ferne debuggen und drücken Sie dann [Befehl + Option + J], um die Chrome-Entwicklertools zu öffnen.
Siehe: Debuggen React Native Apps
Es ist so einfach, Protokolle in React-Native zu erhalten
Verwenden Sie console.log und console.warn
console.log('character', parameter)
console.warn('character', parameter)
Dieses Protokoll können Sie in der Browserkonsole anzeigen. Wenn Sie das Geräteprotokoll überprüfen oder das Produktions-APK-Protokoll sagen möchten, können Sie es verwenden
adb logcat
adb -d logcat
console.logund console.warn.
Das React-Native-Xlog- Modul, das Ihnen helfen kann, ist WeChats Xlog für React -Native. Das kann in der Xcode-Konsole und in der Protokolldatei ausgegeben werden. Die Produktprotokolldateien können Ihnen beim Debuggen helfen.
Xlog.verbose('tag', 'log');
Xlog.debug('tag', 'log');
Xlog.info('tag', 'log');
Xlog.warn('tag', 'log');
Xlog.error('tag', 'log');
Xlog.fatal('tag', 'log');
Entwicklungszeitprotokollierung
Für die Protokollierung der Entwicklungszeit können Sie console.log () verwenden . Eine wichtige Sache, wenn Sie die Protokollierung im Produktionsmodus deaktivieren möchten, weisen Sie in der Root-Js-Datei der App einfach eine leere Funktion wie diese zu - console.log = {}. Dadurch wird die gesamte Protokollveröffentlichung in der gesamten App deaktiviert, was tatsächlich in der Produktion erforderlich ist Modus als console.log verbraucht Zeit.
Laufzeitprotokollierung
Im Produktionsmodus müssen außerdem Protokolle angezeigt werden, wenn echte Benutzer Ihre App in Echtzeit verwenden. Dies hilft beim Verständnis von Fehlern, Verwendung und unerwünschten Fällen. Dafür gibt es auf dem Markt viele kostenpflichtige Tools von Drittanbietern. Eine davon habe ich von Logentries verwendet
Das Gute ist, dass Logentries auch das React Native Module hat . Sie benötigen also weniger Zeit, um die Laufzeitprotokollierung mit Ihrer mobilen App zu aktivieren.
Etwas, das erst vor ungefähr einem Monat herauskam, ist "Create React Native App", ein fantastisches Boilerplate, mit dem Sie (mit minimalem Aufwand) mithilfe der Expo-App live auf Ihrem Mobilgerät (JEDER mit einer Kamera) zeigen können, wie Ihre App aussieht . Es enthält nicht nur Live-Updates, sondern ermöglicht es Ihnen auch, die Konsolenprotokolle in Ihrem Terminal anzuzeigen, genau wie bei der Entwicklung für das Web , anstatt den Browser wie zuvor bei React Native verwenden zu müssen.
Sie müssten natürlich ein neues Projekt mit diesem Boilerplate erstellen ... aber wenn Sie Ihre Dateien migrieren müssen, sollte dies kein Problem sein. Versuch es einmal.
Bearbeiten: Eigentlich braucht es nicht einmal eine Kamera. Ich sagte, dass zum Scannen eines QR-Codes, aber Sie können auch etwas eingeben, um es mit Ihrem Server zu synchronisieren, nicht nur einen QR-Code.
Es gibt zwei Optionen zum Debuggen oder Abrufen Ihrer reaktiven nativen Anwendung bei Verwendung
Emulator oder reales Gerät
Für die erste Verwendung des Emulators: Verwenden Sie
React-Native Log-Android oder React-Native Log-iOS
um die Protokollausgabe zu erhalten
auf echtem Gerät. Schütteln Sie Ihr Gerät
Das Menü kommt also von dort, wo Sie Remote-Debug auswählen, und öffnet diesen Bildschirm in Ihrem Browser. So können Sie Ihre Protokollausgabe auf der Registerkarte "Konsole" sehen.
Verwenden Sie den nativen Debugger "React" für die Protokollierung und den Redux-Speicher
https://github.com/jhen0409/react-native-debugg
Laden Sie es einfach herunter und führen Sie es als Software aus. Aktivieren Sie dann den Debug-Modus im Simulator.
Es unterstützt andere Debugging-Funktionen wie Elemente in Chrome-Entwicklertools, mit deren Hilfe das für jede Komponente bereitgestellte Styling angezeigt wird.
Letzte vollständige Unterstützung für Redux-Entwicklungswerkzeuge
console.log("My log text") Ihren Code einIn Android:
In IOS:
Sie können die Debug-Option für Remote-JS von Ihrem Gerät aus verwenden oder einfach "React -Native Log-Android" und " React-Native Log-iOS" für iOS verwenden.
console.log () ist der einfache Weg, um Ihren Code zu debuggen, muss jedoch mit der Pfeilfunktion oder bind () verwendet werden, während ein beliebiger Status angezeigt wird. Möglicherweise finden Sie den Link hilfreich.
Sie können dies auf zwei Arten tun
1> mit warn
console.warn("somthing " +this.state.Some_Sates_of_variables);
2> Verwenden von Alert Dies ist nicht jedes Mal gut, wenn Alert erreicht wird. Jedes Mal, wenn Pop geöffnet wird, ist es nicht vorzuziehen, dies zu tun, wenn Sie eine Schleife ausführen
Import the {Alert} from 'react-native'
// use this alert
Alert.alert("somthing " +this.state.Some_Sates_of_variables);
Benutzer mit Windows und Android Studio:
Sie finden es unter Logcat in Android Studio. Es werden viele Protokollierungsnachrichten angezeigt, sodass Sie möglicherweise einfacher einen Filter für "ReactNativeJS" erstellen können, der nur Ihre console.log-Nachrichten anzeigt, die in Ihrer reaktiven nativen Anwendung erstellt wurden.
Jeder Entwickler, der mit diesem Problem des Debuggens mit dem nativen React konfrontiert ist, auch ich, und ich verweise darauf, und die Lösung ist für mich auf der ersten Ebene ausreichend. Sie deckt nur wenige Möglichkeiten ab, die uns helfen, das zu versuchen, was immer mit uns vertraut ist
https://codeburst.io/react-native-debugging-tools-3a24e4e40e4
Sie können Reactotron auch verwenden, es bietet Ihnen viel mehr Funktionen als nur die Protokollierung. https://github.com/infinitered/reactotron
Es gibt verschiedene Möglichkeiten, dies zu erreichen. Ich liste sie auf und beziehe sie auch in die Verwendung ein. Sie können verwenden:
console.logund Anzeigen von Protokollierungsanweisungen, ohne die Remote-Debugging-Option von Dev Tools, Android Studio und Xcode zu deaktivieren. Wenn Sie sich für die Remote-Debugging-Option entscheiden und die Protokollierung in Chrome Dev Tools oder vscode oder einem anderen Editor anzeigen können, der das Debuggen unterstützt, müssen Sie vorsichtig sein, da dies den gesamten Prozess verlangsamt.console.warn aber dann wird Ihr mobiler Bildschirm mit diesen seltsamen gelben Kästchen überflutet, die je nach Ihrer Situation möglicherweise machbar sind oder nicht.Sie verwenden dasselbe, was für das normale Web verwendet wird. Der consoleBefehl funktioniert auch in diesem Fall. Zum Beispiel können Sie verwenden console.log(), console.warn(),
console.clear() usw.
Sie können Chrome Developer verwenden, um den consoleBefehl zu verwenden, wenn Sie sich anmelden, während Sie Ihre React Native-App ausführen.
console.log() Dies ist die beste und einfachste Möglichkeit, Ihre Anmeldekonsole anzuzeigen, wenn Sie den Remote-JS-Debugger in Ihrem Entwicklermenü verwenden
Chrome Devtool ist der beste und einfachste Weg zum Protokollieren und Debuggen.
Wenn Sie mit OSX arbeiten und einen Emulator verwenden, können Sie Ihre console.logs direkt im Safari Web Inspector anzeigen .
Safari => Entwicklung => Simulator - [Ihre Simulatorversion hier] => JSContext
Normalerweise gibt es zwei Szenarien, in denen wir debuggen müssen.
Wenn wir auf Datenprobleme stoßen und in diesem Fall unsere Daten und das Debuggen in Bezug auf Daten überprüfen möchten
console.log('data::',data)
und js remote zu debuggen ist die beste Option.
Ein anderer Fall sind Probleme mit der Benutzeroberfläche und den Stilen, bei denen wir das Styling der Komponente überprüfen müssen. In diesem Fall ist React-Dev-Tools die beste Option.
console.log kann für jedes JS-Projekt verwendet werden. Wenn Sie die App in localhost ausführen, ähnelt sie offensichtlich jedem Javascript-Projekt. Wenn Sie jedoch einen Simulator oder ein anderes Gerät verwenden, verbinden Sie diesen Simulator mit unserem lokalen Host, und wir können ihn in der Konsole sehen.