React Academy · Lektion

React DevTools installieren und öffnen

Richten Sie React DevTools in Chrome/Firefox ein und navigieren Sie zum Components-Panel.

React DevTools installieren und öffnen ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Willkommen

In dieser Lektion installieren Sie die React-DevTools-Browsererweiterung und lernen, im Components-Panel zu navigieren, um Ihre laufende React-App zu untersuchen.

Was sind die React DevTools?

React DevTools ist eine Browsererweiterung, die den Chrome-/Firefox-DevTools zwei neue Panels hinzufügt: **Components** (zum Untersuchen des Komponentenbaums) und **Profiler** (zum Messen der Performance). Sie funktioniert mit jeder React-App im Entwicklungsmodus.

Die Erweiterung installieren

Öffnen Sie den Chrome Web Store (oder die Firefox-Add-ons) und suchen Sie nach **React Developer Tools**. Klicken Sie auf **Add to Chrome** (oder die entsprechende Firefox-Schaltfläche). Das React-Symbol in Ihrer Symbolleiste wird auf Seiten, die React verwenden, aktiviert.

DevTools öffnen

Drücken Sie **F12** (oder auf dem Mac Cmd+Option+I), um die Browser-DevTools zu öffnen. Neben Elements und Console sehen Sie die neuen Tabs **Components** und **Profiler**.

Das Components-Panel

Der Tab Components zeigt den vollständigen React-Komponentenbaum der aktuellen Seite. Sie können auf eine beliebige Komponente klicken, um ihre Props, ihren State, ihre Hooks sowie die Quelldatei zu untersuchen, die sie gerendert hat.

Im Baum navigieren

Verwenden Sie das Suchfeld oben im Components-Panel, um nach Komponentennamen zu filtern. Klicken Sie im Baum auf eine Komponente, um ihre Details auf der rechten Seite anzuzeigen. Verwenden Sie die Pfeile, um untergeordnete Komponenten auf- und zuzuklappen.

Props live untersuchen

Wenn Sie auf eine Komponente klicken, werden ihre aktuellen **Props** im rechten Bereich angezeigt. Sie können Prop-Werte sogar direkt in den DevTools bearbeiten, um Änderungen an der Benutzeroberfläche in der Vorschau zu sehen, ohne den Quellcode zu ändern.

State und Hooks untersuchen

Unter den Props sehen Sie **Hooks** wie State, Effect, Memo und Ref. Wenn Sie State aufklappen, wird der aktuelle Wert jedes `useState`-Aufrufs in dieser Komponente angezeigt.

Anforderung: Entwicklungsmodus

React DevTools zeigt Komponentennamen nur an, wenn die App im **Entwicklungsmodus** ausgeführt wird. In Produktions-Builds entfernt React Komponentennamen, damit die Bundles kleiner bleiben. Debuggen Sie daher immer lokal mit npm start oder npm run dev.

Aktualisierungen hervorheben

Aktivieren Sie in den DevTools-Einstellungen (Zahnradsymbol) die Option **Highlight updates when components render**. Komponenten, die erneut gerendert werden, blinken mit einer farbigen Hervorhebung auf. Dadurch werden unnötige Render-Vorgänge sofort sichtbar.

Kurze Überprüfung

Welche zwei Tabs fügt die React-DevTools-Erweiterung den Browser-Entwicklertools hinzu?

Zusammenfassung

Sie haben React DevTools installiert und das Components-Panel erkundet. Sie können nun den Komponentenbaum untersuchen, Props und State live lesen, Werte direkt bearbeiten und erneute Render-Vorgänge hervorheben – und das alles, ohne Ihren Quellcode anzufassen.

Als Nächstes

Nächste Lektion: **Komponentenbäume und Props untersuchen** – Sie werden tief in verschachtelte Hierarchien eintauchen und lernen, komplexe Props- und State-Strukturen in der DevTools-Seitenleiste zu lesen.

Häufig gestellte Fragen

Ist die Lektion „React DevTools installieren und öffnen“ kostenlos?

Ja — der vollständige Text von „React DevTools installieren und öffnen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „React DevTools installieren und öffnen“?

Richten Sie React DevTools in Chrome/Firefox ein und navigieren Sie zum Components-Panel. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um React Academy zu starten?

Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „React DevTools installieren und öffnen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?

Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu React Academy