如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...

在 Production Mode 下，React 并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。

条件

• 浏览器安装了 React Developer Tools

步骤

以知乎为例

• 打开浏览器 Console，输入 __REACT_DEVTOOLS_GLOBAL_HOOK__，这是 React Developer Tools 暴露的全局变量。

• __REACT_DEVTOOLS_GLOBAL_HOOK__ 的对象中包含了一个 renderers，找到其中其中的 findFiberByHostInstance 方法，右键，然后选择 Show function definition。

• 浏览器会跳到 Sources Tab 中，点击左下角 Pretty print。

• 在 findFiberByHostInstance 对应的文件就是 ReactDOM 所在的文件，然后在这个文件中搜索（ctrl + f） createElement 方法，这就是 React 本身包含的方法。在搜索结果中找到类似如下的位置，加断点。

• 刷新浏览器，在浏览器断点暂停后，对应的例如上面的 a.a 就是 React 实例了，可以在 Console 中打印看看。如果没有断点暂停，说明代码并没有运行到，可以更换createElement 方法出现的位置加断点。