Wie kann man die zur Laufzeit laufende Version von React im Browser erkennen?

107

Gibt es eine Möglichkeit, die Laufzeitversion von React im Browser zu ermitteln?

Leojh
quelle
Öffnen Sie Ihre Debugger-Tools, sehen Sie sich die Quelldateien an, suchen Sie die Javascript-Datei für React und öffnen Sie sie. Bibliotheken haben normalerweise ihre Versionen oben gedruckt, auch wenn sie minimiert sind. Manchmal können Sie die Version auch anhand des Dateinamens identifizieren.
Übereinstimmung
3
In Ihrer Chrome-Konsole mit React Developer Tools__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values().next()["value"]["version"]
Yash Karanke

Antworten:

122

React.version ist was Sie suchen.

Es ist jedoch nicht dokumentiert (soweit ich weiß), so dass es möglicherweise keine stabile Funktion ist (dh obwohl es unwahrscheinlich ist, kann es in zukünftigen Versionen verschwinden oder sich ändern).

Beispiel mit Reactals Skript importiert

const REACT_VERSION = React.version;

ReactDOM.render(
  <div>React version: {REACT_VERSION}</div>,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Beispiel mit Reactals Modul importiert

import React from 'react';

console.log(React.version);

Wenn Sie Reactals Modul importieren , liegt es natürlich nicht im globalen Bereich. Der obige Code soll mit dem Rest Ihrer App gebündelt werden, z . B. mithilfe von Webpack . Es wird praktisch nie funktionieren, wenn es in der Konsole eines Browsers verwendet wird (es verwendet bloße Eingabe).

Dieser zweite Ansatz wird empfohlen. Die meisten Websites werden es verwenden. create-react-app macht das (es benutzt Webpack hinter den Kulissen ). In diesem Fall Reactist es gekapselt und außerhalb des Bundles im Allgemeinen überhaupt nicht zugänglich (z. B. in der Konsole eines Browsers).

Quentin Roy
quelle
Ich konnte console.log (React.version) am Einstiegspunkt meines Programms, um die Version zu erhalten
Leojh
1
@gotofritz Nein? Ich habe gerade mit React 16.0.0 getestet und es funktionierte immer noch. Welche Reaktionsversion verwenden Sie? Wie importierst du es?
Quentin Roy
Vielleicht hängt es davon ab, wie die App verpackt ist. Mit der Create-React-App gibt es kein globales React-Objekt.
Gotofritz
1
Nein. Es gibt keine globale Reaktion, wenn Sie die Reaktion als Modul importieren. In diesem Fall müssen Sie zuerst das Modul importieren und die versionEigenschaft des Moduls abrufen.
Quentin Roy
Dies funktioniert nicht auf Websites, die ReactJS verwenden, und Sie versuchen, die Version zu finden. Ich habe dies auf mehreren Websites versucht und erhalte immer wieder den Fehler: Uncaught ReferenceError: require is not definedundUncaught ReferenceError: React is not defined
Pixel 67
34

Über die Befehlszeile:

npm view react version
npm view react-native version
wbartussek
quelle
15

Öffnen Sie Chrome Dev Tools oder ein gleichwertiges Tool und führen Sie es require('React').versionin der Konsole aus.

Das funktioniert auch auf Websites wie Facebook, um herauszufinden, welche Version sie verwenden.

Johan Henriksson
quelle
1
Versucht es ... funktioniert nicht mit meiner App ... Laufversion React-Dom v16.
user2101068
22
In Firefox:ReferenceError: require is not defined
Jon Schneider
1
Das liegt daran, dass die Site, auf der Sie es testen, keine requirejs verwendet. @ JonSchneider
1
@ WillHoskings: Interessante Beobachtung. Gibt es eine Möglichkeit, das zu umgehen, oder stecken wir fest?
HoldOffHunger
1
@HoldOffHunger Sofern React den globalen Bereich nicht mit dem globalen "React" verschmutzt, weiß ich es nicht.
12

Wenn die React Devtools installiert sind, können Sie dies über die Browserkonsole ausführen:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(`${r.rendererPackageName}: ${r.version}`))

Welche Ausgaben so etwas wie:

react-dom: 16.12.0
domdomegg
quelle
1
Dies scheint die einzige tatsächlich funktionierende Lösung zu sein, um die auf einer Website verwendete React-Version herauszufinden.
Jari Turkia
11

Es ist nicht sicher, ob globale ECMAScript-Variablen exportiert wurden, und HTML / CSS gibt nicht unbedingt React an. Schauen Sie also in die .js.

Methode 1: In ECMAScript suchen:

Die Versionsnummer wird von beiden Modulen " React-Dom" und " React" exportiert. Diese Namen werden jedoch häufig durch Bündelung entfernt und die Version in einem Ausführungskontext versteckt, auf den nicht zugegriffen werden kann. Ein cleverer Haltepunkt kann den Wert direkt anzeigen oder Sie können das ECMAScript durchsuchen:

  1. Laden Sie die Webseite (Sie können https://www.instagram.com ausprobieren, sie sind total Coolaiders)
  2. Öffnen Sie die Chrome Developer Tools auf der Registerkarte Quellen (Strg + Umschalt + i oder Befehl + Umschalt + i).
    1. Entwicklungswerkzeuge werden auf der Registerkarte Quellen geöffnet
  3. Klicken Sie ganz rechts in der oberen Menüleiste auf die vertikalen Auslassungspunkte und wählen Sie Alle Dateien durchsuchen
  4. In er Feld unten links Typ suchen FIRED in Großbuchstaben, deaktivieren Sie das Kontrollkästchen Fall ignorieren , Typ eingeben
    1. Eine oder mehrere Übereinstimmungen werden unten angezeigt. Die Version ist ein Export, der der Suchzeichenfolge sehr nahe kommt und wie folgt aussieht: "16.0.0"
  5. Wenn die Versionsnummer nicht sofort sichtbar ist: Doppelklicken Sie auf eine Zeile, die mit einer Zeilennummer beginnt
    1. ECMAScript wird im mittleren Bereich angezeigt
  6. Wenn die Versionsnummer nicht sofort sichtbar ist: Klicken Sie auf die beiden geschweiften Klammern unten links im ECMAScript-Bereich {}
    1. ECMAScript ist neu formatiert und leichter zu lesen
  7. Wenn die Versionsnummer nicht sofort sichtbar ist: Scrollen Sie einige Zeilen nach oben und unten, um sie zu finden, oder versuchen Sie es mit einem anderen Suchschlüssel
    1. Wenn der Code nicht minimiert ist, suchen Sie nach ReactVersion. Es sollten 2 Treffer mit demselben Wert vorhanden sein
    2. Wenn der Code minimiert ist, suchen Sie entweder nach SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED oder react-dom
    3. Oder suchen Sie nach der wahrscheinlichen Versionszeichenfolge selbst: "15. oder " 16. oder sogar "0,15

Methode 2: Verwenden Sie einen DOM-Haltepunkt:

  1. Laden Sie die von React gerenderte Seite
  2. Klicken Sie mit der rechten Maustaste auf ein React-Element (etwas wie ein Eingabefeld oder ein Feld) und wählen Sie Inspect Element
    1. Chrome Developer Tools zeigt die ElementsScheibe
  3. Klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie es aus, so hoch wie möglich vom ausgewählten Element im Baum, jedoch nicht höher als das React-Wurzelelement (häufig ein Div direkt im Körper mit der ID-Wurzel: <div id = "root"> )Break On… - subtree modifications
    1. Hinweis: Es ist möglich, den Inhalt der Registerkarte "Elemente" (aktueller DOM-Status) mit der Antwort für dieselbe Ressource auf der Registerkarte "Netzwerke" zu vergleichen. Dies kann das Wurzelelement von React enthüllen
  4. Laden Sie die Seite neu, indem Sie links in der Adressleiste auf Neu laden klicken
    1. Chrome Developer Tools stoppt an der Unterbrechungsstelle und zeigt die SourcesScheibe
  5. Untersuchen Sie im Bereich ganz rechts den Call StackUnterbereich
  6. So weit unten im Aufrufstapel sollte es einen renderEintrag geben, das istReactDOM.render
  7. Klicken Sie auf die Zeile unten render, dh. Der Code, der das Rendern aufruft
  8. Im mittleren Bereich wird jetzt ECMAScript mit einem Ausdruck angezeigt , der .render hervorhebt
  9. Bewegen Sie den Mauszeiger über das Objekt, mit dem das Rendern aufgerufen wird. dasreact-dom Modul exportiert das Objekt
    1. Wenn die Codezeile lautet : Objekt (u.render) (… , schweben Sie über das u
  10. Ein Tooltip-Fenster wird angezeigt, das Folgendes enthält version: "15.6.2": Alle Werte exportiert vonreact-dom

Die Version wird auch in die React-Entwicklungstools eingefügt, aber meines Wissens nirgendwo angezeigt.

Harald Rudell
quelle
6

Öffnen Sie die Konsole und führen Sie sie aus window.React.version.

Dies funktionierte für mich in Safari und Chrome beim Upgrade von 0.12.2 auf 16.2.0.

jgrumps
quelle
Funktioniert für mich in Chrome 73.
Roderick
window.React ist undefiniert.
Francisco d'Anconia
4

Ersetzen Sie in der Datei index.js einfach die App- Komponente durch "React.version". Z.B

ReactDOM.render(React.version, document.getElementById('root'));

Ich habe dies mit React v16.8.1 überprüft

Faiyaz Alam
quelle
3

Für eine mit create-react- app erstellte App konnte ich die Version sehen:

  1. Öffnen Sie Chrome Dev Tools / Firefox Dev Tools.
  2. Suchen und öffnen Sie die Datei main.XXXXXXXX.js, in der XXXXXXXX ein Build-Hash ist / anders sein könnte.
  3. Optional: Formatieren Sie die Quelle, indem Sie auf {} klicken, um die formatierte Quelle anzuzeigen.
  4. Suchen Sie als Text in der Quelle nach React-Dom.
  5. in Chrome wurde gefunden: "react-dom": "^ 16.4.0",
  6. in Firefox wurde gefunden: 'react-dom': '^ 16.4.0'

Die App wurde ohne Quellkarte bereitgestellt.

Fierascu Gheorghe
quelle
3

In einem vorhandenen Projekt können Sie die React-Version auf einfache Weise anzeigen, indem Sie zu einer renderMethode einer beliebigen Komponente wechseln und Folgendes hinzufügen:

<p>{React.version}</p>

Dies setzt voraus, dass Sie React wie folgt importieren: import React from 'react'

DrNio
quelle
1

Installieren Sie zuerst die React dev-Tools, falls diese nicht installiert sind, und verwenden Sie dann den folgenden Code in der Browserkonsole:

__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).version
Birender Pathania
quelle