Skip to content

Latest commit

 

History

History
171 lines (125 loc) · 10.6 KB

README.fr.md

File metadata and controls

171 lines (125 loc) · 10.6 KB




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

  Manuel • Caractéristiques • Website • En savoir plus

Actuellement, Reactime est compatible avec les applications React qui utilisent des composants à état (stateful) et Hooks, avec un support en version bêta de Recoil et de pour le Context API.

Reactime version 7.0 beta peut vous aider à éviter les ré-rendus inutiles. Identifier les rendus inutiles dans vos applications React est le point de départ idéal pour identifier la plupart des problèmes de performances. La version beta 7.0 de Reactime corrige les bugs des anciennes versions et intègre des visualisations améliorées pour les relations entre les composants. Reactime 7.0 inclut également une documentation typedoc plus approfondie pour les développeurs souhaitant contribuer au code source.

Après avoir installé Reactime, vous pouvez tester ses fonctionnalités avec votre application React en mode développement.

Veuillez noter que la fonction de saut de temps fonctionnera UNIQUEMENT lorsque votre application s'exécute en mode développement. En mode production, vous pouvez afficher la carte des composants de votre application, mais aucune fonctionnalité supplémentaire.

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.

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.

Caractéristiques

Optimisation du rendu

L'un des problèmes les plus courants qui affectent les performances dans React est les cycles de rendu inutiles. Ce problème peut être résolu en vérifiant vos rendus dans l'onglet Performances de Chrome DevTools sous le panneau Reactime.

Enregistrement

Chaque fois que l'état est changé (chaque fois que setState, useState est appelé), cette extension crée un snapshot de l'arbre d'état actuelle et l'enregistre. Chaque instantané sera affiché dans Chrome DevTools sous le panneau Reactime.

Visualisation

Vous pouvez cliquer sur un snapshot pour afficher l'état de votre application. L'état peut être visualisé dans un graphique de composants, une arbre JSON ou un graphique de performances. Les snapshots peuvent être différents d'un snapshot précédent, et peut être visualisé en mode Diff.

Jumping

À l'aide de la barre latérale des actions, un utilisateur peut accéder à n'importe quel snapshot enregistré précédemment. Appuyer sur le bouton de saut sur n'importe quel snapshot permettra à un utilisateur d'afficher les données d'état à tout moment dans l'historique de l'application cible.

Support pour TypeScript

Reactime propose un support bêta pour les 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, l'API de contexte et le mode Concurrent.

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

  • identifier les rendus inutiles
  • fonctionnalité de survol pour afficher les détails des info-bulles sur les visualisations d'état
  • possibilité de panoramique et de zoom sur les visualisations d'état
  • une liste déroulante pour prendre en charge le développement de projets sur plusieurs onglets
  • un curseur pour parcourir rapidement les snapshots
  • un bouton de lecture pour se déplacer automatiquement dans les snapshots
  • un bouton de verrouillage, qui arrête l'enregistrement de chaque snapshot
  • un bouton persister pour conserver les snapshots lors de l'actualisation (pratique lors du changement de code et du débogage)
  • télécharger les snapshots actuels en mémoire
  • titres déclaratifs dans la barre latérale des actions

En savoir plus

Auteurs

License

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