Jetzt gibt es auch eine Sache in diesem Entwickler-Overlay, die Sie öffnen können, die für das Debuggen Ihrer Benutzeroberfläche äußerst
hilfreich ist, und
das ist die Option zum Umschalten des Inspektors. Um dies umzuschalten, sehen Sie diese Überlagerung unten hier und
jetzt können Sie auf Elemente in Ihrer Benutzeroberfläche klicken, um Informationen darüber zu erhalten, zum
Beispiel hier die Schaltfläche.
Jetzt sehen Sie den Rand um die Schaltfläche, die Polsterung, Sie sehen die Position im Komponentenbaum,
Sie sehen eine Konfiguration der Schaltfläche und Sie können auch einen Blick auf die
Umgebung werfen und erhalten so ein Gefühl dafür, warum die
Dinge angeordnet sind der Bildschirm, den sie sind. Sie können dies jederzeit wieder schließen, indem Sie das
Entwickler-Overlay öffnen und dann erneut auf Toggle Inspector klicken. Dies ist natürlich auch hier unter iOS verfügbar, wo Sie auch
ein Gefühl dafür bekommen, wie Dinge positioniert sind und warum sie auf diese Weise positioniert sind.
Es gibt jedoch ein noch besseres Tool, um dies zu überprüfen, und deshalb werde ich dies hier schließen, und
das ist der React Native-Debugger.
Sie können nach dem React Native-Debugger suchen. Diese Github-Seite finden Sie hier. Auf
dieser Seite können Sie den React Native-Debugger herunterladen. Installationsanweisungen finden Sie hier und Sie können einfach
auf die Release-Seite am
Ende hier gehen, um eine dieser Binärdateien für
Ihr Betriebssystem herunterzuladen. Für Windows also exe-Datei hier, Setup-Datei, für macOS, eine dmg-Datei und so weiter.
Das sind also verschiedene Dinge, die
Sie herunterladen können. Ich werde mit der dmg-Datei die neueste Version hier herunterladen, diese speichern und warten, bis der Download abgeschlossen ist.
Lassen Sie mich dies dann einfach ausführen und die Installation beenden, indem Sie einfach durch die gehen Installer oder
in meinem Fall hier unter MacOS, ziehen Sie dies einfach in das Anwendungsverzeichnis und jetzt kann
es den React Native Debugger hier und hier öffnen. Derzeit funktioniert es nicht, da dies
das Remote-Javascript-Debugging auf den Geräten aktivieren muss, genau wie
zuvor, um dies in Chrome zu debuggen.
Dies ersetzt im Wesentlichen das Chrome-Debugging-Erlebnis, das Sie sagen oder verbessern könnten.
Nachdem dies geöffnet wurde, drücken Sie hier den Befehl t auf dem Mac oder steuern Sie t unter Windows oder
Linux, um einen neuen Tab zu öffnen und den React Native-Debugger-Port zu öffnen und zu bestätigen, den der Chrome-Tab zuvor ebenfalls verwendet
hat, und bestätigen Sie dies. Jetzt wird versucht, eine Verbindung herzustellen Um dies erfolgreich zu machen, öffnen Sie Ihre Entwicklertools, sagen
wir jetzt auf Android, und debuggen Sie Javascript
remote. Jetzt sollte dies hier eine Verbindung herstellen, und Sie sehen Ihre Konsolenausgabe jetzt hier in den Debugger-Tools.
Sie werden auch sehen, wenn ich dies erweitere, dass Sie in Quellen hier wieder in Ihren Code eintauchen können, wenn Sie dies wie zuvor möchten, und der große
Unterschied besteht
natürlich nicht darin, dass Sie dies tun können, weil dies das gleiche ist,
was Sie tun könnten im Browser aber das hier, Sie haben jetzt die hübschen ordentlichen Werkzeuge hier links.
Sie können also natürlich immer
noch Haltepunkte und alles setzen, aber hier haben Sie jetzt Ihre Redux-Debugging-Tools und wir verwenden
Redux hier nicht, also sind sie ziemlich leer, hier ist nichts los, aber unten
haben Sie diese Das Debugging-Tool für Elemente und dies ermöglicht es Ihnen, Ihren React Native-JSX-Code sozusagen zu erkunden, also Ihr Element, Ihren Komponentenbaum in
dieser netten Benutzeroberfläche, die definitiv besser ist als der Inspektor, den Sie hier umschalten können, denn jetzt können Sie hier
wirklich einen haben Schau dir an, was los ist. Sie können in die Root-Komponente eintauchen, um dort unten unsere
App-Komponente zu finden. Dort finden wir unsere Ansicht mit dieser Schaltfläche. Wir können auf die Schaltfläche klicken und sehen die
Requisiten, die wir auf der Schaltfläche verwenden, wie z. B. onPress und der Titel, den
wir gesetzt haben.
Wir können auf unsere eigene Komponente klicken, wo wir die Requisiten sehen, die wir dort weiterleiten.
Wir können sogar die sichtbare Requisite ändern, um dieses Modal so umzuschalten, wenn wir wollen, also
ist das wirklich schön.
Wir sehen die Hooks, die wir dort verwenden, wie den Status, den wir derzeit in
unserer Komponente verwalten, und wenn ich dieses Modal hier öffne, sehen Sie diesen Status, die Requisiten hier ändern sich und wenn
ich hier anfange zu tippen, wie React Native lernen Sie werden sehen, dass dies auch hier rechts aktualisiert wird, wie
eine leichte Verzögerung,
aber das sollte kein Problem sein, also ist das wirklich ordentlich.
Wir können dies hinzufügen und die Zustandsänderungen hier sehen. Wir
können natürlich tiefer in unsere Zieleingabe eintauchen, um das Modal hier zu sehen.
Sie können die FlatList und die dort konfigurierten Elemente erkunden und tiefer in
diese Ansicht eintauchen, wenn Sie möchten. Sie können also wirklich viel tun und dort Ihren Komponentenbaum
erkunden, um herauszufinden, was los ist. Bei Elementen, bei denen Sie einen Stil direkt hinzugefügt haben, z.
B. in der Umgebungsansicht,
in der ich diese Auffüllung festgelegt habe, können Sie den Stil sogar überprüfen und nicht nur den Stil anzeigen, sondern
auch ändern, um beispielsweise die Auffüllung
zu erhöhen oder zu verringern bietet Ihnen eine einfache Möglichkeit, verschiedene Looks und Layouts auf dem Bildschirm zu testen,
um herauszufinden, was für Sie gut aussieht und was Sie ändern möchten.
Sie können hier auch zur Registerkarte "Profiler" gehen und eine Profilerstellungssitzung starten, dann auf dem Bildschirm etwas tun,
z. B. das Modal öffnen und schließen und dies beenden. Hier erhalten Sie die Standarderfahrung der React Dev-Tools, in der
Sie sehen, welche Ihrer Komponenten vorhanden waren neu gestrichen, und Sie können sich darauf einlassen, um eine
Vorstellung davon zu bekommen, was neu gestrichen wurde, welche Requisiten es zu diesem Zeitpunkt hatte und wie viele Re-Render-Zyklen
Sie beispielsweise durchführen mussten, um herauszufinden, ob unnötiges Neulackieren stattfindet, offensichtlich ein bisschen a Fortgeschrittenere Aufgaben
und Aufgaben, die Sie möglicherweise ausführen möchten, wenn Sie kurz vor dem Abschluss Ihrer App stehen, um
sicherzustellen, dass Sie die Leistung optimieren und unnötige Wiederholungszyklen vermeiden. Diese Tools können jedoch beim
Erkennen sehr hilfreich sein kleine Probleme in Ihrer App und um sicherzustellen, dass alles so funktioniert, wie
es in Ihrer App funktionieren sollte.
Eine weitere coole Sache, die Sie mit dem React Native-Debugger machen können: Klicken Sie hier mit
der rechten Maustaste, sagen wir hier, und aktivieren Sie
die Netzwerkinspektion. Wenn Sie dies tun, können Sie zur Registerkarte "Netzwerk" wechseln und sehen, dass sie ausgehend angezeigt wird Netzwerkanforderungen.
Jetzt sind dies alles nur Debugging-bezogene Anfragen, aber später im Kurs, wenn wir unsere eigenen Netzwerkanforderungen
hinzufügen, wo wir Anfragen an unseren eigenen Webserver senden, können wir diese hier sogar überprüfen und sie
untersuchen und sehen, ob wir senden und das Empfangen der richtigen Daten, was
mit nativen
Apps sonst ziemlich schwierig ist, ist hier ein Kinderspiel. Der React Native-Debugger ist also wirklich ein cooles Tool, um in Ihre App zu schauen,
Haltepunkte festzulegen, die Konsole anzuzeigen, Ihren Komponentenbaum anzuzeigen, die dort verwendeten Stile anzuzeigen und vieles mehr. Es ermöglicht Ihnen wirklich, tief in Ihren Anwendungscode, in
Ihre Benutzeroberfläche, in Ihre Logik einzutauchen und herauszufinden, ob alles so funktioniert, wie es funktionieren sollte, und Sie können sogar
hier hineingehen und bestimmte Dinge wie das Styling ändern, wie Sie es gesehen
haben Experimentieren Sie mit verschiedenen Einstellungen und finden Sie heraus, wo Sie Ihre App optimieren
müssen, damit sie ordnungsgemäß funktioniert.