Skip to content

Latest commit

 

History

History
307 lines (235 loc) · 18.1 KB

README.fr.md

File metadata and controls

307 lines (235 loc) · 18.1 KB
Raw




Outil de Performance pour React
Nominé aux React Open Source Awards 2020

Reactime est un outil de performance et de débogage pour les développeurs React. Reactime enregistre un snapshot à chaque fois que l'état d'une application cible est modifié et permet à l'utilisateur de passer à tout état précédemment enregistré.


GitHub Build Status npm version BabelPresetPrefs LintPrefs


🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇺🇸   ENGLISH VERSION

  Website

Caractéristiques

🔹 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 instantanés peuvent être comparés à l'instantané précédent, qui peut être visualisé en mode Diff.


🔹 Enregistrement

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

🔹 Série d'Instantanés et Comparaison d'Actions

Vous pouvez enregistrer une série d'instantanés d'état et l'utilizer pour analyser les changements dans les performances de rendu des composants entre la série d'instantanés actuelle et la série précédente. Vous pouvez également nommer les instantanés spécifiquement et comparer tous les instantanés avec le même nom.

🔹 Comparaison des Composants

Lorsque vous avez sélectionné un instantané, un visualisation des composants individuels de l'instantané sera affichée. Cela peut être fait sous le même onglet de performances où les instantanés sont rendus. Vous pouvez également voir les détails d'un composant lorsque vous le survolez avec votre souris.

🔹 Importer/Exporter des Instantanés

Vous pouvez exporter les instantanés sous forme de fichier JSON et les importer pour accéder aux arborescences d'état sur différentes sessions.


🔹 Reconnexion et Statut

Si Reactime se déconnecte 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 déconnecté.


🔹 Optimisation du Rendu

L'un des problèmes les plus courants affectant les performances dans React est rednu plusieurs fois. Ce problème peut être résolu en vérifiant vos rendus dans le Onglet Performances dans Chrome DevTools sous le panneau Reactime.

🔹 Jumping

Un utilisateur peut accéder à n'importe quel instantané précédemment enregistré à l'aide de la barre latérale 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 première fois.

🔹 Gatsby

Reactime offre un support complet pour les applications Gatsby.

🔹 Next.js

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

🔹 Remix

Reactime propose des outils de débogage et de performances pour les applications Remix (en version bêta).

🔹 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 développement supplémentaires sont nécessaires pour les hooks personnalisés.

Documentation

Après avoir cloné ce référentiel, les développeurs peuvent simplement exécuter npm run docs au niveau racine et servir le fichier /docs/index.html généré dynamiquement sur un navigateur. Cela fournira une vue GUI lisible, extensible et interactive de la structure et des interfaces de la base de code.

Caractéristiques Supplémentaires

  • Tutoriels pour des onglets spécifiques
  • Passez la souris sur un composant pour afficher les détails 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 déroulante pour accompagner le développement de projets sur plusieurs onglets
  • Fonctionnalité verrouillée/déverrouillée permettant une pause temporaire de la surveillance de l'état
  • Visualisation des propriétés à la fois en couleur et en épaisseur des branches reliant les composants
  • Barre de chaleur sous le menu supérieur

Quoi de Neuf!

Reactime 25.0 comprend une nouvelle fonctionnalité de visualisation des propriétés et une barre de chaleur pour les développeurs !

Nous avons également résolu les problèmes de gel signalés précédemment au démarrage et avons amélioré la bibliothèque 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é réorganisée pour être plus esthétiquement agréable et pour rendre la fenêtre principale plus grande pour l'affichage de l'arbre des composants dans le processus.

Regarder Plus Profondément

En résolvant les problèmes persistants de déconnexion/d'écran noir qui affectaient parfois les utilisateurs lors de l'utilisation régulière de l'application, nous avons apporté des améliorations décisives en supprimant la fonction « keepAlive » et en implémentant une logique robuste pour résoudre le problème principal. Cela nous a permis d'affiner le protocole de communication entre notre application et le navigateur, offrant ainsi une connexion plus cohérente et stable. Cela offre aux utilisateurs une voie de récupération rapide et constitue également une couche de protection supplémentaire contre toute déconnexion inattendue à l'avenir.

Pour améliorer la maintenabilité, l'évolutivité et la longévité, nous avons mis à jour et supprimé progressivement certaines dépendances. Nous nous sommes éloignés de la bibliothèque Immer et avons transféré 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 métriques Web. Dans le cadre de cette transition, nous avons également converti tous les tests existants pour qu'ils fonctionnent avec le système 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, renforçant la qualité du code et la détection précoce des problèmes de développement potentiels.

Nous avons apporté de nombreux changements destinés à améliorer l'expérience utilisateur. Le premier est la fonction de reconnexion, conçue comme une mesure de protection pour les moments inattendus où un utilisateur est déconnecté. Lorsque cela se produit, une boîte de dialogue contextuelle intuitive apparaîtra instantanément, offrant aux utilisateurs un moyen transparent de replonger directement dans leur session, tout en offrant également la possibilité de télécharger des instantanés d'état enregistrés sous forme de fichier JSON. Nous avons également intégré un indicateur d'état dynamique qui affiche de manière 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 développeurs des informations sur la stabilité et la réactivité de la mise en page, leur permettant ainsi d'optimiser les interactions des utilisateurs avec précision.

Si vous souhaitez en savoir plus sur les versions précédentes, cliquez ici !

Installation

Pour commencer, installer l’extension Reactime depuis le Chrome Web Store.

REMARQUE: L'extension React Developer Tools est également requise pour que Reactime s'exécute, si vous ne l'avez pas déjà installé sur votre navigateur.

Installation Alternative

Utilisez src/extension/build/build.zip pour une installation manuelle en mode Développeur. Activez "Autoriser l'accès aux URL de fichiers" dans la page des détails de l'extension si vous effectuez un test local.

Voulez-vous contribuer à Reactime ?

Veuillez vous référer à la documentation du développeur pour un guide détaillé :

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

Manuel

Après avoir installé l’extension Chrome Reactime, ouvrez votre application dans le navigateur.

Ensuite, ouvrez vos Chrome DevTools et accédez au panneau Reactime.

Diagnostic des anomalies

❓ Que faire quand Reactime ne trouve pas d’application React?

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

❓ Un écran noir s’affiche à la place de l’extension 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».

❓ J’ai trouvé un bug dans Reactime

Reactime est un projet open source, et toute aide de vore part sera grandement appréciée pour nous aider à améliorer l'expérience utilisateur. Veuillez créer une pull request (ou un problème) pour proposer et collaborer sur les modifications apportées à un référentiel.

En savoir plus

Auteurs

License

Ce projet est sous licence MIT - voir le fichier LICENSE pour plus de détails