React Developer Tools がどのようにReactのソースコードを特定しているのか調査してみる
更新日：2022年8月8日
React Developer Toolsは開発サーバーで立ち上げたアプリからソースコードを特定できるんだけど、どうやって実現しているのか追ってみる。もはやメモ書きみたいになるだろうが悪しからず。
React Developer Toolsはオープンソースなのでレポジトリを見つけて、エントリーポイントらしきものを発見。
https://github.com/facebook/react/blob/main/packages/react-devtools/index.js
ここから追っていけば、UIの初期化時にReactコンポーネントのツリーを構築しているはず。その処理を見つけたい。
React Developer Toolsの概要は下記の公式のドキュメントがわかりやすかったです。
packages/react-devtools-shared/src/devtools/store.js にて
_idToElement: Map<number, Element> = new Map();
に
onBridgeOperations で値を入れていることがわかった
とかいろいろ調べていたんだけど、 __REACT_DEVTOOLS_GLOBAL_HOOK__ というwindowから参照できる変数を通じてHTMLElementからReact Fiber を取ることに成功した Fiberには _debugSource というプロパティがあってそこからソースコードの場所を特定することができるということがわかった。
この取り止めのない感じ。ブログというかメモレベルだなぁ。まあいいや。
下記の記事を見つけてわかったんだけど、いろいろやってみたがこの方法でFiberにアクセスするのが楽そう。
https://developpaper.com/how-to-get-the-react-instance-of-production-mode-in-browser/
__REACT_DEVTOOLS_GLOBAL_HOOK__ってなんやねんという話なんですが、公式から言及されているのが下記です
When the page loads, the devtools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization. You can test this on the React website or by inspecting Facebook.
https://github.com/facebook/react/tree/main/packages/react-devtools#faq
Reactとdevtoolsが通信するための変数みたいなものだと理解。で、そこにアクセスすることでコンポーネントなどいろんな情報が参照できるのです。
で、自分がやりたかったは HTMLElementからReactコンポーネントのソースコード情報を参照したいということなのですが、下記のコードで実現できる。
__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).findFiberByHostInstance($0)
$0はChromeでは現在選択中のHTMLElementなのですが、 document.querySelector(".App") とかでも動きます。
ちょっと雑すぎますが、React Developer Tools がどのようにReactのソースコードを特定しているのかわかったので一旦終わります。