1 00:00:02,300 --> 00:00:06,340 Manchmal bringt Sie das Konsolenprotokoll allein nicht so weit, Sie 2 00:00:06,380 --> 00:00:11,270 benötigen mehr Hilfe und in solchen Fällen können Sie Ihren Code remote debuggen. 3 00:00:11,270 --> 00:00:17,750 Dazu müssen Sie das Debugging-Menü auf diesen Emulatoren oder auch auf realen Geräten öffnen, 4 00:00:17,750 --> 00:00:23,650 wenn Sie mit diesen arbeiten. Sie tun dies, indem Sie auf 5 00:00:23,660 --> 00:00:34,030 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. 6 00:00:34,030 --> 00:00:38,360 Jetzt sehen Sie dort einige Optionen und wir werden uns die wichtigen in diesem Modul ansehen. 7 00:00:38,360 --> 00:00:41,780 Die Option, die wir jetzt wählen, ist das Remote-Debuggen von js. 8 00:00:42,050 --> 00:00:48,290 Wenn Sie diese Taste drücken, sollte sich im Browser eine neue Registerkarte öffnen, die automatisch zu localhost 1901 navigiert, in 9 00:00:48,680 --> 00:00:54,700 meinem Fall hier, Slash-Debugger-Benutzeroberfläche, die sich automatisch öffnen sollte. Damit dies korrekt funktioniert, stellen Sie sicher, dass 10 00:00:54,690 --> 00:01:01,160 Sie in Ihren Expo-Entwicklungstools die Verbindung so eingestellt haben, dass sie alarmiert oder lokal ist und nicht getunnelt. Andernfalls 11 00:01:01,160 --> 00:01:08,490 ist dies sehr langsam. Dieser Debugger bietet Ihnen diese neue Registerkarte Öffnen Sie jetzt die Chrome-Entwicklertools mit der Verknüpfung, die Sie 12 00:01:08,500 --> 00:01:13,650 hier und da sehen sollten. Sie sehen jetzt auch dasselbe Konsolenprotokoll, das Sie hier erhalten, 13 00:01:14,790 --> 00:01:19,890 sodass Sie jetzt auch eine andere Konsole haben, in die Sie schauen können, mit 14 00:01:19,890 --> 00:01:25,320 der Sie möglicherweise bequemer arbeiten können , nur um dieses Beispiel noch einmal schnell mit 15 00:01:25,320 --> 00:01:26,930 den Kurszielen zu zeigen. 16 00:01:26,940 --> 00:01:36,290 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 17 00:01:36,290 --> 00:01:37,040 es erweitern. 18 00:01:37,040 --> 00:01:39,050 Das Arbeiten ist also möglicherweise etwas 19 00:01:39,140 --> 00:01:41,420 bequemer, da Sie es aus der Webentwicklung kennen, 20 00:01:41,420 --> 00:01:44,760 falls Sie ein Webentwickler sind, aber Sie können auch mehr tun. 21 00:01:44,780 --> 00:01:50,570 Sie können beispielsweise in Quellen eintauchen, um in Ihren Quellcode einzutauchen und Haltepunkte festzulegen. Erweitern Sie einfach diese Debugger-Worker-Sache hier, erweitern 22 00:01:50,570 --> 00:01:56,870 Sie diese Ordner und Sie finden die Ordnerstruktur, mit der Sie auch arbeiten, zum 23 00:01:56,900 --> 00:01:58,750 Beispiel dort in 24 00:01:58,820 --> 00:02:05,000 Ihrem Benutzerordner hier, finden Sie die App. js Datei finden Sie die Komponenten. 25 00:02:05,450 --> 00:02:10,950 Also jetzt in der App. js Wenn Sie diese Datei öffnen, sehen Sie Ihren Code 26 00:02:10,960 --> 00:02:12,510 so, wie Sie ihn 27 00:02:12,550 --> 00:02:15,560 geschrieben haben. In der nicht kompilierten Version ist dies großartig, da 28 00:02:15,700 --> 00:02:21,880 es einfach ist, Ihren Code dort und jetzt hier zu erkennen. Nehmen wir beispielsweise an, Sie möchten den Code stoppen, wenn Sie 29 00:02:21,880 --> 00:02:25,350 Wenn Sie ein neues Ziel hinzufügen möchten, können Sie einen Haltepunkt hinzufügen, 30 00:02:25,360 --> 00:02:27,370 indem Sie hier links neben der Zeilennummer 31 00:02:27,370 --> 00:02:32,730 auf diese blaue Markierung klicken. Jetzt wird Ihre Codeausführung gestoppt, wenn Sie das nächste Mal auf diese Codezeile klicken. 32 00:02:32,830 --> 00:02:36,930 Jetzt habe ich das Debuggen auf dem Android-Emulator aktiviert, sodass es nicht aufhört, wenn ich es auf 33 00:02:36,940 --> 00:02:39,980 iOS versuche. Es hört auf, wenn ich es auf Android versuche. 34 00:02:40,000 --> 00:02:47,500 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 35 00:02:47,500 --> 00:02:48,250 Android gehen. 36 00:02:48,310 --> 00:02:49,800 Sie können diese Warnung 37 00:02:49,840 --> 00:02:57,340 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 38 00:02:57,340 --> 00:03:04,030 jetzt sehen Sie, dass dies hier hängen bleibt, denn wenn Sie zu den Entwicklertools zurückkehren, ist dies jetzt der Fall angehalten, 39 00:03:04,060 --> 00:03:06,580 sehen Sie, dass dies jetzt blau hervorgehoben ist, 40 00:03:06,670 --> 00:03:12,610 es wird bestanden und jetzt ist das Coole, dass Sie mit diesen Steuerelementen Schritt für Schritt durch Ihren Code 41 00:03:12,760 --> 00:03:18,400 gehen können, einfach mit ihnen herumspielen und auch über den zu schauenden Dingen schweben können in Ihren Code, 42 00:03:18,400 --> 00:03:21,060 um beispielsweise den aktuellen Wert im Zieltitel anzuzeigen. 43 00:03:21,070 --> 00:03:25,480 Jetzt können wir diese Zeile einfach Schritt für Schritt mit dieser Schaltfläche 44 00:03:25,480 --> 00:03:30,220 durchlaufen, Sie können mit dieser Schaltfläche in einen Funktionsaufruf eintreten oder mit dieser 45 00:03:31,210 --> 00:03:35,430 Schaltfläche aussteigen und mit dieser blauen Wiedergabetaste die Code-Ausführung jederzeit fortsetzen. 46 00:03:38,030 --> 00:03:43,850 Dies kann ein sehr leistungsfähiges Werkzeug sein, um wirklich tief in Ihren Codefluss einzutauchen, da Sie so 47 00:03:43,850 --> 00:03:45,810 vollständig verstehen können, was vor 48 00:03:45,890 --> 00:03:51,240 sich geht, Ihre Werte zur Laufzeit überprüfen und die volle Kontrolle über Ihren Code erhalten können. 49 00:03:51,260 --> 00:03:56,960 Wenn Sie mehr über die Verwendung der Chrome-Debugging-Tools erfahren möchten, finden Sie im Anhang dieser 50 00:03:56,990 --> 00:04:01,040 Vorlesung einen hilfreichen Link mit weiteren Informationen zu den Chrome-Debugging-Tools.