wake-up-neo.com

Wie debuggen Sie React Native?

Wie debuggen Sie ihren React-Code mit React Native, während die App im App-Simulator ausgeführt wird? 

188
McG

Cmd+D aus dem Simulator. Chrome wird eingeblendet und von dort aus können Sie die Entwicklertools verwenden.

Bearbeiten:

Dies ist nun in den Hilfedokumenten verlinkt.

140
xanadont

Debuggen Reagieren Sie native Apps

So debuggen Sie den Javascript-Code Ihrer Reakt-App:

  1. Führen Sie Ihre Anwendung im iOS-Simulator aus.
  2. Drücken Sie Command + D und eine Webseite sollte sich unter http: // localhost: 8081/debugger-ui öffnen. (Chrome nur für jetzt) ​​oder verwenden Sie den Shake Gesture
  3. Aktivieren Sie Pause bei erkannten Ausnahmen für ein besseres Debugging-Erlebnis.
  4. Drücken Sie Command + Option + I, um die Chrome Developer Tools zu öffnen, oder öffnen Sie es über View -> Developer -> Developer Tools.
  5. Sie sollten jetzt wie üblich debuggen können.

Wahlweise

Installieren Sie die React Developer Tools -Erweiterung für Google Chrome. Auf diese Weise können Sie durch die Ansichtshierarchie navigieren, wenn Sie die Registerkarte React auswählen, wenn die Entwicklerwerkzeuge geöffnet sind.

Live Reload

Um Live Reload zu aktivieren, gehen Sie folgendermaßen vor:

  1. Führen Sie Ihre Anwendung im iOS-Simulator aus.
  2. Drücken Sie Control + Command + Z.
  3. Sie sehen jetzt die Optionen Enable/Disable Live Reload, Reload und Enable/Disable Debugging.
69
Jiuhong Deng

Bei einer Android-App können Sie, wenn Sie Genymotion verwenden, das Menü durch Drücken von CMD + m umschalten. Möglicherweise müssen Sie es jedoch im Menü aktivieren, indem Sie dies tun.

  • Untick Widget
  • Aktivieren Sie es durch CMD + m Klicken Sie auf debug in chrome
45
John Lim

cmd ⌘ + D Seltsamerweise hat es bei mir nicht funktioniert. Drücken Sie ctrl + cmd ⌘ + Z im iOS-Simulator habe ich das Debug-Browser-Fenster für mich gestartet.

Dies ist der Bildschirm, der erscheint:

React Native debugging options

Weitere Details hier.

23
bigtex777

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

beispiel:

debugger; //breaks execution

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

23
drikoda

 enter image description here

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

Funktioniert mit: windows, osx und linux.

Es unterstützt: react native und redux

Sie können auch die Struktur der virtuellen Komponenten untersuchen und die in der App enthaltenen Stile ändern.

22
Rob

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

adb Shell input keyevent 82

es wird ein Bildschirm wie das Bild angezeigt  enter image description here

dann auswählen 

debug JS Remotely

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

14
bpsourav21

Debuggen von reaktiver 0.40.0 unter Debian 8 (Jessie) kann durch Navigieren zu http: // localhost: 8081/debugger-ui in Chromium oder Firebug durchgeführt werden, während Ihre App im Android-Simulator ausgeführt wird. Um auf das In-App-Entwicklermenü zuzugreifen, führen Sie den folgenden Befehl in einem anderen Terminalfenster aus, wobei here darauf hingewiesen wird:

adb Shell input keyevent 82

14
BdN3504

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

  1. Live Nachladen

    reaktiver-Modus macht es sehr einfach, Ihre Änderungen mit den ⌘ + R-Tasten oder sogar mit enable live reload zu sehen. Wenn Sie eine Fehlermeldung erhalten, können Sie anhand der Zeilennummer von diesem roten Bildschirm einen Hinweis erhalten. Ein paar Undo machen Sie wieder funktionsfähig und beginnen wieder von vorne. 

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

    Ich bevorzuge es mir lieber, das Programm laufen zu lassen und einige Informationen zu protokollieren, als einen debugger-Haltepunkt hinzuzufügen. (Ein schwieriger Debugger ist nützlich, wenn Sie versuchen, mit externen Paketen/Bibliotheken zu arbeiten, und er wird mit automatischer Vervollständigung geliefert, sodass Sie wissen, welche anderen Methoden Sie verwenden können.)

  3. Enable Chrome Debuggingmitdebugger;Haltepunkt in Ihrem Programm.

Nun, es hängt von der Art der aufgetretenen Fehler und Ihren Präferenzen beim Debuggen ab. Für die meisten undefined is not an object (evaluating 'something.something') sind Methode 1 und 2 für mich ausreichend. 

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

Manchmal kommt es von der reaktiven Plattform selbst, so dass das Googeln nach reaktiven Problemen definitiv hilfreich ist.

hoffe das hilft jemand da draußen.

13
chinloong
adb logcat *:S ReactNative:V ReactNativeJS:V

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

9
nagasundaram I

Für mich ist der beste Weg zum Debuggen von React-Native die Verwendung von "Reactotron"

Installieren Sie Reactotron und fügen Sie diese zu Ihrem 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, sich in Ihren Code einzuloggen. __ Beispiel: console.tron.log('debug')

8
Vinay
  1. Führen Sie Ihre App im Simulator aus - reaktives Run-Ios
  2. Drücken Sie Strg + D und klicken Sie auf Debug JS Remote

 enter image description here

  1. die Webseite sollte sich unter http: // localhost: 8081/debugger-ui öffnen. Wenn nicht, geben Sie die URL ein und rufen Sie diesen Link in Chrome auf
  2. Klicken Sie mit der rechten Maustaste auf die Seite, und klicken Sie auf Prüfen, um die Entwicklerwerkzeuge für Chrome zu öffnen

 enter image description here

  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 Haltepunkte in die Ansicht einfügen und den Code darin debuggen, wie Sie im Bild sehen können.

8

Anstatt Cmd+M, für Android Emulator Press F10 in Windows. Der Emulator zeigt nun alle reaktionsspezifischen Debug-Optionen an.

image

7
priyanga

Wenn Sie Microsoft Visual Code verwenden, installieren Sie die Erweiterung React Native Tools. Dann können Sie Haltepunkte hinzufügen, indem Sie einfach auf die gewünschte Zeilennummer klicken. Gehen Sie folgendermaßen vor, um die App einzurichten und zu debuggen:  SETUP  RUN

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

6
radiance

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

6
Sujeesh Balan

Ein Leerzeichen im Dateipfad verhindert das Cmd+D von der Arbeit. Ich habe mein Projekt an einen Ort ohne Leerzeichen verschoben und den Chrome-Debugger endlich zum Laufen gebracht. Scheint wie ein Bug .

5
micksabox

Standardmäßig hat mein ios-Simulator die Tastenanschläge nicht erkannt, 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. 

5
McG

Angenommen, Sie möchten dieses Menü unter Android-Emulator .__ anzeigen.  enter image description here

  • Versuchen Sie dann ⌘+m, um diesen Dev-Einstellungsdialog im Android-Emulator auf einem Mac anzuzeigen.

  • 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.  enter image description here

  • Und dann ⌘+m erneut versuchen.

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

 enter image description here

  • Und dann ⌘+m erneut versuchen.

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

5
Nkokhelox

Sehr einfach nur zwei Befehle

For IOS $ react-native log-ios
For Android $ react-native log-Android
4
Abhijit Chakra

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

Redux Devtools : Hier können Sie Ihre Aktionen anzeigen und schrittweise vor und zurück gehen. Außerdem können Sie Ihren Redux-Store anzeigen. Außerdem verfügt er über eine Funktion, die den vorherigen Status automatisch mit dem aktualisierten Status für jede Aktion unterscheidet. So können Sie das sehen, wenn Sie durch eine Reihe von Aktionen vor- und zurückgehen. 

React Devtools : Damit können Sie eine bestimmte Komponente untersuchen, nämlich alle Requisiten sowie den Zustand der Komponenten. Wenn Sie einen Teil des Komponentenstatus haben, der ein boolescher Wert ist, können Sie durch Klicken darauf klicken, um ihn umzuschalten und zu sehen, wie Ihre App auf Änderungen reagiert. Tolle Funktion.

Chrome Devtools Ermöglicht es Ihnen, alle Ausgaben Ihrer Konsole anzuzeigen, Haltepunkte zu verwenden und den Debugger anzuhalten. usw. Standard-Debugging-Funktionen. Wenn Sie mit der rechten Maustaste auf den Bereich klicken, in dem Ihre Aktionen in Redux Devtools aufgelistet 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 an einem Ort zu haben. Wenn Sie keinen von ihnen benötigen, können Sie ihn ein- und ausschalten. Reagieren Sie nativen Debugger und genießen Sie das Leben.

4
Nunchucks

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

Für iOS: Cmd + D oder Shake the Phone, um das Menü anzuzeigen

Stellen Sie sicher, dass Sie Chrom haben.

Wählen Sie im angezeigten Menü die Option Debug JS Remote-Option aus.

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

Dort finden Sie die Konsole und Sie können Protokolle sehen, die notiert werden.

4
Naveen Vignesh

Dies ist die alternative Methode, um eine native Debugger-Anwendung zu verwenden.

sie können die Anwendung über den folgenden Link herunterladen. Diese Anwendung ist sehr gut für die Verwaltung des Redux-Speichers zusammen mit dem Quellcode.

Reaktiver-Debugger

nun, ein Tag, den Sie direkt unten verwenden können, um Ihnen zu helfen.

Chrome-Entwickler-Tools

3
Hardik Virani

Es gibt auch einen sehr guten Debugger-Namen 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, was wirklich nützlich ist. ;) 

2
Youcef EL KAMEL

In React-Native ist das Debuggen viel einfacher.

  • Zum Debuggen in IOS verwenden 

cmd + d 

strg + cmd + z (für Simulator)

  • In Android debuggen 

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

1
jatin.7744

um Ihre reaktive native App zu debuggen, gehen Sie einfach zu folgender Adresse:

localhost: 8081/debugger-ui in Ihrem Standardbrowser (Chrome) und öffnen Sie Entwicklertools, um Ihre reaktive native App zu debuggen

1
André Abboud

Es ist eigentlich ziemlich einfach. Drücken Sie einfach cmd D (wenn auf einem Mac) und der Simulator erstellt ein Popup-Menü. Von dort aus klicken Sie einfach auf "Debuggen von JS Remote" oder etwas Ähnliches. Beachten Sie, dass die Ausführung des Debuggers während der Ausführung 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. Meistens sollte es dir aber gut gehen. 

1
S. Sinha

Beste Möglichkeit zum Debuggen von nativen Android- und iOS-Apps mithilfe von Visual Code Studio

Schritt 1.

Installiere Reagiere Native - Full Pack Erweiterung

Schritt 2.

Verbinden Sie das Mobilgerät mit USB-Debugging-Modus oder öffnen Sie den Emulator aus dem Android-Studio.

Schritt 3.

Klicken Sie im Visual Code Studio im linken Menü auf die Debugging-Option. Klicken Sie auf Konfiguration hinzufügen und wählen Sie Native reagieren und erstellen Sie dann launch.json

Schritt 4.

Öffnen Sie die Dev-Option im Telefon auf dem langen Rücken, drücken Sie oder schütteln Sie das Telefon und aktivieren Sie Debug js remote

Schritt 5.

Letzter Schritt: Klicken Sie auf die Wiedergabetaste und wählen Sie Android debuggen oder iOS debuggen

Weitere Informationen finden Sie unter diesem Link

https://medium.com/@tunvirrahmantusher/Android-debug-with-vscode-for-react-native-96f54d73462a

1

Wenn Sie Nuclide im Atom Editor für React Native App Development verwenden, können Sie auch den "Element Inspector" verwenden, der Ihnen hilft, Änderungen an Requisiten und Statuswerten zu beobachten, wenn die App ist Wird auf dem Gerät in der Entwicklungsphase ausgeführt. Weitere Informationen finden Sie hier - https://nuclide.io/docs/platforms/react-native/#element-inspectorgeben Sie hier die Bildbeschreibung ein

1
bygirish
  1. Wenn Sie Emulator verwenden, verwenden Sie Ctrl+M & Simulator Cmd+D

  2. Klicken Sie auf - Debug js remote

  3. Google Chrome wechselt zur Konsole

Sie können React Native Debugger von brew installieren. Es ist komfortabler als ein Debugger in Chrom

0

Schritt 1: Platzieren Sie debugger an der Stelle, an der Sie das Skript stoppen möchten, wie:

  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 die Kontrolle über diesen Codeblock erfolgt.

Schritt 2: Drücken Sie Cmd+D am ios-Emulator und Cmd+M am Android-Simulator . Wenn Sie über ein echtes Gerät verfügen, schütteln Sie das Gerät, um das dev-Menü zu öffnen, wenn Sie es ablegen will das Gerät nicht schütteln folgen diesem Blog

Schritt 3: Wählen Sie Enable Remote JS Debugging. Dadurch wird Chrome geöffnet

 enter image description here

Schritt 4:Developer Tools. auswählen

 enter image description here

Schritt 5: Ihr Debugger wird auf der Registerkarte Sources angehalten, wo immer Sie debugger in Ihrem Code geschrieben haben. Gehen Sie zur Konsole und geben Sie alle Parameter ein, die Sie debuggen möchten (die im Codeblock vorhanden sind) wie:  enter image description here Um wieder zum nächsten Debugger-Punkt zu gelangen, gehen Sie zu Quellen -> klicken Sie auf die Schaltfläche Skriptausführung fortsetzen (rechte blaue Schaltfläche).

Platzieren Sie den Debugger an einer beliebigen Stelle, an der Sie das Skript anhalten möchten.

Viel Spaß beim Debuggen !! 

0
Aishwarya

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

import { NativeModules } from 'react-native';

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

Um dies auf Android zum Laufen zu bringen:

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 Remotely"

0
Olcay Ertaş

Ich benutze diese Bibliothek zum Debuggen reaktiver Projekte

https://github.com/jhen0409/react-native-debugger Dazu gehört 

  1. Enthält den React Inspector von reave-devtools-core.
  2. Enthält Redux DevTools, erstellt dieselbe API mit der Erweiterung redux-devtools.

oder du kannst verwenden 

For IOS $ react-native log-ios
For Android $ react-native log-Android
0
Sarmad

In Windows und mit dem Android-Emulator können Sie folgende Schritte ausführen:

  1. Drücken Sie nach dem Ausführen des Emulators und der darauf befindlichen App die Taste Menu und wählen Sie "Debug JS Remote" oder "Debug in Chrome" (abhängig vom verwendeten Emulator). Sie können das nächste Bild als Referenz sehen: Emulator mit Schritten Bild
  2. Eine neue Chrome-Registerkarte wird angezeigt. Sie müssen Strg + ⇧J drücken, um die Entwicklertools anzuzeigen und die Debug-Schritte zu verfolgen. Sehen Sie dieses Bild als Referenz

Zusätzlich sollten Sie die Funktion console.log() verwenden, um den Debugging-Prozess anschaulicher zu gestalten.

0
Jhonny Banegas

Sie können Safari zum Debuggen der iOS-Version Ihrer App verwenden, ohne "Debug JS Remotely" aktivieren zu müssen. Führen Sie dazu 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
0
Hussam Kurd

Sie können auch die benutzerdefinierte Bibliothek verwenden, wenn Sie Ihr echtes Telefon nicht alle 2 Minuten schütteln möchten

Ich habe eine Bibliothek erstellt, mit der Sie verwenden Sie 3 Fingerberührungen anstelle von Shake, um das Entwicklungsmenü zu öffnen, wenn Sie sich im Entwicklungsmodus befinden

https://github.com/pie6k/react-native-dev-menu-on-touch

Sie müssen nur Ihre App in sich wickeln:

devMenuOnTouch aus 'reag-native-dev-Menü bei Berührung' importieren; // oder: {DevMenuOnTouch} aus 'reag-native-dev-Menü-bei-Berührung' importieren

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

Es ist wirklich nützlich, wenn Sie auf echten Geräten debuggen müssen und Kollegen neben Ihnen sitzen.

0
pie6k

Wenn Sie Ihre App auf realen Geräten ausführen, die mit dem Laptop verbunden sind, können Sie sie mit react-native log-ios oder react-native log-Android über das Terminal debuggen.

0
Urska

In der neuen Version von reag-native können Sie react-native log-Android oder react-native log-Android verwenden, um Protokolle Ihrer Anwendung im Dev-Modus anzuzeigen.

0
zerob4wl
  1. im Terminal laufen adb logcat *:S ReactNative:V ReactNativeJS:V
  2. projekt in Android Studio öffnen, logcat öffnen (Schaltfläche im unteren Bereich)
  3. im Terminal laufen react-native run-Android

Nach dem Erstellen sollten Sie Detailprotokolle in Android Studio in logcat anzeigen.

0
tavriaforever

Sie können expo zum Debuggen verwenden: https://expo.io/

Mit Expo können Webentwickler wirklich native Apps erstellen, die für beide Zwecke geeignet sind iOS und Android, indem Sie sie einmal in nur JavaScript schreiben. Es ist offen Quelle, frei und verwendet React Native.

Dies ist ein großartiges Werkzeug, und Sie können diesen Workshop im React Europe conf anschauen:

https://www.youtube.com/watch?v=HygXkQDMSGU&t=6675s

0

Es hängt wirklich davon ab, was ich tue. Wenn ich Änderungen an der Benutzeroberfläche durchführe oder die Benutzeroberfläche debugge, aktiviere ich normalerweise das Live- und Hot-Reloading und nehme Änderungen vor, um sofort ein Feedback zu erhalten. Wenn es etwas technischer ist, schalte ich JS-Debugging ein, um den Status der App zu überprüfen. Da das Neuladen jedoch so schnell ist, dass es nativ reagiert, wenn der Status zu unordentlich ist, logge ich mich einfach ein.

0
Jeff

Eine Technik, die ich ähnlich wie eine Debugging-Taktik in Android verwende, besteht darin, eine globale Variable namens TAG in alle meine .js-Dateien aufzunehmen. 

const TAG = 'APP_NAME+SCREEN_NAME';

Wenn nötig, mache ich: console.log(TAG + 'ACTION');

Auf diese Weise kann ich Aktionen nachverfolgen und sehen, woher die Protokollanweisungen kommen. 

0
ish

Nativer Debugger reagieren. Es hilft mir, 90% meiner Probleme zu lösen

0
Gabriel Arantes