Wie debuggt man seinen React-Code mit React Native, während die App im App-Simulator ausgeführt wird?
264
Wie debuggt man seinen React-Code mit React Native, während die App im App-Simulator ausgeführt wird?
Antworten:
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 .
quelle
Cmd+M
auf OS X und Android seinDebuggen Reagieren Sie native Apps
Gehen Sie wie folgt vor, um den Javascript-Code Ihrer React-App zu debuggen:
Command + D
und eine Webseite sollte sich unter öffnen http: // localhost: 8081 / debugger-ui . (Chrome vorerst nur) oder verwenden Sie dieShake Gesture
Command + Option + I
, um die Chrome Developer-Tools zu öffnen, oder öffnen Sie sie überView
->Developer
->Developer Tools
.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ählen
React
Registerkarte während die Entwicklertools geöffnet sind.Live Reload
Gehen Sie wie folgt vor, um Live Reload zu aktivieren:
Control + Command + Z
.Enable/Disable Live Reload
,Reload
undEnable/Disable Debugging
Optionen.quelle
Wenn Sie für eine Android-App Genymotion verwenden, können Sie das Menü durch Drücken von umschalten.
CMD + m
Möglicherweise müssen Sie es jedoch im Menü aktivieren, indem Sie dies tun.CMD + m
Sie auf Debug in Chrome klickenquelle
debug in chrome
durch ersetztstart debug remotely
.cmd + m
oderctrl + m
, und wählen Siestart debug remotely
aus dem Popup - Fenster in Ihrem SimulatorNeben den anderen Antworten. Sie können reaktionsnativ mit der Debugger-Anweisung debuggen
Beispiel:
Ihre Chrome-Entwicklungswerkzeuge müssen geöffnet sein, damit dies funktioniert
quelle
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).
Es wird ein Bildschirm wie das Bild angezeigt
dann wählen Sie
Es öffnet sich automatisch ein neues Fenster. Öffnen Sie dann das Inspect-Element oder drücken Sie F12 für die Konsole.
quelle
Probieren Sie dieses Programm aus: https://github.com/jhen0409/react-native-debugger
Funktioniert auf :
windows
,osx
undlinux
.Es unterstützt:
react native
undredux
Sie können auch den virtuellen Komponentenbaum überprüfen und Stile ändern, die in der App angezeigt werden.
quelle
console.log(url)
, aber ich kann nicht finden, wo die Ausgabe ist.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.
quelle
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
quelle
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.
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.
console.log('yeah, seriously.')
Ich lasse das Programm lieber laufen und protokolliere einige Informationen, als einen
debugger
Haltepunkt 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.)Enable Chrome Debugging
mitdebugger;
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 meisten
undefined 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.
quelle
Stattdessen Cmd+Mfür Android Emulator Drücken Sie F10in Windows. Der Emulator zeigt alle reaktionsnativen Debug-Optionen an.
quelle
Führen Sie dies im Terminal für Android-Protokoll.
quelle
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.
quelle
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.
quelle
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:
Jetzt geht es nur noch darum, Ihren Code anzumelden. z.B:
console.tron.log('debug')
quelle
Gehen Sie zu den Quellen im oberen Menü und suchen Sie Ihre js-Klassendatei im Datei-Explorer auf der rechten Seite
Sie können der Ansicht Haltepunkte hinzufügen und den Code dort debuggen, wie Sie im Bild sehen können.
quelle
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.
quelle
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
quelle
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 .
quelle
Wenn Sie das Debuggen standardmäßig aktivieren möchten:
So funktioniert dies auf Android:
Referenz: Starten Sie eine React Native-App mit standardmäßig aktiviertem "Debug JS Remote"
quelle
Sehr einfach, nur zwei Befehle
quelle
Angenommen, Sie möchten dieses Menü im Android-Emulator anzeigen
Versuchen Sie
⌘+m
dann, 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 to
angezeigt wird, gehen Sie zu den laufenden Emulatoreinstellungen und wählen Sie in der Combobox / Dropdown-Liste dieEmulator controls (default)
Option aus.Und dann erneut versuchen
⌘+m
.Ich hoffe das hilft, es hat bei mir funktioniert.
quelle
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.
quelle
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
quelle
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. ;)
quelle
In React-Native ist das Debuggen viel einfacher.
quelle
Schritt 1: Platzieren Sie,
debugger
wo immer Sie das Skript stoppen möchten, wie zum Beispiel:Dadurch wird der Debugger angehalten, wenn jemals eine Steuerung für diesen Codeblock erfolgt.
Schritt 2: Drücken Sie
Cmd+D
auf den iOS-Emulator undCmd+M
auf 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 BlogSchritt 3: Wählen Sie
Enable Remote JS Debugging
, dies öffnet ChromeSchritt 4: Wählen Sie
Developer Tools.
Schritt 5: Ihr Debugger wird in der
Sources
Registerkarte angehalten, wo immer Siedebugger
in 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!
quelle
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:
quelle
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! :) :)
quelle
Wenn Sie einen Emulator verwenden, verwenden Sie Ctrl+ M& Simulator Cmd+D
Klicken Sie auf - js remote debuggen
Google Chrome wechselt zur Konsole
quelle
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.
quelle