Wie debuggen Sie React Native?

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

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 .

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.

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

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

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

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.

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.

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:

Weitere Details hier.

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

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.

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

adb logcat *:S ReactNative:V ReactNativeJS:V

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

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:

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

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.

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')

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

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

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

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

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.

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

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 .

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"

Sehr einfach, nur zwei Befehle

For IOS $ react-native log-ios
For Android $ react-native log-android

Angenommen, Sie möchten dieses Menü im Android-Emulator anzeigen

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

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

• Und dann erneut versuchen ⌘+m.

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

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.

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

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. ;)

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)

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

Schritt 4: Wählen SieDeveloper Tools.

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): 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!

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

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

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

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

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

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

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.