News

Version 4 der React-Dev-Tools – das bringt das Update

Seit Freitag ist Version 4 der React-Developer-Tools öffentlich verfügbar. Die Erweiterung gibt es für Chrome, Firefox und Edge. Wir haben uns das Update angeschaut und verraten euch, was die neue Version des Debugging-Werkzeugs alles kann. 

Das Update der Browser-Erweiterung für die Entwicklung mit React kommt mit vollständiger Unterstützung für React Hooks. Außerdem wurden Performance und Navigation deutlich verbessert und überarbeitet. Die Vorgängerversion nahm relativ viel Speicher und Leistung in Anspruch und war deshalb für größere React-Apps nur bedingt geeignet. Mit Version 4 wurde dieser Nachteil erfolgreich behoben. Wenn ihr die Erweiterung schon habt, dürfte sie sich automatisch updaten. Alle anderen finden die Extension im Chrome-Web-Store beziehungsweise unter den Mozilla-Addons.

Das ist neu

Ab jetzt könnt einstellen, dass an Warnungen (console.warn) und Fehlermeldungen (console.error) sogenannte „Component Stack Traces“ angehängt werden. Ihr werdet also nicht nur gewarnt, dass in eurer Komponente etwas schief läuft, sondern seht auch, wo genau im Component Tree der Fail passiert ist. Die Ansicht der Komponentenstruktur wurde gründlich überarbeitet und bietet deutlich mehr Filtermöglichkeiten.

Keine Inline Props mehr

Ihr könnt jetzt Filter anwenden und Elemente verbergen, also zum Beispiel bei einer Liste alle Elemente mit dem Attribut „name=item“. Host Nodes sind in Version 4 der React-Dev-Tools per Default verborgen – wer will, kann diesen Filter aber deaktivieren. Eure Filtereinstellungen werden von Session zu Session gespeichert. Inline Props von Komponenten innerhalb eines Komponentenbaums zeigt euch die neue Version nicht mehr, dadurch werden vor allem große Component Trees übersichtlicher. Mit Klick auf eine Komponente könnt ihr euch deren Props, State und Hooks aber weiterhin anschauen.

Rendered-by Liste und Owners Tree

In Version 4 findet ihr eine „Rendered by“-Liste in der rechten Seitenleiste. So könnt ihr schneller erkennen, wo die Props eines Elements herkommen – ein „Unexpected Prop Value“ lässt sich damit deutlich schneller debuggen. Das Gegenstück dazu ist der Owners Tree, der euch die gesamte Liste der Elemente, die von einer Higher-Order-Komponente gerendert werden, anzeigt. Mithilfe des Owner Trees könnt ihr der Render-Methode eines Elements auf den Grund gehen, was supernützlich sein kann, wenn ihr fremde oder sehr große React-Apps debuggen müsst.

Kein horizontales Scrollen mehr

Wenn ihr euch in der Vorgängerversion verschachtelte Komponenten (sogenannte „nested components“) anschauen wolltet, musstet ihr bei tief verschachtelten Komponenten oft sowohl horizontal als auch vertikal scrollen. In der neuen Version wird die Einrückung beim Scrollen automatisch an die Bildschirmbreite angepasst, das heißt: kein horizontales Scrollen mehr. Ausgewählte Elemente sind in der neuen Version nach einem Reload weiterhin ausgewählt.

Hooks werden unterstützt

Version 4 bietet für eure Hooks den gleichen Support wie für Props und State. Ihr könnt Arrays und Objekte aufklappen und Values editieren.

Verbesserte Suche

In den alten Developer-Tools wurden die Treffer auf einer Ebene ohne Einrückung angezeigt, die hierarchische Struktur war nicht erkennbar. In der neuen, die der „Auf dieser Seite suchen“-Funktion eures Browsers ähnelt, sind hierarchische Beziehungen eurer Elemente in der Ergebnisansicht sichtbar.

Higher Order Components

Komponenten, die von Higher Order Components (HOC) gerendert wurden, sehen erstmal aus wie alle anderen auch. Bei der Benennung seid ihr daher gut beraten, folgender Konvention zu folgen: withHOC(wrappedComponent). Der Grund: Nur so habt ihr überhaupt eine Chance, sie beim Debuggen als solche zu erkennen. Der neue Components Tree macht euch das jetzt noch ein bisschen leichter. Er formatiert derartige HOC-Benennungen (und einige React-eigene Funktionalitäten wie React.memo und React.forwardRef) zu einem Badge, der an den betreffenden Komponenten hängt. So seht ihr das auf einen Blick.

Suspense Toggle

Wrappt ihr mehrere Komponenten in einer Suspense-Komponente, lasst ihr sie aufeinander warten, bevor sie gerendert werden. Im Moment gibt es für die experimentelle API nur einen Use-Case: das dynamische Rendern von Komponenten mit React.lazy. Geplant sind noch andere Anwendungsfälle, zum Beispiel das Abrufen von Daten. Ab jetzt könnt ihr mit Klick auf das Icon testen, ob das funktioniert wie gewünscht.

Bessere Profiler-Funktion

Der initiale Mount einer App ist ein sehr performance-intensiver Teil. In der Vorgängerversion der React-Dev-Tools konnte man den Profiler zwar nutzen, nur leider erst nach dem initalen Mount. Seit dem Update könnt ihr die Performance eurer App auch währenddessen analysieren. Die Daten könnt ihr anschließend exportieren und mit anderen Entwicklern teilen. Über „Why did this render“ könnt ihr euch Änderungen von Props und States zwischen den Renderings anschauen. Außerdem zeigt euch der Profiler in einer Liste, wie oft eine Komponente während einer Profiling-Session gerendert wurde und wie lange sie dafür gebraucht hat. Wenn ihr die Performance einer bestimmten Komponente analysieren wollt, könnt ihr diese Funktionalität nutzen, um zwischen Commits hin und her zu springen.

t3n meint: Wir finden: ein wirklich gelungenes Update, das so gut wie keine Wünsche offen lässt. Zumindest fallen uns im Moment keine ein. Wobei – eine winzige Sache vielleicht: Im Profiler der neuen Version werden re-Renderings nicht mehr farblich hervorgehoben. Das macht aber eigentlich auch nichts.

Der größte Makel – die fehlende Unterstützung für Hooks – und viele nervige Kleinigkeiten, etwa die Geschichte mit dem horizontalen Scollen, wurden beseitigt. Wenn ihr das Ganze erst einmal ganz unverbindlich ausprobieren wollt: Es gibt ein interaktives Tutorial, das euch wahrscheinlich zum Fanboy – beziehungsweise Fangirl – machen wird. Kathrin Stoll

Das könnte dich auch interessieren:

Zur Startseite
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung