Key Takeaways

• Debugging ist ein entscheidender Bestandteil der Softwareentwicklung und hilft dabei, Probleme zu identifizieren und zu beheben, bevor sie in die Produktion gedr?ngt werden. In der React Native World stehen mehrere Tools zum Debuggen zur Verfügung, die jeweils für verschiedene Umgebungen und Probleme geeignet sind.
• Einige der am h?ufigsten verwendeten Tools umfassen das Entwicklermenü, die Yellowboxen und Redboxen, die Devtools von Chrom, die React -Entwickler -Tools, React Native Debugger und React Native CLI. Jedes Tool bietet seine eigenen einzigartigen Funktionen, z. B. das Anzeigen von Fehlern und Warnungen, das Erm?glichen von Live -Nachladen, das Inspektieren von UI -Elementen und mehr.
• React Native Debugger ist ein besonders nützliches Instrument für diejenigen, die Redux in ihrer React Native App verwenden. Es handelt sich um eine eigenst?ndige Desktop -App, die sowohl die Devtools von Redux als auch die Entwicklertools von React an einem Ort integriert, wodurch der Debugging -Prozess effizienter wird.
• Die React Native CLI kann auch zum Debuggen verwendet werden, sodass Sie die Protokolle der App anzeigen und relevante Informationen zu den Bibliotheken und Abh?ngigkeiten in Ihrer App erhalten k?nnen. Dies kann besonders hilfreich sein, um Fehler zu beheben, die durch Fehlanpassungen von Versionen verursacht werden.

Debugging ist ein wesentlicher Bestandteil der Softwareentwicklung. Durch das Debuggen wissen wir, was los ist und was richtig ist, was funktioniert und was nicht. Debugging bietet die M?glichkeit, unseren Code zu bewerten und Probleme zu beheben, bevor sie in die Produktion gedr?ngt werden.

In der React Native World kann das Debuggen auf unterschiedliche Weise und mit unterschiedlichen Werkzeugen durchgeführt werden, da React Native aus verschiedenen Umgebungen (iOS und Android) besteht, was bedeutet .

Dank der gro?en Anzahl von Mitarbeitern des React Native -?kosystems sind viele Debugging -Tools verfügbar. In diesem kurzen Leitfaden werden wir die am h?ufigsten verwendeten von ihnen untersuchen, beginnend mit dem Entwicklermenü.

Debugging ist doppelt so schwierig wie das Schreiben des Code. Wenn Sie den Code so geschickt wie m?glich schreiben, sind Sie per Definition nicht klug genug, um ihn zu debuggen. - Brian W. Kernighan

Das Entwicklermenü

Das In-App-Entwicklermenü ist Ihr erstes Tor zum Debuggen von React Native. Es verfügt über viele Optionen, mit denen wir verschiedene Dinge tun k?nnen. Lassen Sie uns jede Option aufschlüsseln.

• neu laden: laden die App
neu laden
• debugug js remote: ?ffnet einen Kanal für einen JavaScript -Debugger
Live -Reload aktivieren: Lassen Sie die App neu laden beim Klicken auf speichern
Hei?es Nachladen aktivieren: Uhren nach ?nderungen in einer ge?nderten Datei
Umschalten des Inspektors: Schaltet eine Inspektorschnittstelle um, mit der wir jedes UI -Element auf dem Bildschirm und seine Eigenschaften und die Vorbereitung und die Schnittstelle mit anderen Registerkarten wie Networking inspizieren k?nnen, die uns die HTTP -Aufrufe und eine Registerkarte für die Leistung anzeigen.

Gelbboxen und Redboxen

Redboxen werden verwendet, um Fehler anzuzeigen. Jedes Mal, wenn eine App einen Fehler ausl?st, wird eine Redbox und die Beschreibung des Fehlers angezeigt. Sie k?nnen es jederzeit durch Schreiben von Console.Error anzeigen. In der Produktion funktioniert es jedoch nicht, was bedeutet, dass die App, wenn ein Fehler in dieser Umgebung auftritt

Die Redbox ist dein Freund. Eines der hilfreichen Dinge dabei ist, dass es den Fehler anzeigt und Ihnen die Vorschl?ge zur Behebung gibt, die Sie in der Konsole nicht finden. Zum Beispiel schreibe ich h?ufig eine Style -Eigenschaft, die nicht von React Native unterstützt wird, oder eine Eigenschaft, die für ein bestimmtes Element verwendet wird - wie BackRoundImage für das View -Element. Die Redbox wirft einen Fehler auf, zeigt aber auch die Liste der unterstützten Stileigenschaften, die Sie auf die Ansicht anwenden k?nnen.

Gelbboxen werden verwendet, um Warnungen anzuzeigen. Sie k?nnen diese deaktivieren, indem Sie im Root -Verzeichnis Ihrer App unten in Index.js addieren. Das wird jedoch nicht empfohlen, da gelbe K?stchen sehr nützlich sind. Sie warnen Sie vor Dingen wie Leistungsproblemen und veralteten Code. Sie k?nnen das Yellowbox-Element von React-Native verwenden, um eine bestimmte Warnung anzuzeigen.

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

Die meisten Yellowbox -Warnungen beziehen sich auf eine schlechte Praxis in Ihrem Code. Sie k?nnen beispielsweise eine Warnung erhalten, dass Sie über einen EventListener verfügen, den Sie nicht entfernen, wenn die Komponente entfaltet, oder dass Sie veraltete Funktionen und Abh?ngigkeiten wie folgt haben:

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

Behebung dieser Probleme verhindert viele Fehler und verbessert die Qualit?t Ihres Codes.

Sie k?nnen immer mehr über das Debuggen von React in den offiziellen Dokumenten erfahren.

Chrome's Devtools

Chrome ist m?glicherweise das erste Tool, an das Sie für das Debuggen von React Native denken würden. Es ist üblich, Chromes DevTools zu verwenden, um Web -Apps zu debuggen, aber wir k?nnen sie auch zum Debugug React Native verwenden, da es von JavaScript angetrieben wird.

Um Chroms Devtools mit React Native zu verwenden, stellen Sie zun?chst sicher, dass Sie mit demselben Wi-Fi verbunden sind, und drücken Sie dann r Wenn Sie macOS oder Strg m unter Windows/Linux. Wenn das Entwicklermenü angezeigt wird, w?hlen Sie Debugg JS aus der Ferne. Dadurch wird der Standard -JS -Debugger ge?ffnet.

Dann überprüfen Sie diese Adresse http: // localhost: 8081/debugger-ui/in Chrome. Sie sollten diese Seite sehen:

Sie müssen m?glicherweise eine Fehlerbehebung bei Android durchführen.

Um dieses Problem zu l?sen, stellen Sie sicher, dass Ihr Computer und das Ger?t mit demselben Wi-Fi verbunden sind, und fügen Sie dann Android hinzu: useCleartextTraffic = "true" zu Android/App/SRC/Main/AndroidManifest.xml. Wenn dies für Sie nicht funktioniert, lesen Sie diese Links für andere L?sungen:

• Stack Overflow
• GitHub

Nachdem Sie erfolgreich mit Chrom verbunden sind, k?nnen Sie den Chrominspektor einfach umschalten.

Schauen Sie sich die Protokolle Ihrer nativen React -App an. Schauen Sie sich auch die anderen Funktionen von Chrome's Devtools an und verwenden Sie sie mit React Native wie in jeder Web -App.

Eine der Einschr?nkungen bei der Verwendung von Chroms DevTools mit React Native ist, dass Sie die Stile nicht debuggen und die Stileigenschaften wie normalerweise bei Debugug -Apps tun k?nnen. Es ist auch im Vergleich zu Reacts Devtools begrenzt, wenn die Komponentenhierarchie von React inspiziert wird.

reagieren Entwickler -Tools

Debugug React React Native mithilfe der Entwicklertools von React müssen Sie die Desktop -App verwenden. Sie k?nnen es global oder lokal in Ihrem Projekt installieren, indem Sie diesen folgenden Befehl nur ausführen:

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

oder npm:

warning: ViewPagerAndroid has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/react-native-community/react-native-viewpager

Starten Sie die App, indem Sie Garn React-Devtools ausführen, die die App starten.

Die Entwicklertools von

React k?nnen aus diesen beiden Gründen das beste Werkzeug für das Debuggen von React -nativ sein:

• Erm?glicht das Debuggen von React -Komponenten.
• Es erm?glicht es, Stile in React Native zu debuggen (meine Lieblingsfunktion dieser Entwickler -Tools!). Die neue Version wird mit dieser Funktion geliefert, die auch mit Inspector im Entwicklermenü funktioniert. Zuvor war es ein Problem, Stile zu schreiben und zu warten, bis die App neu l?dt, um die ?nderungen anzuzeigen. Jetzt k?nnen wir Stileigenschaften debuggen und implementieren und den Effekt der ?nderung sofort sehen, ohne die App neu zu laden.

Sie k?nnen hier mehr über die Verwendung von React's Developer Tools erfahren.

reagieren native Debugger

Wenn Sie Redux in Ihrer React Native App verwenden, ist React Native Debugger wahrscheinlich der richtige Debugger für Sie. Es handelt sich um eine eigenst?ndige Desktop -App, die unter MacOS, Windows und Linux funktioniert. Es integriert sowohl die Devtools- als auch die React -Entwickler -Tools von Redux in eine App, sodass Sie nicht mit zwei separaten Apps zum Debuggen arbeiten müssen.

React Native Debugger ist mein Lieblingsdebugger und der, den ich normalerweise in meiner Arbeit mit React Native verwende. Es verfügt über eine Schnittstelle für die Devtools von Redux, an der Sie die Redux -Protokolle und die Aktionen sehen k?nnen, sowie eine Schnittstelle für React -Entwickler -Tools, in der Sie React -Elemente inspizieren und debuggen k?nnen. Hier finden Sie die Installationsanweisungen. Sie k?nnen sich mit diesem Debugger in Verbindung setzen, wie Sie Chroms Inspektor ?ffnen.

Die Verwendung von React Native Debugger über Chromes Devtools hat einige Vorteile. Sie k?nnen beispielsweise den Inspektor aus dem Entwicklermenü umschalten, um die Reaktion native Elemente zu inspizieren und Stile zu bearbeiten, die in Chrome's Devtools nicht verfügbar sind.

reagieren native cli

Sie k?nnen mit der React Native CLI auch einige Debugging durchführen. Sie k?nnen es verwenden, um die Protokolle der App anzuzeigen. Das Treffer von React-nativen log-android zeigt Ihnen die Protokolle von DB-Logcat auf Android und um die Protokolle in iOS anzuzeigen, k?nnen Sie reag-nativen log-ios ausführen, und mit Konsole.log k?nnen Sie Protokolle an die Terminal entsenden:

import {YellowBox} from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);

Sie sollten dann die Protokolle im Terminal sehen.

Mit der React Native CLI k?nnen einige relevante Informationen über die Bibliotheken und die Abh?ngigkeiten, die Sie in Ihrer App verwenden, durch Ausführen von React-nativen Informationen zum Terminal erhalten. Es zeigt uns einige nützliche Informationen zu den Tools, die Sie verwenden. Hier finden Sie beispielsweise ein Beispiel für eine Ausgabe, wenn Sie die React-nativen Informationen ausführen:

Sie k?nnen diese Informationen verwenden, um einige Fehler zu beheben, die durch Versionsanpassungen eines Tools, das Sie in Ihrem Projekt verwenden, verursacht werden. Daher ist es immer gut, die Umgebungsinformationen mit diesem Befehl zu überprüfen.

Zusammenfassung

Es gibt viele Tools zum Debuggen von React Native zus?tzlich zu denen, die wir uns hier angesehen haben. Es h?ngt wirklich von den spezifischen Bedürfnissen Ihres Projekts ab. Ich verwende haupts?chlich React Native Debugger Desktop, weil ich oft mit Redux arbeite, und es kombiniert eine Reihe von Tools in einer App, die gro?artig und zeitlich spart ist.

Bitte schlagen Sie mich auf Twitter, wenn Sie mehr über Tools zum Debuggen von React Native und über React Native im Allgemeinen sprechen m?chten. Ich würde gerne von dir h?ren!

h?ufig gestellte Fragen (FAQs) zum Debuggen in React Native

Was sind die besten Tools zum Debuggen in React Native? Einige der beliebtesten sind React Native Debugger, Reactotron und Flipper. React Native Debugger ist eine eigenst?ndige App, die React Devtools und Redux Devtools kombiniert. Sie k?nnen die React -Komponentenhierarchie, Redux -Speicher und Versandaktionen inspizieren. Reactotron hingegen ist eine Desktop-Anwendung, mit der Sie Redux- oder MOBX-State-Tree-Anwendungszustand inspizieren k?nnen. Flipper ist eine Plattform zum Debuggen von mobilen Apps. Es ist erweiterbar und verfügt über einen Marktplatz, um Plugins zu installieren, die beim Debuggen verschiedener Teile Ihrer App helfen k?nnen. Verwenden von Werkzeugen wie Flipper oder Reactotron. Mit diesen Tools k?nnen Sie alle von Ihrer App gestellten Netzwerkanfragen anzeigen, ihre Details überprüfen und sogar ihre Antworten ?ndern. Sie k?nnen auch den integrierten Netzwerkinspektor in React Native Debugger verwenden. Reagieren Sie native Debugger. Mit diesem Tool k?nnen Sie jede Komponente auf dem Bildschirm ausw?hlen und das Layout, die Stile und die Requisiten überprüfen. Sie k?nnen auch den Layoutinspektor in Flipper verwenden, der eine ?hnliche Funktionalit?t bietet. in React Native eingebaut. Dieses Tool bietet Echtzeit-Statistiken zur Leistung Ihrer App, wie FPS (Frames pro Sekunde), RAM-Nutzung und CPU-Nutzung. Sie k?nnen den Profiler auch in React Devtools verwenden, um zu messen, wie oft eine React -Komponente rendert und was sie zum Rendern bringt. React Native kann mit Redux Devtools debuggen werden. Mit diesem Tool k?nnen Sie jeden Zustand und die Aktionsnutzlast inspizieren und k?nnen in die Zeit zurückgehen, indem Sie Aktionen ?stornieren“. Sie k?nnen Redux Devtools als eigenst?ndige App verwenden oder in React Native Debugger oder Reactotron integrieren. mit plattformspezifischen Tools debuggen. Für Android k?nnen Sie den integrierten Debugger von Android Studio verwenden. Für iOS k?nnen Sie den integrierten Debugger von Xcode verwenden. Mit diesen Tools k?nnen Sie Breakpoints festlegen, Code durchlaufen und Variablen überprüfen. in Flipper oder React Native Debugger. Diese Tools liefern Informationen über die Speicherverwendung Ihrer App und k?nnen Ihnen dabei helfen, Komponenten zu identifizieren, die nicht ordnungsgem?? gereinigt werden.

Wie kann ich einen asynchronen Code in React Native debuggen? Auf diese Weise k?nnen Sie die Abfolge von Aktionen und Zustands?nderungen in Ihrer App sehen, die Ihnen helfen k?nnen, festzustellen, wo die Dinge schief gehen. Sie k?nnen auch Tools wie Reactotron verwenden, die Funktionen für die Verfolgung von Async -Speicher bieten. Einheimischer Debugger. Mit diesem Tool k?nnen Sie Werte von animierten Eigenschaften sehen, die sich im Laufe der Zeit ?ndern. Sie k?nnen auch den Leistungsmonitor verwenden, um die FPS Ihrer Animationen zu überprüfen. Crashlytics. Diese Tools sammeln Crash-Berichte von Ihren Benutzern in Echtzeit, sodass Sie genau sehen k?nnen, was vor einem Absturz passiert ist. Sie bieten detaillierte Stapelspuren, Ger?teinformationen und Benutzeraktionen.

Das obige ist der detaillierte Inhalt von6 Tools zum Debuggen von React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!