Reactime

Developer tool for time travel debugging and performance monitoring in React applications.

MIT License

Stars
2.2K
Committers
119
View Code on GitHub Visit Website
Ecosystems: Gatsby, Next, React

Caractristiques

L'Exposition

Vous pouvez afficher la structure des fichiers de votre application et cliquer sur un instantan pour afficher l'tat de votre application. L'tat peut tre visualis dans un graphique de composants, une arborescence JSON ou un graphique de performances. Les instantans peuvent tre compars l'instantan prcdent, qui peut tre visualis en mode Diff.

Enregistrement

Chaque fois que l'tat est modifi (chaque fois que setState, useState est appel), cette extension crera un instantan de l'arborescence d'tat actuelle et l'enregistrera. Chaque instantan sera affich dans Chrome DevTools sous le panneau Reactime.

Srie d'Instantans et Comparaison d'Actions

Vous pouvez enregistrer une srie d'instantans d'tat et l'utilizer pour analyser les changements dans les performances de rendu des composants entre la srie d'instantans actuelle et la srie prcdente. Vous pouvez galement nommer les instantans spcifiquement et comparer tous les instantans avec le mme nom.

Comparaison des Composants

Lorsque vous avez slectionn un instantan, un visualisation des composants individuels de l'instantan sera affiche. Cela peut tre fait sous le mme onglet de performances o les instantans sont rendus. Vous pouvez galement voir les dtails d'un composant lorsque vous le survolez avec votre souris.

Importer/Exporter des Instantans

Vous pouvez exporter les instantans sous forme de fichier JSON et les importer pour accder aux arborescences d'tat sur diffrentes sessions.

Reconnexion et Statut

Si Reactime se dconnecte de l'application que vous surveillez, cliquez sur le bouton Reconnect pour reprendre votre travail. Il y a un petit cercle sur le bouton. Il sera vert si vous tes connect et rouge si vous tes dconnect.

Optimisation du Rendu

L'un des problmes les plus courants affectant les performances dans React est rednu plusieurs fois. Ce problme peut tre rsolu en vrifiant vos rendus dans le Onglet Performances dans Chrome DevTools sous le panneau Reactime.

Jumping

Un utilisateur peut accder n'importe quel instantan prcdemment enregistr l'aide de la barre latrale d'actions. Si un utilisateur appuie sur le bouton Jump sur un instantan, il pourra voir les informations d'tat partir du moment o cet instantan a t cr pour la premire fois.

Gatsby

Reactime offre un support complet pour les applications Gatsby.

Next.js

Reactime propose des outils de dbogage et de performances pour les applications Next.js : dbogage de voyage dans le temps, vitant les rendus de composants inutiles et rendant votre application plus rapide.

Remix

Reactime propose des outils de dbogage et de performances pour les applications Remix (en version bta).

TypeScript

Reactime offre la prise en charge des applications TypeScript utilisant des composants de classe avec tat et des composants fonctionnels. Des tests et un dveloppement supplmentaires sont ncessaires pour les hooks personnaliss.

Documentation

Aprs avoir clon ce rfrentiel, les dveloppeurs peuvent simplement excuter npm run docs au niveau racine et servir le fichier /docs/index.html gnr dynamiquement sur un navigateur. Cela fournira une vue GUI lisible, extensible et interactive de la structure et des interfaces de la base de code.

Caractristiques Supplmentaires

  • Tutoriels pour des onglets spcifiques
  • Passez la souris sur un composant pour afficher les dtails de l'tat
  • Double-cliquez pour masquer les composants enfants
  • Cliquez pour vous concentrer sur une partie de la carte des composants
  • A dropdown to support the development of projects on multiple tabs
  • Une liste droulante pour accompagner le dveloppement de projets sur plusieurs onglets
  • Fonctionnalit verrouille/dverrouille permettant une pause temporaire de la surveillance de l'tat
  • Visualisation des proprits la fois en couleur et en paisseur des branches reliant les composants
  • Barre de chaleur sous le menu suprieur

Reactime 25.0 comprend une nouvelle fonctionnalit de visualisation des proprits et une barre de chaleur pour les dveloppeurs !

Nous avons galement rsolu les problmes de gel signals prcdemment au dmarrage et avons amlior la bibliothque Jest, qui est maintenant en bien meilleur tat qu'avant, avec la plupart des tests fonctionnant correctement.

Une partie de l'interface utilisateur a t rorganise pour tre plus esthtiquement agrable et pour rendre la fentre principale plus grande pour l'affichage de l'arbre des composants dans le processus.

Regarder Plus Profondment

En rsolvant les problmes persistants de dconnexion/d'cran noir qui affectaient parfois les utilisateurs lors de l'utilisation rgulire de l'application, nous avons apport des amliorations dcisives en supprimant la fonction keepAlive et en implmentant une logique robuste pour rsoudre le problme principal. Cela nous a permis d'affiner le protocole de communication entre notre application et le navigateur, offrant ainsi une connexion plus cohrente et stable. Cela offre aux utilisateurs une voie de rcupration rapide et constitue galement une couche de protection supplmentaire contre toute dconnexion inattendue l'avenir.

Pour amliorer la maintenabilit, l'volutivit et la longvit, nous avons mis jour et supprim progressivement certaines dpendances. Nous nous sommes loigns de la bibliothque Immer et avons transfr notre gestion d'tat pour utiliser Redux Toolkit, tout en mettant niveau l'API Web Vitals de la version 1.1.2 3.5.0, nous permettant d'utiliser une gamme plus large de mtriques Web. Dans le cadre de cette transition, nous avons galement converti tous les tests existants pour qu'ils fonctionnent avec le systme de gestion d'tat mis jour, tout en largissant encore les suites de tests pour augmenter la couverture globale des tests. Enfin, nous avons obtenu une augmentation notable de la couverture TypeScript, renforant la qualit du code et la dtection prcoce des problmes de dveloppement potentiels.

Nous avons apport de nombreux changements destins amliorer l'exprience utilisateur. Le premier est la fonction de reconnexion, conue comme une mesure de protection pour les moments inattendus o un utilisateur est dconnect. Lorsque cela se produit, une bote de dialogue contextuelle intuitive apparatra instantanment, offrant aux utilisateurs un moyen transparent de replonger directement dans leur session, tout en offrant galement la possibilit de tlcharger des instantans d'tat enregistrs sous forme de fichier JSON. Nous avons galement intgr un indicateur d'tat dynamique qui affiche de manire transparente l'tat actuel de l'application d'un utilisateur, indiquant s'il est en ligne ou hors ligne. Nous avons galement enrichi l'application avec deux mesures de performances Web essentielles : Cumulative Layout Shift (CLS) et Interaction to Next Paint (INP). Ces mesures sont essentielles, car elles fournissent aux dveloppeurs des informations sur la stabilit et la ractivit de la mise en page, leur permettant ainsi d'optimiser les interactions des utilisateurs avec prcision.

Si vous souhaitez en savoir plus sur les versions prcdentes, cliquez ici !

Pour commencer, installer lextension Reactime depuis le Chrome Web Store.

REMARQUE: L'extension React Developer Tools est galement requise pour que Reactime s'excute, si vous ne l'avez pas dj install sur votre navigateur.

Installation Alternative

Utilisez src/extension/build/build.zip pour une installation manuelle en mode Dveloppeur. Activez "Autoriser l'accs aux URL de fichiers" dans la page des dtails de l'extension si vous effectuez un test local.

Voulez-vous contribuer Reactime ?

Veuillez vous rfrer la documentation du dveloppeur pour un guide dtaill :

Consultez DEVELOPER README pour plus d'informations sur le projet et des instructions sur la construction partir des sources.

Manuel

Aprs avoir install lextension Chrome Reactime, ouvrez votre application dans le navigateur.

Ensuite, ouvrez vos Chrome DevTools et accdez au panneau Reactime.

Diagnostic des anomalies

Que faire quand Reactime ne trouve pas dapplication React?

Reactime s'excute initialement l'aide du hook global des outils de dveloppement de l'API Chrome. Leur chargement dans Chrome peut prendre du temps. Essayez d'actualiser votre application plusieurs fois jusqu' ce que Reactime s'excute.

Un cran noir saffiche la place de lextension Reactime

Essayez d'actualiser l'application que vous souhaitez tester et actualisez les DevTools en cliquant sur le bouton droit de la souris Recharger le cadre.

Jai trouv un bug dans Reactime

Reactime est un projet open source, et toute aide de vore part sera grandement apprcie pour nous aider amliorer l'exprience utilisateur. Veuillez crer une pull request (ou un problme) pour proposer et collaborer sur les modifications apportes un rfrentiel.

En savoir plus

Auteurs

License

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de dtails

Related Projects
blitz

⚡️ The Missing Fullstack Toolkit for Next.js

17 Feb 2020 13,409