Reactime

Reactime 3.0: Time Travel Debugging für States in React
Keine Kommentare

Reactime 3.0 hilft beim Debuggen von State in React-Anwendungen. Das Tool ist als Chrome-Extension im Browser installierbar und bietet neben dem Time Travel Debugging auch eine Live-Visualisierung an.

Wer das State Management in React über Redux abwickelt, kann das Redux-Tooling zum Debuggen verwenden. Wenn jedoch stattdessen Hooks oder der neue Concurrent Mode genutzt werden, braucht es eine andere Lösung. Reactime 3.0 will diese Lücke schließen, wie Chris Flannery im Blogpost zum Release schreibt, und bietet Debugging-Optionen für State in React an, die auch den React Router, Concurrent Mode, Suspense und Hooks abdecken.

Time Travel Debugging in Chrome

Reactime 3.0 arbeitet dafür mit Time Travel Debugging, wofür Snapshots des States und der Browser-History angefertigt werden. Aus den gecacheten Daten wird ein State-Tree erzeugt, innerhalb dessen vorherige Zustände aufgerufen werden können. Auch die Differenz der einzelnen Snapshots wird ausgegeben. Zur Visualisierung setzt das Projekt D3.js ein, das für große Projekte auch mehrere State Branches zugleich anzeigen und in Echtzeit aktualisieren kann, sodass sich Bugs schneller identifizieren lassen.

Reactime wird von OSLabs entwickelt und steht unter MIT-Lizenz. Das Projekt ist auf GitHub zu finden, die Chrome-Extension steht im Chrome Web Store zur Verfügung. Auf der Website zum Projekt stehen außerdem zwei Demos bereit, mit denen Reactime getestet werden kann.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -