Anzeige
Anzeige
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. 

4 Min.
Artikel merken
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Anzeige
Anzeige
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

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare

Community-Richtlinien

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

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

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

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

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

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige