it-swarm.com.de

Wie melde ich mich bei React Native an?

Wie kann ich eine Variable in React Native protokollieren, z. B. mit console.log, wenn ich für das Web entwickle?

297
skyline75489

console.log funktioniert.

Standardmäßig meldet es sich unter iOS im Debug-Bereich in Xcode an.

Drücken Sie im IOS Simulator (+D) und drücken Sie Remote JS Debugging . Dies öffnet eine Ressource, http: // localhost: 8081/debugger-ui auf localhost. Verwenden Sie von dort aus Chrome Javascript-Konsole der Entwicklertools, um console.log anzuzeigen.

282
Yinfeng

Verwenden Sie console.log, console.warn usw.

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
302
Martin Konicek

Führen Sie vor React Native 0.29 Folgendes in der Konsole aus:

adb logcat *:S ReactNative:V ReactNativeJS:V

Post React Native 0.29, führen Sie aus:

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.

35
Joe

Benutze 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
  • Starten Sie den Logger:
react-native log-ios        # For iOS
react-native log-Android    # For Android
33
omprakash8080

Visual Studio Code verfügt über eine anständige Debug-Konsole, die Ihr console.log anzeigen kann.

enter image description here

VS-Code ist meistens React native friendly.

17
goodhyun

Hier sind Chrome Developer Tools Ihre Freunde.

Mit den folgenden Schritten gelangen Sie zu den Chrome Developer Tools, in denen Sie Ihre console.log -Anweisungen anzeigen können.

Schritte

  1. Installieren Sie Google Chrome , falls Sie dies noch nicht getan haben
  2. App mit react-native run-Android oder react-native run-ios ausführen
  3. Entwicklermenü öffnen
    • Mac: ⌘+D für iOS oder ⌘M für Android iOS
    • Windows/Linux: Android Telefon schütteln
  4. Wählen Sie Debug JS Remotely
  5. Dies sollte den Debugger in Chrome starten
  6. In Chrome: Tools -> More Tools -> Developer Options und vergewissern Sie sich, dass Sie sich auf der Registerkarte console befinden

Immer wenn eine console.log -Anweisung ausgeführt wird, sollte sie in Chrome Dev Tools erscheinen. Die offizielle Dokumentation ist hier .

16
alexdriedger

Es gibt drei Methoden, die ich zum Debuggen beim Entwickeln von React nativen Apps verwende:

  1. console.log(): wird in der Konsole angezeigt
  2. console.warn(): Wird im gelben Feld unten in der Anwendung angezeigt
  3. alert(): Wird wie im Web als Eingabeaufforderung angezeigt
10
Omar Samman

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 erinnere mich, dass ich "Debug in Safari" aktiviert hatte.

Ich habe dies deaktiviert und einige Nachrichten wurden auf die Ausgabenachricht gedruckt, aber nicht auf meine Konsolenmeldungen. 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. Um dev-Nachrichten zuzulassen, geben Sie das Flag --dev ein:

react-native bundle --dev

Und die console.log-Nachrichten sind wieder da! Wenn Sie nicht für ein echtes Gerät bündeln, vergessen Sie nicht, jsCodeLocation in AppDelegate.m auf localhost zu verweisen (habe ich!).

3
Mr Speaker

Es ist so einfach, Protokolle in React-Native abzurufen

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
3
jatin.7744

Drücken Sie in Xcode Simulator [Befehlstaste + Steuerungstaste + Z], wählen Sie "JS remote debuggen" und drücken Sie dann [Befehlstaste + Optionstaste + J], um die Entwicklertools Chrome zu öffnen.

Xcode Simulator Img

refer : Debuggen von React Native Apps

3
bocai

enter image description here Verwenden Sie den reaktiven nativen Debugger für die Protokollierung und Redux-Speicherung 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 das Element in chrome Entwicklertools, wodurch die Darstellung der für jede Komponente bereitgestellten Stile erleichtert wird.

Letzte vollständige Unterstützung für Redux Dev Tools

2

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');
2
EngsSH

Etwas, das vor ungefähr einem Monat herauskam, ist "Create React Native App", eine großartige Zusammenfassung, mit der Sie (mit minimalem Aufwand) zeigen können, wie Ihre App live auf Ihrem mobilen Gerät aussieht (ANY with a Kamera) mit der Expo-App. Es enthält nicht nur Live-Updates, sondern es ermöglicht Ihnen, die Konsolenprotokolle in Ihrem Terminal anzuzeigen, genau wie bei der Entwicklung für das Web, anstatt den Browser wie bei React Eingeboren vor.

Sie müssten natürlich ein neues Projekt mit dieser Kesselplatte erstellen ... aber wenn Sie Ihre Dateien migrieren müssen, sollte das kein Problem sein. Versuch es einmal.

Edit: Eigentlich braucht es gar keine 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.

2
Ryo-code

Entwicklungszeitprotokollierung

Für die Entwicklungszeitprotokollierung können Sie console.log () verwenden. Wenn Sie die Protokollierung im Produktionsmodus deaktivieren möchten, weisen Sie in der Root-J-Datei der App einfach eine leere Funktion wie diese zu: console.log = {}. Dadurch wird die gesamte Protokollveröffentlichung in der gesamten App deaktiviert, was in der Produktion tatsächlich 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 Verstehen von Fehlern, Verwendung und unerwünschten Fällen. Es gibt viele kostenpflichtige Tools von Drittanbietern auf dem Markt. Einer von ihnen, den ich benutzt habe, ist von Logentries

Das Gute ist, dass Logentries auch React Native Module hat. Daher benötigen Sie weniger Zeit, um die Laufzeitprotokollierung mit Ihrer mobilen App zu aktivieren.

2
bygirish

Es gibt zwei Optionen zum Debuggen oder Abrufen der Ausgabe Ihrer reaktiven nativen Anwendung bei Verwendung

Emulator oder echtes Gerät

Für die erste Verwendung von Emulator: 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 ausgewählt haben, und öffnet diesen Bildschirm in Ihrem Browser. So können Sie Ihre Protokollausgaben auf der Registerkarte "Konsole" anzeigen. enter image description here

2
Mudassir Khan

Sie können die Remote-Option js debugly auf Ihrem Gerät verwenden oder einfach Native-Log-Android-Reaktion und Native-Log-iOS-Reaktion für ios verwenden.

1
Tanumay Ghosh

Jeder Entwickler, der mit diesem Problem des Debuggens mit dem reaktiven Native konfrontiert ist, hat es auch mit mir zu tun, und ich verweise darauf. Die Lösung ist für mich in der Anfangsphase ausreichend

  1. Debuggen mit console.log
  2. Debuggen von Code (Logik) mit Nuclide
  3. Debuggen von Code (Logik) mit Chrome
  4. Verwenden Sie Xcode zum Debuggen der GUI

https://codeburst.io/react-native-debugging-tools-3a24e4e40e4

1

Sie können Reactotron auch verwenden, es bietet Ihnen viel mehr Funktionen als nur die Protokollierung. https://github.com/infinitered/reactotron

1
Ravin Gupta

console.log () ist die einfache Methode zum Debuggen Ihres Codes, muss jedoch mit der Pfeilfunktion oder bind () verwendet werden, während ein beliebiger Status angezeigt wird. Sie können das Link nützlich finden.

1
Arun kumar

Sie können dies auf 2 Arten tun

1> mit warn

console.warn("somthing " +this.state.Some_Sates_of_variables);

2> Durch die Verwendung von Alert Dies ist nicht immer dann sinnvoll, wenn ein Alarm ausgelöst wird, wenn ein Popup-Fenster geöffnet wird

Import the {Alert} from 'react-native'
   // use this alert
   Alert.alert("somthing " +this.state.Some_Sates_of_variables);
1
keerthi c

Es gibt normalerweise zwei Szenarien, in denen wir debuggen müssen.

  1. Wenn wir mit Problemen in Bezug auf Daten konfrontiert sind und in diesem Fall unsere Daten und das Debuggen in Bezug auf Daten überprüfen möchten, console.log('data::',data)

    und Debuggen von Js aus der Ferne ist die beste Option.

  2. Ein anderer Fall sind die Probleme mit der Benutzeroberfläche und den Stilen, bei denen das Design der Komponente überprüft werden muss.

    beide hier genannten Methoden

0
Waheed Akhtar

Chrome Devtool ist die beste und einfachste Methode zum Protokollieren und Debuggen.

0
akshay gore

Benutzer mit Windows und Android Studio:

Sie finden es unter Logcat in Android Studio. Hier werden viele Protokollmeldungen angezeigt. Daher können Sie möglicherweise einfacher einen Filter für "ReactNativeJS" erstellen, der nur die console.log-Meldungen anzeigt, die in Ihrer nativen Reaction-Anwendung erstellt wurden.

0
David Hudman

Wenn Sie unter osx arbeiten und einen Emulator verwenden, können Sie Ihre console.log direkt im Safari-Webinspektor anzeigen.

Safari => Entwicklung => Simulator - [Ihre Simulatorversion hier] => JSContext

0
Paulin Trognon

console.log() ist die beste und einfachste Möglichkeit, Ihre Anmeldekonsole anzuzeigen, wenn Sie den Remote-Js-Debugger in Ihrem Entwicklermenü verwenden

0
Nirali Vasoya

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 Localhost und wir können dies in der Konsole sehen.

0
Thamizhselvan

ich habe es in Windows als ...

  • Laden Sie React Native Debugger von der Seite release herunter.
  • Nachdem Sie die App im Emulator ausgeführt haben, drücken Sie Strg + M (in Windows). Sie erhalten eine Liste der Optionen aus den Entwickleroptionen. Wählen Sie dort Start-Debugging aus. (Alle anderen Debug-Einstellungen sollten vorher geschlossen werden.)
0
Tushar Pandey

Nur console.log ('debug');

Und starten Sie es können Sie das Protokoll in der Terminal/CD-Eingabeaufforderung sehen.

0
uday

Fügen Sie conole.log ("My log text") in Ihren Code ein

gehen Sie zu Ihrem Befehl Zeilentools 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