Reaktionszeit ein Chrome mit OffiDocs

BESCHREIBUNG

Reactime wurde bei den React Open Source Awards 2020 für den Productivity Booster Award nominiert. Besuchen Sie uns unter https://www.

Reaktion

me/ Reactime ist ein Open-Source-Chrome-Entwicklertool zum Debuggen von Zeitreisen und zur Leistungsüberwachung in React-Anwendungen.

Reactime ermöglicht es Entwicklern, Snapshots des Anwendungsstatus aufzuzeichnen, zwischen Status-Snapshots zu wechseln und diese zu überprüfen und Leistungskennzahlen wie Renderzeit und Renderhäufigkeit von Komponenten zu überwachen.

Reactime 18.0 führt eine Reihe neuer und verbesserter Funktionen ein, die darauf abzielen, die Leistung zu verbessern und die Kompatibilität mit Next zu verbessern.

js- und Remix-Anwendungen.

Wir haben auch den Blackscreen-Fehler behoben und die Speichernutzung für asynchrone Aufrufe optimiert.

Status-Snapshots nach Route klassifizieren Die Liste der Status-Snapshots im Reactime-Dashboard ist jetzt nach Route klassifiziert, um dem Entwickler visuelle Hinweise auf die Snapshot-Route-Beziehung zu geben und das Debuggen von Zeitreisen verschiedener Routen zu erleichtern.

Filtern von Leistungsmetriken nach Route Das Reactime-Dashboard enthält ein gestapeltes Balkendiagramm, das die Renderzeiten für jede Komponente anzeigt, mit einem separaten Balkenstapel für jeden Schnappschuss.

Mit Reactime 14.0 kann dieses zusammengesetzte Balkendiagramm jetzt nach Route gefiltert werden, damit der Entwickler detaillierte Leistungsdaten nach Route überprüfen kann.

Features: - React Router-Kompatibilität - Komponentenbaum-Visualisierung - Aufzeichnen von Snapshots des Anwendungsstatus - Time-Travel-Debugging - Snapshot-Serienvergleich - Komponenten-Rendering-Zeit und -Frequenz - Unterstützung für Gatsby, Next.

js und Remix - Beta-Unterstützung für TypeScript - Tutorial Walkthrough Fehlerbehebung: Warum sagt mir Reactime, dass keine React-Anwendung gefunden wurde? Reactime wird zunächst mit dem globalen Hook der Dev-Tools von der Chrome-API ausgeführt.

Es dauert einige Zeit, bis Chrome dies geladen hat.

Versuchen Sie, Ihre Anwendung ein paar Mal zu aktualisieren, bis Reactime ausgeführt wird.

Es gibt einen schwarzen Bildschirm anstelle der Reactime-Erweiterung.

Versuchen Sie, die Anwendung zu aktualisieren, die Sie testen möchten, und aktualisieren Sie die DevTools, indem Sie mit der rechten Maustaste auf „Frame neu laden“ klicken.

Ich habe einen Fehler in Reactime gefunden.

Reactime ist ein Open-Source-Projekt und wir würden uns sehr über Ihre Hilfe bei der Verbesserung der Benutzererfahrung freuen.

Bitte erstellen Sie eine Pull-Anforderung (oder ein Problem), um Änderungen an einem Repository vorzuschlagen und daran mitzuarbeiten.

Weiterführende Literatur: https://medium.

com/@zdf2424/reactime-18-0-better-than-ever-148b81606257 https://medium.

com/better-programming/time-traveling-state-with-reactime-6-0-53fdc3ae2a20 https://medium.

com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8 https://medium.

com/@yujinkay/meet-reactime-a-time-traveling-state-debugger-for-react-24f0fce96802 https://itnext.

io/deep-in-the-weeds-with-reactime-concurrent-react-fiberroot-and-browser-history-caching-7ce9d7300abb https://rxlina.

Mittel.

com/time-traveling-through-react-state-with-reactime-9-0-371dbdc99319 https://medium.

com/@liuedar/what-time-is-it-reactime-fd7267b9eb89 https://medium.

com/@christinaor/uncovering-reactime-understanding-react-fiber-redux-compatibility-and-zoning-in-on-components-59f0758e0fa3

Zusätzliche Information:

- Angeboten von Reactime
- Durchschnittliche Bewertung: 4.7 Sterne (liebte es)
- Entwickler Diese E-Mail-Adresse ist gegen Spambots geschützt. Sie müssen JavaScript aktivieren, damit Sie sie sehen können.

Reaktionszeit Web extension integriert mit den OffiDocs Chromium Online