Wie debuggen Sie React Native?

264

Wie debuggt man seinen React-Code mit React Native, während die App im App-Simulator ausgeführt wird?

McG
quelle
Lösung für reaktives natives Debuggen: 1. Debuggen Reagiere native Android- oder IOS-App mit dem Konsolenprotokoll 2. Reagiere native Debugging-Methoden 3. Reagiere
natives
Abgesehen von diesen Antworten, wenn Sie an VS-Code arbeiten und ihn anstelle von Chrome debuggen möchten, überprüfen Sie meine Antwort
gprathour
Bitte folgen Sie diesem Blog. medium.com/javascript-in-plain-english/…
Tunvir Rahman Tusher

Antworten:

157

Cmd+Daus dem Simulator. Es wird Chrome angezeigt und von dort aus können Sie die Entwicklertools verwenden.

Bearbeiten:

Dies ist jetzt in den Hilfedokumenten verlinkt .

xanadont
quelle
8
Mit dem Simulator v8.2 scheint Cmd + D nichts zu tun. Chrome ist aktuell. Wird ein spezielles Plugin in Chrome oder ein Proxy benötigt?
McG
5
"Websocket-Debugger ist nicht verfügbar. Haben Sie vergessen, RCTWebSocketExecutor einzuschließen?". : /
Tyler McGinnis
1
Ich hatte den folgenden Fehler: /Users/Serge/projects/serge/MyProject/node_modules/react-native/packager/launchChromeDevTools.applescript:668:671: Skriptfehler: Erwarteter Klassenname, aber gefundene Eigenschaft. (-2741). Ich habe herausgefunden, dass es funktioniert, wenn ich die Freigabe von Windows-Anwendungen für Mac in Parallels deaktiviert habe. Siehe stackoverflow.com/questions/29310936/… .
Serge van den Oever
5
Das wird Cmd+Mauf OS X und Android sein
schuppig
2
Beachten Sie, dass Cmd + D nichts tut, wenn Ihre Build-Konfiguration auf "Release" eingestellt ist - stellen Sie sicher, dass sie auf "Debug" eingestellt ist.
Jwinn
79

Debuggen Reagieren Sie native Apps

Gehen Sie wie folgt vor, um den Javascript-Code Ihrer React-App zu debuggen:

  1. Führen Sie Ihre Anwendung im iOS-Simulator aus.
  2. Drücken Sie Command + Dund eine Webseite sollte sich unter öffnen http: // localhost: 8081 / debugger-ui . (Chrome vorerst nur) oder verwenden Sie dieShake Gesture
  3. Aktivieren Pause bei gefangenen Ausnahmen für ein besseres Debugging.
  4. Drücken Sie Command + Option + I, um die Chrome Developer-Tools zu öffnen, oder öffnen Sie sie überView -> Developer-> Developer Tools.
  5. Sie sollten jetzt in der Lage sein, wie gewohnt zu debuggen.

Optional

Installieren Sie die Erweiterung React Developer Tools für Google Chrome. Auf diese Weise können Sie in der Ansichtshierarchie navigieren, wenn Sie die Option auswählenReact Registerkarte während die Entwicklertools geöffnet sind.

Live Reload

Gehen Sie wie folgt vor, um Live Reload zu aktivieren:

  1. Führen Sie Ihre Anwendung im iOS-Simulator aus.
  2. Drücken Sie Control + Command + Z.
  3. Sie werden nun die sehen Enable/Disable Live Reload, Reloadund Enable/Disable DebuggingOptionen.
Jiuhong Deng
quelle
Diese Antwort kopiert im Grunde das Dokument, was ein Anfang ist, aber nicht besonders aufschlussreich. Was bedeutet "Debuggen wie gewohnt" in diesem Zusammenhang?
GreenAsJade
6
Wichtiger Hinweis: Die React Developer Tools arbeiten seit Monaten nicht mehr mit React Native zusammen und müssen noch behoben werden. Weitere Infos hier: github.com/facebook/react-devtools/issues/229
Lane Rettig
Wer hat gesagt, dass dies auf dem Mac ist?
Shinzou
@shinzou es wird durch die Erwähnung eines Simulators impliziert (es ist Simulator für iOS-Entwickler, Emulator für Android-Entwickler). Ja, ich weiß, es ist eine Weile her, aber immer noch nur FWIW
Konrad Morawski
58

Wenn Sie für eine Android-App Genymotion verwenden, können Sie das Menü durch Drücken von umschalten. CMD + mMöglicherweise müssen Sie es jedoch im Menü aktivieren, indem Sie dies tun.

  • Deaktivieren Sie Widget
  • Aktivieren Sie es, indem CMD + mSie auf Debug in Chrome klicken
John Lim
quelle
5
Endlich eine Android-Lösung gefunden, danke! Und in der neuesten Version wird die debug in chromedurch ersetzt start debug remotely.
MewX
@MewX Könnten Sie uns bitte mitteilen, wie das geht? 🤔
Mo.
@Muhammed Hallo, könnten Sie einfach folgen cmd + moder ctrl + m, und wählen Sie start debug remotelyaus dem Popup - Fenster in Ihrem Simulator
MewX
31

Neben den anderen Antworten. Sie können reaktionsnativ mit der Debugger-Anweisung debuggen

Beispiel:

debugger; //breaks execution

Ihre Chrome-Entwicklungswerkzeuge müssen geöffnet sein, damit dies funktioniert

Drikoda
quelle
F ya! Das habe ich gebraucht! Danke Freund!
I_am_learning_now vor
27

Wenn Sie mit einem Android-Gerät unter Windows debuggen möchten, öffnen Sie einfach eine Eingabeaufforderung und geben Sie ein (stellen Sie sicher, dass Ihre ADB ordnungsgemäß funktioniert).

adb shell input keyevent 82

Es wird ein Bildschirm wie das Bild angezeigt Geben Sie hier die Bildbeschreibung ein

dann wählen Sie

debug JS Remotely

Es öffnet sich automatisch ein neues Fenster. Öffnen Sie dann das Inspect-Element oder drücken Sie F12 für die Konsole.

bpsourav21
quelle
Gibt es ein iOS-Äquivalent zu diesem Befehl? Ich habe erst kürzlich mit RN angefangen und das würde in Zukunft sehr helfen
Juan Carlos Alpizar Chinchilla
26

Geben Sie hier die Bildbeschreibung ein

Probieren Sie dieses Programm aus: https://github.com/jhen0409/react-native-debugger

Funktioniert auf : windows, osxund linux.

Es unterstützt: react nativeundredux

Sie können auch den virtuellen Komponentenbaum überprüfen und Stile ändern, die in der App angezeigt werden.

rauben
quelle
Kann ich den Wert einer bestimmten Variablen über diesen Debugger anzeigen? Ich habe es versucht console.log(url), aber ich kann nicht finden, wo die Ausgabe ist.
QuarK
24

cmd ⌘+ hat Dseltsamerweise bei mir nicht funktioniert. Drücken Sie ctrl+ cmd ⌘+Z im iOS-Simulator wurde das Debugging-Browserfenster für mich geöffnet.

Dies ist der Bildschirm, der angezeigt wird:

Reagieren Sie auf native Debugging-Optionen

Weitere Details hier.

bigtex777
quelle
Ich sehe diese Optionen nicht ... :(
Noah
16

Das Debuggen von React-Native 0.40.0 unter Debian 8 (Jessie) kann durch Navigieren zu http: // localhost: 8081 / debugger-ui in Chromium oder Firebug erfolgen, während Ihre App im Android-Simulator ausgeführt wird. Um die In-App - Entwickler - Menü zugreifen, führen Sie den folgenden Befehl in einem anderen Terminal - Fenster, wie erwähnt hier :

adb shell input keyevent 82

BdN3504
quelle
14

Ich habe nicht genug Ruf, um die vorherigen Antworten zu kommentieren, die großartig sind. :) Hier sind einige Möglichkeiten, wie ich beim Entwickeln einer reaktionsnativen App debugge.

  1. Live-Nachladen

    Mit React-Native können Sie Ihre Änderungen ganz einfach mit den Tasten ⌘ + R anzeigen oder einfach nur das Live-Reload aktivieren, und der Watchman "aktualisiert" den Simulator mit den neuesten Änderungen. Wenn Sie eine Fehlermeldung erhalten, können Sie auf diesem roten Bildschirm einen Hinweis auf die Zeilennummer erhalten. Ein paar Rückgängigmachungen bringen Sie wieder in den Arbeitszustand und beginnen von vorne.

  2. console.log('yeah, seriously.')

    Ich lasse das Programm lieber laufen und protokolliere einige Informationen, als einen debuggerHaltepunkt hinzuzufügen . (Ein harter Debugger ist nützlich, wenn Sie versuchen, mit externen Paketen / Bibliotheken zu arbeiten. Er wird automatisch vervollständigt, sodass Sie wissen, welche anderen Methoden Sie verwenden können.)

  3. Enable Chrome Debuggingmit debugger;Haltepunkt in Ihrem Programm.

Nun, es hängt von der Art der aufgetretenen Fehler und Ihren Präferenzen für das Debuggen ab. Für die meistenundefined is not an object (evaluating 'something.something') werden Methode 1 und 2 für mich gut genug sein.

Während der Umgang mit externen Bibliotheken oder Paketen, die von anderen Entwicklern geschrieben wurden, mehr Aufwand zum Debuggen erfordert, ist dies ein gutes Tool wie Chrome Debugging

Manchmal kommt es von der reaktionsnativen Plattform selbst, daher hilft es definitiv, nach reaktionsnativen Problemen zu googeln.

Ich hoffe, das hilft jemandem da draußen.

Chinloong
quelle
12

Stattdessen Cmd+Mfür Android Emulator Drücken Sie F10in Windows. Der Emulator zeigt alle reaktionsnativen Debug-Optionen an.

Bild

Priyanga
quelle
10
adb logcat *:S ReactNative:V ReactNativeJS:V

Führen Sie dies im Terminal für Android-Protokoll.

Nagasundaram I.
quelle
osx: adb logcat '*: S' ReactNative: V ReactNativeJS: V
mbunch
9

Wenn Sie Microsoft Visual Code verwenden, installieren Sie die Erweiterung React Native Tools. Anschließend können Sie Haltepunkte hinzufügen, indem Sie einfach auf die gewünschte Zeilennummer klicken. Führen Sie die folgenden Schritte aus, um die App einzurichten und zu debuggen: INSTALLIEREN LAUF

Vergessen Sie nicht, Debug JS Remote im Emulator zu aktivieren, wenn Sie es verwenden.

Treffen Sie Patel
quelle
9

Für Android: Strg + M (Emulator) oder Schütteln Sie das Telefon (im Gerät), um das Menü anzuzeigen.

Für iOS: Befehlstaste + D oder Telefon schütteln, um das Menü anzuzeigen

Stellen Sie sicher, dass Sie Chrom haben.

Wählen Sie im angezeigten Menü die Option Debug JS Remotely Option.

Chrome wird automatisch bei localhost geöffnet: 8081 / debugger-ui. Sie können mit diesem Link auch manuell zum Debugger wechseln.

Dort wird die Konsole angezeigt und Sie können sehen, dass Protokolle notiert werden.

Naveen Vignesh
quelle
8

Für mich ist der beste Weg, um auf React-Native zu debuggen, die Verwendung von "Reactotron" .

Installieren Sie Reactotron und fügen Sie diese Ihrer package.json hinzu:

"reactotron-apisauce": "^1.1.2",
"reactotron-react-native-under-37": "^1.1.2",
"reactotron-redux": "^1.1.2", 

Jetzt geht es nur noch darum, Ihren Code anzumelden. z.B:console.tron.log('debug')

Vinay
quelle
8
  1. Führen Sie Ihre App im Simulator aus - reagieren Sie auf native Run-Ios
  2. Drücken Sie Strg + D und klicken Sie auf JS remote debuggen

Geben Sie hier die Bildbeschreibung ein

  1. Die Webseite sollte unter http: // localhost: 8081 / debugger-ui geöffnet werden. Wenn nicht, geben Sie die URL ein und gehen Sie zu diesem Link in Chrome
  2. Klicken Sie mit der rechten Maustaste auf die Seite und klicken Sie auf Inspizieren. Die Entwicklertools für Chrome sollten geöffnet werden

Geben Sie hier die Bildbeschreibung ein

  1. Gehen Sie zu den Quellen im oberen Menü und suchen Sie Ihre js-Klassendatei im Datei-Explorer auf der rechten Seite

  2. Sie können der Ansicht Haltepunkte hinzufügen und den Code dort debuggen, wie Sie im Bild sehen können.

Sameera Chathuranga
quelle
6

Standardmäßig hat mein iOS-Simulator die Tastenanschläge nicht erfasst, weshalb cmd-D nicht funktioniert hat. Ich musste die Einstellungen für die Tastatur über das Simulatormenü aktivieren:

Hardware> Tastatur> Tastatur anschließen

Jetzt startet cmd-D das Chrome-Debugging.

McG
quelle
6

Für Android App. Drücken Sie Strg + M, wählen Sie Debug js aus der Ferne. Es öffnet sich ein neues Fenster in Chrome mit der URL http: // localhost: 8081 / debugger-ui . Sie können die App jetzt im Chrome-Browser debuggen

Sujeesh Balan
quelle
5

Ein Leerzeichen im Dateipfad verhindert, dass das Cmd+ Dfunktioniert. Ich habe mein Projekt an einen Ort ohne Leerzeichen verschoben und endlich den Chrome-Debugger zum Laufen gebracht. Scheint wie ein Fehler .

micksabox
quelle
5

Wenn Sie das Debuggen standardmäßig aktivieren möchten:

import { NativeModules } from 'react-native';

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

So funktioniert dies auf Android:

npm install --save react-native-devsettings-android
react-native link react-native-devsettings-android

Referenz: Starten Sie eine React Native-App mit standardmäßig aktiviertem "Debug JS Remote"

Olcay Ertaş
quelle
An einer bestimmten Stelle sollte ich diese 4 Zeilen setzen? In App.js oder index.js?
Julien Lamarche
@ JulienLamarche Put in App.js
Olcay Ertaş
das sollte als Antwort akzeptiert werden .... warum auch an Befehle glauben .....
Tushar Pandey
4

Sehr einfach, nur zwei Befehle

For IOS $ react-native log-ios
For Android $ react-native log-android
Abhijit Chakra
quelle
So mache ich das!
Zach Cook
Dies ist eine super gute Möglichkeit, um zu sehen, was mit Ihrem Geschäft los ist
Daan
4

Angenommen, Sie möchten dieses Menü im Android-Emulator anzeigen Geben Sie hier die Bildbeschreibung ein

  • Versuchen Sie ⌘+mdann, diesen Entwicklungseinstellungsdialog im Android-Emulator auf einem Mac aufzurufen.

  • Wenn es nicht angezeigt wird, gehen Sie zu AVD > (click the pen to edit your emulator configuration) > advanced settings > check the enable keyboard input box. Geben Sie hier die Bildbeschreibung ein

  • Und dann erneut versuchen ⌘+m.

  • Wenn es immer noch nicht Send keyboard shortcuts toangezeigt wird, gehen Sie zu den laufenden Emulatoreinstellungen und wählen Sie in der Combobox / Dropdown-Liste die Emulator controls (default)Option aus.

Geben Sie hier die Bildbeschreibung ein

  • Und dann erneut versuchen ⌘+m.

  • Ich hoffe das hilft, es hat bei mir funktioniert.

Nkokhelox
quelle
4

Wenn Sie Redux verwenden, empfehle ich React Native Debugger. Es enthält Chrome-Devtools, aber auch Redux-Devtools und React-Devtools.

Redux Devtools : Hiermit können Sie Ihre Aktionen anzeigen und durch sie hindurchgehen. Außerdem können Sie Ihren Redux-Speicher anzeigen und haben eine Funktion, mit der Sie den vorherigen Status automatisch mit dem aktualisierten Status für jede Aktion unterscheiden können, sodass Sie dies sehen können, wenn Sie eine Reihe von Aktionen durchlaufen.

React Devtools : Auf diese Weise können Sie eine bestimmte Komponente überprüfen, nämlich alle Requisiten sowie den Komponentenzustand. Wenn Sie einen Teil des Komponentenstatus haben, der ein Boolescher Wert ist, können Sie darauf klicken, um ihn umzuschalten und zu sehen, wie Ihre App reagiert, wenn sie sich ändert. Tolles Feature.

Chrome Devtools Ermöglicht das Anzeigen aller Konsolenausgaben, das Verwenden von Haltepunkten und das Anhalten beim Debugger. usw. Standard-Debugging-Funktionen. Wenn Sie mit der rechten Maustaste auf den Bereich klicken, in dem Ihre Aktionen in Redux Devtools aufgeführt sind, und "Netzwerkinspektion zulassen" auswählen, können Sie Ihre API-Aufrufe auf der Registerkarte "Netzwerk" von Chrome Devtools überprüfen.

Zusammenfassend ist es fantastisch, diese alles an einem Ort zu haben! Wenn Sie keinen von ihnen benötigen, können Sie ihn ein- und ausschalten. Holen Sie sich React Native Debugger und genießen Sie das Leben.

Nunchakus
quelle
4

Dies ist die alternative Möglichkeit, die native Debugger-Anwendung "React" zu verwenden.

Sie können die Anwendung über den folgenden Link herunterladen. Sie ist eine sehr gute Anwendung zum Verwalten des Redux-Speichers zusammen mit dem Quellcode.

React-Native-Debugger

Außerdem können Sie jetzt einige Tage direkt den folgenden Link verwenden, um Ihnen zu helfen.

Chrome-Entwickler-Tools

Hardik Virani
quelle
3

Es gibt auch einen sehr guten Debugernamen Reactotron. https://github.com/infinitered/reactotron

Sie müssen sich nicht im Debug-Modus befinden, um einen Datenwert zu sehen, und es gibt viele Optionen.

Schauen Sie sich das an, das wirklich nützlich ist. ;)

Youcef EL KAMEL
quelle
Danke dir! Wir verwendeten RN 0.59, das mit Flipper nicht kompatibel zu sein schien.
Chichilatte
3

In React-Native ist das Debuggen viel einfacher.

  • Zum Debuggen in IOS verwenden

cmd + d

Strg + cmd + z (für Simulator)

  • In Android zu debuggen

Gerät mit Berührung schütteln (Stellen Sie sicher, dass Ihre Entwickleroption aktiviert ist)

jatin.7744
quelle
1
Schöne Erklärung.
Narendra Solanki
3

Schritt 1: Platzieren Sie, debuggerwo immer Sie das Skript stoppen möchten, wie zum Beispiel:

  async saveItem(item, selectedValue) {
    debugger
    try {
        await AsyncStorage.setItem(item, selectedValue);
    }
    catch (error) {
        console.error('AsyncStorage error: ' + error.message);
    }
}

Dadurch wird der Debugger angehalten, wenn jemals eine Steuerung für diesen Codeblock erfolgt.

Schritt 2: Drücken Sie Cmd+Dauf den iOS-Emulator und Cmd+Mauf den Android-Simulator . Wenn Sie ein echtes Gerät haben, schütteln Sie das Gerät, um das Entwicklermenü zu öffnen. Wenn Sie das Gerät nicht schütteln möchten, folgen Sie diesem Blog

Schritt 3: Wählen Sie Enable Remote JS Debugging, dies öffnet Chrome

Geben Sie hier die Bildbeschreibung ein

Schritt 4: Wählen SieDeveloper Tools.

Geben Sie hier die Bildbeschreibung ein

Schritt 5: Ihr Debugger wird in der SourcesRegisterkarte angehalten, wo immer Sie debuggerin Ihren Code geschrieben haben. Gehen Sie zur Konsole und geben Sie alle Parameter ein, die Sie debuggen möchten (die im Codeblock vorhanden sind): Geben Sie hier die Bildbeschreibung ein Um zum nächsten Debuggerpunkt zu gelangen, gehen Sie erneut zu Quellen -> klicken Sie auf die Schaltfläche Skriptausführung fortsetzen (blaue Schaltfläche in der rechten Ecke).

Platzieren Sie den Debugger überall dort, wo Sie das Skript anhalten möchten.

Viel Spaß beim Debuggen!

Aishwarya
quelle
3

Sie können Safari verwenden, um die iOS-Version Ihrer App zu debuggen, ohne "JS remote debuggen" aktivieren zu müssen. Führen Sie einfach die folgenden Schritte aus:

1. Enable Develop menu in Safari: Preferences  Advanced  Select "Show Develop menu in menu bar"
2. Select your app's JSContext: Develop → {Your Simulator} → Automatically Show Web Inspector for JS JSContext
3. Safari's Web Inspector should open which has a Console and a Debugger
Hussam Kurd
quelle
3

Wenn Sie zuerst in Ihrem iOS-Simulator die Taste [Befehl + D] drücken, wird dieser Bildschirm angezeigt.

Geben Sie hier die Bildbeschreibung ein

Klicken Sie dann auf die Schaltfläche JS remote debuggen.

Nachdem Sie möglicherweise die Seite React Native Debugger wie folgt sehen.

Geben Sie hier die Bildbeschreibung ein

Öffnen Sie dann Ihren Inspektor [f12] und gehen Sie zum Debuggen der Konsolenregisterkarte! :) :)

Jinsung Sunwoo
quelle
2
  1. Wenn Sie einen Emulator verwenden, verwenden Sie Ctrl+ M& Simulator Cmd+D

  2. Klicken Sie auf - js remote debuggen

  3. Google Chrome wechselt zur Konsole

Krishnendu Bhattacharyya
quelle
1

Es ist eigentlich ziemlich einfach. Drücken Sie einfach cmd D (falls auf einem Mac) und der Simulator erstellt ein Popup-Menü. Von dort aus klicken Sie einfach auf "JS remote debuggen" oder so ähnlich. Beachten Sie, dass das Ausführen des Debuggers beim Ausführen von Code für bestimmte Pakete bekanntermaßen Probleme verursacht. Ich hatte ein Problem mit React-Native-Maps und dem Debugger. Aber das wurde behoben. Zum größten Teil sollte es dir aber gut gehen.

S. Sinha
quelle