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.

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.

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.

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.

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.

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.

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.

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.

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.

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.