Skip to content

Latest commit

 

History

History
379 lines (304 loc) · 19.7 KB

README.fr.md

File metadata and controls

379 lines (304 loc) · 19.7 KB

Outil de Performance React
🏆 Nominé pour les React Open Source Awards 2020

Une puissante extension Chrome qui améliore le développement React grâce au débogage avec retour dans le temps et à la surveillance avancée des performances


Chrome Web Store Utilisateurs sur le Chrome Web Store Évaluation sur le Chrome Web Store


🇷🇺   РУССКАЯ ВЕРСИЯ   •   🇺🇸   ENGLISH VERSION   •   👩‍💻 README Développeur

✨ Fonctionnalités Clés

🔍 Visualisation de l'État

  • Vues Multiples : Visualisez l’état de votre application via des Graphiques de Composants, des Arborescences JSON, des Graphiques de Performances et des Arbres d’Accessibilité
  • Historique Chronologique : Suivez l’évolution de l’état dans le temps grâce à une représentation intuitive de l’historique
  • Métriques Web : Surveillez en temps réel les métriques de performance essentielles
  • Aperçus d’Accessibilité : Analysez l’arbre d’accessibilité de votre application pour chaque changement d’état

Sur la page principale, vous disposez de deux choix principaux depuis le menu déroulant :

  • Timejump : Consultez et naviguez dans l’historique des snapshots de l’état de votre application. Vous pouvez revenir à n’importe quel point dans le temps pour observer l’évolution de l’état au fil des modifications. Vous pouvez également utiliser le bouton de lecture pour rejouer chaque changement d’état automatiquement.
  • Providers / Consumers : Comprenez mieux les dépendances de contexte de votre application et leurs interactions grâce à une visualisation des relations entre fournisseurs et consommateurs.


⏱️ Débogage avec Retour dans le Temps

  • Snapshots d’État : Capturez et naviguez à travers l’historique d’état de votre application
  • Commandes de Lecture : Rejouez automatiquement les changements d’état avec une vitesse ajustable
  • Points de Saut : Naviguez instantanément vers n’importe quel état antérieur
  • Comparaisons Diff : Comparez l’état entre différents snapshots


📊 Analyse de Performance

  • Métriques de Composants : Mesurez les temps de rendu et identifiez les goulets d’étranglement
  • Comparaison de Séries : Comparez les performances sur différentes séries de changements d’état
  • Détection de Re-rendu : Identifiez et corrigez les rendus inutiles
  • Web Vitals : Surveillez les Core Web Vitals et d’autres métriques de performance

🔄 Prise en Charge des Frameworks Modernes

  • Compatibilité complète avec Gatsby, Next.js et Remix
  • Prise en charge de TypeScript pour les composants de classe et fonctionnels
  • Prise en charge des Hooks et de l’API Context de React

💾 Persistance & Partage d’État

Reactime facilite la sauvegarde et le partage de l’historique d’état de votre application :

  • Exporter l’Historique d’État : Enregistrez vos snapshots sous forme de fichier JSON pour une analyse ultérieure ou pour les partager
  • Importer des Sessions Précédentes : Chargez des snapshots enregistrés précédemment pour comparer les changements d’état entre différentes sessions
  • Analyse Inter-Session : Comparez les performances et les changements d’état entre différentes sessions de développement


📚 Documentation Interactive

Reactime propose une documentation complète pour aider les développeurs à comprendre son architecture et ses APIs.
Après avoir cloné ce référentiel, les développeurs peuvent simplement exécuter npm run docs à la racine et servir le fichier /docs/index.html généré dynamiquement, offrant :

  • Des diagrammes interactifs de composants
  • Des définitions de types et interfaces
  • Une vue d’ensemble de l’architecture du code
  • Des références d’API et des exemples

🎉 Nouveautés !

La version 26.0 de Reactime propose une refonte complète de l’expérience de débogage React, avec :

  • Nouvelle Visualisation des Données de Contexte

    • Première visualisation des changements d’état du hook useContext
    • Cartographie claire des relations fournisseur-consommateur
    • Surveillance en temps réel de la valeur d’état du contexte
    • Visualisation détaillée des données du fournisseur

  • Débogage avec Retour dans le Temps Amélioré

    • Interface du curseur de temps repensée, positionnée à côté des snapshots
    • Contrôles de vitesse de lecture variables
    • Navigation plus intuitive dans l’état
    • Visualisation de snapshot améliorée

  • Refonte Complète de l’UI Moderne

    • Design élégant et contemporain avec composants arrondis
    • Améliorations de la disposition pour une meilleure intuitivité
    • Nouveau mode sombre
    • Hiérarchie visuelle améliorée

  • Améliorations Techniques Majeures

    • Correction de la persistance de connexion lors de périodes d’inactivité et de changements d’onglet
    • Restauration de la visualisation de l’arbre d’accessibilité
    • Résolution de problèmes de capture d’état pour les hooks useState basés sur des fonctions
    • Fiabilité et performance globales de l’extension grandement améliorées

Ces mises à jour rendent Reactime plus puissant, plus fiable et plus convivial que jamais, établissant un nouveau standard pour les outils de débogage React.

Pour en savoir plus sur les versions précédentes, cliquez ici !

🚀 Bien Commencer

Installation

  1. Installez l’extension Reactime depuis le Chrome Web Store
  2. Installez l’extension requise React Developer Tools si vous ne l’avez pas déjà

Prérequis

  • Votre application React doit fonctionner en mode développement
  • L’extension React Developer Tools doit être installée
  • Navigateur Chrome (version 80 ou supérieure recommandée)

Lancer Reactime

Il existe deux manières d’ouvrir le panneau Reactime :

  1. Menu Contextuel

    • Faites un clic droit n’importe où dans votre application React
    • Sélectionnez "Reactime" dans le menu contextuel

  2. DevTools

    • Ouvrez les DevTools de Chrome (F12 ou ⌘+⌥+I)
    • Naviguez jusqu’à l’onglet "Reactime"

Une fois lancé, Reactime commencera automatiquement à surveiller les changements d’état et les métriques de performance de votre application.

🤝 Contribuer à Reactime

Nous accueillons avec joie les contributions de développeurs de tous niveaux ! Voici comment vous pouvez aider à améliorer Reactime: 🙋 Contributing README

  1. Commencer

    • Forkez le dépôt
    • Consultez notre README Développeur détaillé
    • Mettez en place votre environnement de développement local

  2. Processus de Build

    • Suivez les instructions de build dans le README Développeur
    • Testez soigneusement vos modifications
    • Soumettez une Pull Request

Rejoignez notre communauté grandissante de contributeurs et participez à façonner l’avenir des outils de débogage React ! Pour des lignes directrices de contribution plus détaillées et des informations sur l’architecture du projet, veuillez vous référer à notre 👩‍💻 README Développeur.

🛠️ Dépannage

❓ Pourquoi Reactime n’enregistre-t-il pas les nouveaux changements d’état ?

Reactime a perdu sa connexion avec l’onglet que vous surveillez ; il vous suffit de cliquer sur le bouton "reconnecter" pour reprendre votre travail.

❓ Pourquoi Reactime ne trouve-t-il pas mes hooks ?

Reactime détecte et surveille les hooks en parcourant le code React non minifié de votre application en mode développement. Si votre processus de build minifie ou "uglifie" votre code — même pour les builds de développement — Reactime risque de ne pas pouvoir localiser et suivre correctement vos hooks. Pour résoudre ce problème :

  1. Assurez-vous d’une vraie build de développement : Vérifiez la configuration de votre bundler ou outil de build (par ex. Webpack, Babel, Vite, etc.) pour vous assurer que votre application n’est pas minimisée ou "uglifiée" en mode développement.

    • Par exemple, avec Webpack, assurez-vous d’exécuter le mode : 'development', ce qui devrait désactiver la minification par défaut.
    • Dans un projet Create React App, il suffit d’exécuter npm start ou yarn start pour configurer automatiquement une build de développement non minifiée.

  2. Vérifiez les surcharges : Assurez-vous qu’aucun plugin Babel ou Webpack personnalisé ne minifie votre code, surtout si vous utilisez des frameworks comme Next.js ou Gatsby. Parfois, des plugins ou scripts supplémentaires peuvent s’exécuter en arrière-plan.

  3. Redémarrez & recompilez : Après avoir modifié toute configuration de build, recompilez ou redémarrez votre serveur de développement pour vous assurer que la nouvelle configuration est prise en compte. Ensuite, rafraîchissez l’onglet de votre navigateur afin que Reactime puisse détecter vos hooks non minifiés.

Après avoir modifié toute configuration de build, recompilez ou redémarrez votre serveur de développement pour vous assurer que la nouvelle configuration est prise en compte. Ensuite, rafraîchissez l’onglet de votre navigateur afin que Reactime puisse détecter vos hooks non minifiés.

❓ Pourquoi Reactime m’indique qu’aucune application React n’a été trouvée ?

Reactime s’exécute initialement grâce au hook global des dev tools de Chrome.
Il faut du temps à Chrome pour le charger. Essayez de rafraîchir votre application plusieurs fois jusqu’à ce que vous voyiez Reactime en fonctionnement.

❓ Pourquoi dois-je avoir les React Dev Tools activées ?

Reactime fonctionne de concert avec les React Developer Tools pour accéder à l’arbre Fiber d’une application React ; en interne, Reactime parcourt l’arbre Fiber via le hook global des React Dev Tools, récupérant toutes les informations pertinentes à afficher au développeur.

❓ J’ai trouvé un bug dans Reactime

Reactime est un projet open-source, et nous serions ravis d’avoir vos retours pour améliorer l’expérience utilisateur. Veuillez consulter le 👩‍💻 README Développeur, et créer une Pull Request (ou une issue) pour proposer et collaborer sur des modifications de Reactime.

❓ Compatibilité avec les versions Node

Depuis la sortie de Node v18.12.1 (LTS) le 04/11/22, le script a été mis à jour avec npm run dev | npm run build pour assurer une rétrocompatibilité.

Pour la version Node v16.16.0, veuillez utiliser les scripts npm run devlegacy | npm run buildlegacy

✍️ Auteurs

⚖️ Licence

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