React Dev-Tools

Zurzeit bringe ich mir React bei. Dabei stiesse ich auf dieses kleine Tutorial [EN] zu dem React Dev-Tools. Da fragt sich der Leser vielleicht, was ist denn das React Dev-Tools. Ich antworte ihm, es ist eine Chrome-Erweiterung, die zum Debuggen von mit React erstellten Seiten benutzt wird.

Was ist Debuggen?

Das Wort Debuggen stammt aus dem Englischen. Es setzt sich aus dem Präfix „De-“ und dem Wort „Bug“ zusammen. Das Präfix „De-“ kehrt das nachfolgende Wort ins Gegenteil um. Und das Wort Bug bedeutet im Deutschen Käfer. Im IT-Terminus wird das Wort Bug einem Fehler gleichgesetzt. Dieser Terminus geht auf die amerikanische Computerspezialistin Grace Hopper zurück. Sie formt ihn, nachdem sie 1946 eine Störung in einem Mark II Rechner durch das Entfernen einer toten Motte aus den Relais des Rechners behebt. Seit dieser Zeit wird ein Hardware- oder Software-Fehler als Bug bezeichnet. Also wird mit dem Debuggen eines Programms ein meistens schwer zu findender Fehler behoben. Für diese Fehlersuche stehen einem Softwareentwickler diverse Programme genannt Debugger zur Verfügung. React Dev-Tools ist so ein Debugger.

Das Tool in der Übersicht

Die Erweiterung React Dev-Tools fügt den in Chrome integrierten Entwicklertools (Ctrl+Shift+I) zwei neue Reiter hinzu. Die Reiter heissen Components und Profiler. Sie befinden sich ganz rechts im oberen Menü der Entwicklertools.
React Dev-Tools fullscreen
Zu diesen beiden Reiter gesellt sich noch ein React-Icon. Es zeigt an, ob die aufgerufene Webseite React benutzt. Wenn dieses Icon rot-weiss ist, befindet sich die angezeigte Seite noch im Entwickeln.
React Icon
Wenn die angezeigte Seite ausgerollt wurde, dann erscheint dieses Icon schwarz-blau.
React Icon Seite ausgerollt

Der Components Reiter

Im Components Reiter können alle wichtigen Daten zu den React-Componenten abgerufen werden. Wenn er aktiv ist, werden die React-Componenten ausgegeben.
React Components

Zu jeder React-Componente werden die Eigenschaften angezeigt.
TodoItems Attribute
Damit im Components Reiter auch die HTML-Elemente ausgegeben werden, muss in den dazugehörigen Einstellungen der erste Schieber unter dem Reiter Components auf Aus verschoben werden.
React Einstellung
Danach sieht die React-Components-Auflistung so aus.
React Components mit HTML-Elementen
Nun sind auch die HTML-Elemente alle aufgelistet.
Auch die Eigenschaften der HTML-Elemente werden dargestellt.
React Components die Attribute der HTML-Elemente

Der Profiler Reiter

Im Profiler Reiter kann der Ablauf einer React-Webseite aufgenommen werden. Es wird ausgeben, wie lange eine React-Componente zum Laden braucht. Die Aufnahme startet, nachdem auf den runden blauen Button geklickt wird. Zum Stoppen muss auf den nun roten Button geklickt werden.
React Profiler Aufnahme starten
Nach der Aufnahme erscheinen Balken, die Angeben wie lange die React-Componenten zum Laden brauchen.
React Profiler Ranked

Fazit

Ich muss mich noch eingehender mit diesem Tool befassen, damit ich ein abschliessendes Fazit ziehen kann. Aber React Dev-Tools ist auf den ersten Blick ein gutes Tool zum Debuggen von React-Webseiten.

Die im Tutorial [EN] vorkommende Liste baute ich nach diesem Blog-Artikel [EN] nach. Unter diesem Link ist meine Todo-Liste zu finden. Der Sourcecode kann auf GitHub abgerufen werden. Benutze dazu den unten stehenden Watch-Button.

Follow @ha6icht Watch

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.