Comment peut-on dire la version de React en cours d’exécution à l’exécution dans le navigateur?

Existe-t-il un moyen de connaître la version d’exécution de React dans le navigateur?

React.version est ce que vous recherchez.

Il n’est cependant pas documenté (pour autant que je sache), il ne s’agit donc peut-être pas d’une fonctionnalité stable (bien qu’improbable, elle pourrait disparaître ou changer dans les versions futures).

Exemple avec React importé en tant que script

 const REACT_VERSION = React.version; ReactDOM.render( 
React version: {REACT_VERSION}
, document.getElementById('content') );
   

Ouvrez Chrome Dev Tools ou équivalent et exécutez require('React').version dans la console.

Cela fonctionne sur les sites Web comme Facebook aussi pour savoir quelle version ils utilisent.

Il n’est pas certain que des variables ECMAScript globales aient été exscopes et que html / css n’indique pas nécessairement React. Alors regardez dans les .js.

Méthode 1: Rechercher dans ECMAScript:

Le numéro de version est exporté par les deux modules rea-dom et réagit, mais ces noms sont souvent supprimés par regroupement et la version est masquée dans un contexte d’exécution inaccessible. Un point d’arrêt intelligent peut révéler directement la valeur, ou vous pouvez rechercher l’ECMAScript:

  1. Chargez la page Web (vous pouvez essayer https://www.instagram.com ils sont des Coolaiders totaux)
  2. Ouvrez les outils de développement Chrome sur l’onglet Sources (contrôle + Maj + i ou commande + Maj + i)
    1. Outils de développement ouverts sur l’onglet Sources
  3. À l’extrême droite de la barre de menus supérieure, cliquez sur les points de suspension verticaux et sélectionnez Rechercher tous les fichiers.
  4. Dans la zone de recherche située à gauche, tapez FIRED en majuscules, décochez la case Ignorer la casse , tapez Enter
    1. Une ou plusieurs correspondances apparaissent ci-dessous. La version est une exportation très proche de la chaîne de recherche ressemblant à la version: “16.0.0”
  5. Si le numéro de version n’est pas immédiatement visible: double-cliquez sur une ligne commençant par un numéro de ligne
    1. ECMAScript apparaît dans le volet central
  6. Si le numéro de version n’est pas immédiatement visible: cliquez sur les deux accolades en bas à gauche du volet ECMAScript {}
    1. ECMAScript est reformaté et plus facile à lire
  7. Si le numéro de version n’est pas immédiatement visible: faites défiler quelques lignes pour le trouver ou essayez une autre clé de recherche.
    1. Si le code n’est pas minifié, recherchez ReactVersion Il devrait y avoir 2 hits avec la même valeur
    2. Si le code est minifié, recherchez soit SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ou rea -dom
    3. Ou recherchez la chaîne de version probable elle-même: “15. ou ” 16. ou même “0,15

Méthode 2: Utiliser un point d’arrêt DOM:

  1. Charger la page rendue par React
  2. Faites un clic droit sur un élément React (n’importe quoi, comme un champ de saisie ou une zone) et sélectionnez Inspect Element
    1. Chrome Developer Tools affiche le volet Elements
  3. Aussi haut que possible dans l’élément sélectionné, mais pas plus haut que l’élément racine de React (souvent une div directement à l’intérieur du corps avec l’id root:

    ), cliquez avec le bouton droit sur un élément et sélectionnez Break On… - subtree modifications

    1. Remarque: Il est possible de comparer le contenu de l’onglet Eléments (état actuel du DOM) avec la réponse pour la même ressource sur l’onglet Réseaux. Cela peut révéler l’élément racine de React
  4. Rechargez la page en cliquant sur Recharger à gauche de la barre d’adresse
    1. Chrome Developer Tools s’arrête au point d’arrêt et affiche le volet Sources
  5. Dans le volet le plus à droite, examinez le sous-volet Call Stack
  6. Dans la mesure du possible, il doit y avoir une entrée de render , ReactDOM.render
  7. Cliquez sur la ligne ci-dessous, c.-à-d. le code qui invoque le rendu
  8. Le volet central affiche maintenant ECMAScript avec une expression contenant .render en surbrillance
  9. Passez le curseur de la souris sur l’object utilisé pour invoquer le rendu, c’est. le module react-dom exporte l’object
    1. si la ligne de code va: Object (u.render) (… , survolez le u
  10. Une fenêtre d’info-bulle s’affiche avec la version: "15.6.2" , c.-à-d. toutes les valeurs exscopes par react-dom

La version est également injectée dans les outils de développement de React, mais pour autant que je sache, elle ne s’affiche nulle part.

Ouvrez la console, puis exécutez window.React.version .

Cela a fonctionné pour moi dans Safari et Chrome tout en mettant à niveau le formulaire 0.12.2 à 16.2.0.

Pour une application créée avec create-react-app, j’ai réussi à voir la version:

  1. Ouvrez Chrome Dev Tools / Firefox Dev Tools,
  2. Rechercher et ouvrir le fichier main.XXXXXXXX.js où XXXXXXXX est un hash builds / pourrait être différent,
  3. Facultatif: formatez le source en cliquant sur {} pour afficher la source formatée,
  4. Rechercher sous forme de texte dans la source pour réagir,
  5. dans Chrome a été trouvé: “rea-dom”: “^ 16.4.0”,
  6. dans Firefox a été trouvé: ‘react-dom’: ‘^ 16.4.0’

L’application a été déployée sans carte source.