如何判断浏览器在运行时运行的React版本？

安装了React Devtools后，您可以从浏览器控制台中运行它：

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

输出如下：

react-dom: 16.12.0

在命令行中：

npm view react version
npm view react-native version

打开控制台，然后运行window.React.version。

从0.12.2升级到16.2.0时，这在Safari和Chrome中对我有用。

不确定是否已导出任何全局ECMAScript变量，并且html / css不一定表示React。因此，请查看.js。

方法1：在ECMAScript中查看：

The version number is exported by both modules react-dom and react but those names are often removed by bundling and the version hidden inside an execution context that cannot be accessed. A clever break point may reveal the value directly, or you can search the ECMAScript:

1. Load the Web page (you can try https://www.instagram.com they’re total Coolaiders)
2. Open Chrome Developer Tools on Sources tab (control+shift+i or command+shift+i)
   1. Dev tools open on the Sources tab
3. In the very right of the top menu bar, click the vertical ellipsis and select search all files
4. In he search box down on left type FIRED in capital letters, clear the checkbox Ignore case, type Enter
   1. One or more matches appear below. The version is an export very close to the search string looking like version: "16.0.0"
5. If the version number is not immediately visible: double click a line that begins with a line number
   1. ECMAScript appears in the middle pane
6. If the version number is not immediately visible: click the two braces at bottom left of the ECMAScript pane {}
   1. ECMAScript is reformatted and easier to read
7. If the version number is not immediately visible: scroll up and down a few lines to find it or try another search key
   1. If the code is not minified, search for ReactVersion There should be 2 hits with the same value
   2. If the code is minified, search for either SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED or react-dom
   3. Or search for the likely version string itself: "15. or "16. or even "0.15

Method 2: Use a DOM breakpoint:

1. Load the page rendered by React
2. Right click a React element (anything, like an input field or a box) and select Inspect Element
   1. Chrome Developer Tools displays the Elements pane
3. As high up in the tree as possible from the selected element, but no higher than the React root element (often a div directly inside body with id root: <div id="root">), right click an element and select Break On… - subtree modifications
   1. Note: It is possible to compare contents of the Elements tab (DOM current state) with the response for the same resouce on the Networks tab. This may reveal React’s root element
4. Reload the page by clicking Reload left of the address bar
   1. Chrome Developer Tools stops at the breakpoint and displays the Sources pane
5. In the rightmost pane, examine the Call Stack sub-pane
6. As far down the call stack as possible, there should be a render entry, this is ReactDOM.render
7. Click the line below render, ie. the code that invokes render
8. The middle pane now displays ECMAScript with an expression containing .render highlighted
9. Hover the mouse cursor over the object used to invoke render, is. the react-dom module exports object
   1. 如果代码行：Object（u.render）（…，将鼠标悬停在u上
10. 显示一个工具提示窗口，其中包含version: "15.6.2"。导出的所有值react-dom

该版本也被注入到React开发工具中，但据我所知没有显示在任何地方。