Den React-Bereich öffnen
Eine Seite auswählen und in der Toolbar von DevTools auf React umschalten, oder Debug › React DevTools anzeigen (⇧⌘R) wählen. Beide Bereiche bleiben verbunden; das Umschalten trennt nichts.
Was du bekommst
- Den Komponentenbaum mit Suche.
- Props, State, Hooks und Context der gewählten Komponente. In React-Entwicklungs-Builds lassen sie sich bearbeiten, und die Seite aktualisiert sich sofort.
- Highlight updates when components render.
- Den Profiler mit Flamegraph und Commit-Details.
Mit eingeschaltetem Screencast bleibt die Live-Vorschau links neben den React DevTools sichtbar; ihre Breite lässt sich am Teiler ziehen.
Wie die Verbindung entsteht
React sucht die DevTools beim Start, darum muss ihr Backend vor React geladen sein. Solange der React-Bereich offen ist, setzt Tapscope dafür ein Startskript in die Seite.
- Seite war vor dem Öffnen schon geladen: Der Bereich zeigt React erkannt und den Knopf Neu laden und verbinden. Danach verbindet er sich nach jedem Neuladen und jeder Navigation selbst.
- Keine React-App auf der Seite: Der Bereich sagt das und prüft weiter, falls React später geladen wird.
Geprüft im iOS-Simulator, einem Android-Emulator und Chrome. Auf einem iPhone läuft es über denselben Weg.