如何在瀏覽器中獲取 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 方法出現的位置加斷點。