Wie melde ich mich bei React Native an?

Wie kann ich eine Variable in React Native protokollieren, beispielsweise console.logbei der Entwicklung für das Web?

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

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.

Verwenden console.debug("text");

Sie sehen die Protokolle im Terminal.

Schritte:

• Führen Sie die Anwendung aus:

react-native run-ios        # For iOS
react-native run-android    # For Android

• Führen Sie den Logger aus:

react-native log-ios        # For iOS
react-native log-android    # For Android

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.

Schritte

1. Installieren Sie Google Chrome , falls Sie dies noch nicht haben
2. Führen Sie die App mit aus react-native run-android oder ausreact-native run-ios
3. Öffnen Sie das Entwicklermenü
   • Mac: ⌘+D für iOS oder⌘M für Android iOS
   • Windows / Linux: Android-Handy schütteln
4. Wählen Debug JS Remotely
5. Dies sollte den Debugger in Chrome starten
6. In Chrome: Tools -> More Tools -> Developer Optionsund stellen Sie sicher, dass Sie sich auf der consoleRegisterkarte befinden

Wenn 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:

1. console.log(): zeigt in der Konsole
2. console.warn(): wird in der gelben Box unten in der Anwendung angezeigt
3. alert(): wird wie im Web als Eingabeaufforderung angezeigt

Ich 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!

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.

Xcode Simulator Img

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

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

1. Stellen console.log("My log text") Ihren Code ein
2. Gehen Sie zu Ihren Befehlszeilen-Tools
3. positionieren Sie sich in seinem Entwicklungsordner

In Android:

• Schreiben Sie diesen Befehl: React-native log-android

In IOS:

• Schreiben Sie diesen Befehl: React-native log-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

1. Debuggen mit console.log
2. Debugging von Code (Logik) mit Nuclide
3. Debugging von Code (Logik) mit Chrome
4. Verwenden Sie Xcode, um die GUI zu debuggen

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:

1. 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.
2. Sie können verwenden 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.
3. Die effektivste Methode, auf die ich gestoßen bin, ist die Verwendung eines Drittanbieter-Tools, Reactotron . Ein einfaches und leicht zu konfigurierendes Tool, mit dem Sie jede Protokollierungsanweisung auf verschiedenen Ebenen anzeigen können (Fehler, Debug, Warnung usw.). Es bietet Ihnen das GUI-Tool, das die gesamte Protokollierung Ihrer App anzeigt, ohne die Leistung zu beeinträchtigen.

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.

1. 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.

2. 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.

   beide Methoden erwähnen hier.

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.