React Developer Tools
Verwenden Sie React Developer Tools, um React-Komponentenzu inspizieren,PropsundStatezu bearbeiten und Leistungsprobleme zu identifizieren.
Sie werden lernen
- Wie man React Developer Tools installiert
Browser-Erweiterung
Der einfachste Weg, mit React erstellte Websites zu debuggen, ist die Installation der React Developer Tools Browser-Erweiterung. Sie ist für mehrere gängige Browser verfügbar:
Wenn Sie nun eine Website besuchen, diemit React erstellt wurde,sehen Sie dieComponents- undProfiler-Bereiche.
Safari und andere Browser
Für andere Browser (z. B. Safari) installieren Sie dasreact-devtoolsnpm-Paket:
Öffnen Sie anschließend die Entwicklertools über das Terminal:
Verbinden Sie dann Ihre Website, indem Sie das folgende<script>-Tag am Anfang des<head>Ihrer Website einfügen:
Laden Sie Ihre Website nun im Browser neu, um sie in den Entwicklertools anzuzeigen.
Mobil (React Native)
Um Apps zu inspizieren, die mitReact Nativeerstellt wurden, können SieReact Native DevToolsverwenden, den integrierten Debugger, der React Developer Tools tiefgreifend integriert. Alle Funktionen funktionieren identisch zur Browser-Erweiterung, einschließlich der Hervorhebung und Auswahl nativer Elemente.
Erfahren Sie mehr über das Debugging in React Native.
Für Versionen von React Native vor 0.76 verwenden Sie bitte die eigenständige Version von React DevTools, indem Sie derAnleitung für Safari und andere Browseroben folgen.