如何在浏览器中获取 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 方法出现的位置加断点。