Manchmal bringt Sie das Konsolenprotokoll allein nicht so weit, Sie
benötigen mehr Hilfe und in solchen Fällen können Sie Ihren Code remote debuggen.
Dazu müssen Sie das Debugging-Menü auf diesen Emulatoren oder auch auf realen Geräten öffnen,
wenn Sie mit diesen arbeiten. Sie tun dies, indem Sie auf
den iOS-Simulator drücken, Befehl d, und dieses Menü wird hier geöffnet. Unter Android drücken Sie Befehl oder Steuerung m, und dieses Menü wird geöffnet.
Jetzt sehen Sie dort einige Optionen und wir werden uns die wichtigen in diesem Modul ansehen.
Die Option, die wir jetzt wählen, ist das Remote-Debuggen von js.
Wenn Sie diese Taste drücken, sollte sich im Browser eine neue Registerkarte öffnen, die automatisch zu localhost 1901 navigiert, in
meinem Fall hier, Slash-Debugger-Benutzeroberfläche, die sich automatisch öffnen sollte. Damit dies korrekt funktioniert, stellen Sie sicher, dass
Sie in Ihren Expo-Entwicklungstools die Verbindung so eingestellt haben, dass sie alarmiert oder lokal ist und nicht getunnelt. Andernfalls
ist dies sehr langsam. Dieser Debugger bietet Ihnen diese neue Registerkarte Öffnen Sie jetzt die Chrome-Entwicklertools mit der Verknüpfung, die Sie
hier und da sehen sollten. Sie sehen jetzt auch dasselbe Konsolenprotokoll, das Sie hier erhalten,
sodass Sie jetzt auch eine andere Konsole haben, in die Sie schauen können, mit
der Sie möglicherweise bequemer arbeiten können , nur um dieses Beispiel noch einmal schnell mit
den Kurszielen zu zeigen.
Wenn ich meine Kursziele hier auf der Konsole protokolliere und dies speichere, wird dies neu erstellt und jetzt sehen wir das Array hier und können
es erweitern.
Das Arbeiten ist also möglicherweise etwas
bequemer, da Sie es aus der Webentwicklung kennen,
falls Sie ein Webentwickler sind, aber Sie können auch mehr tun.
Sie können beispielsweise in Quellen eintauchen, um in Ihren Quellcode einzutauchen und Haltepunkte festzulegen. Erweitern Sie einfach diese Debugger-Worker-Sache hier, erweitern
Sie diese Ordner und Sie finden die Ordnerstruktur, mit der Sie auch arbeiten, zum
Beispiel dort in
Ihrem Benutzerordner hier, finden Sie die App. js Datei finden Sie die Komponenten.
Also jetzt in der App. js Wenn Sie diese Datei öffnen, sehen Sie Ihren Code
so, wie Sie ihn
geschrieben haben. In der nicht kompilierten Version ist dies großartig, da
es einfach ist, Ihren Code dort und jetzt hier zu erkennen. Nehmen wir beispielsweise an, Sie möchten den Code stoppen, wenn Sie
Wenn Sie ein neues Ziel hinzufügen möchten, können Sie einen Haltepunkt hinzufügen,
indem Sie hier links neben der Zeilennummer
auf diese blaue Markierung klicken. Jetzt wird Ihre Codeausführung gestoppt, wenn Sie das nächste Mal auf diese Codezeile klicken.
Jetzt habe ich das Debuggen auf dem Android-Emulator aktiviert, sodass es nicht aufhört, wenn ich es auf
iOS versuche. Es hört auf, wenn ich es auf Android versuche.
Wir hätten es auch auf iOS aktivieren können, hier mit Debug-Remote-JS, aber das habe ich nicht getan, also lass uns mit
Android gehen.
Sie können diese Warnung
hier ignorieren, Sie können sie einfach schließen und jetzt auf Neues Ziel hinzufügen klicken und vielleicht Learn React Native eingeben, auf Hinzufügen klicken und
jetzt sehen Sie, dass dies hier hängen bleibt, denn wenn Sie zu den Entwicklertools zurückkehren, ist dies jetzt der Fall angehalten,
sehen Sie, dass dies jetzt blau hervorgehoben ist,
es wird bestanden und jetzt ist das Coole, dass Sie mit diesen Steuerelementen Schritt für Schritt durch Ihren Code
gehen können, einfach mit ihnen herumspielen und auch über den zu schauenden Dingen schweben können in Ihren Code,
um beispielsweise den aktuellen Wert im Zieltitel anzuzeigen.
Jetzt können wir diese Zeile einfach Schritt für Schritt mit dieser Schaltfläche
durchlaufen, Sie können mit dieser Schaltfläche in einen Funktionsaufruf eintreten oder mit dieser
Schaltfläche aussteigen und mit dieser blauen Wiedergabetaste die Code-Ausführung jederzeit fortsetzen.
Dies kann ein sehr leistungsfähiges Werkzeug sein, um wirklich tief in Ihren Codefluss einzutauchen, da Sie so
vollständig verstehen können, was vor
sich geht, Ihre Werte zur Laufzeit überprüfen und die volle Kontrolle über Ihren Code erhalten können.
Wenn Sie mehr über die Verwendung der Chrome-Debugging-Tools erfahren möchten, finden Sie im Anhang dieser
Vorlesung einen hilfreichen Link mit weiteren Informationen zu den Chrome-Debugging-Tools.