Open Site Navigation

React Developer Tools がどのようにReactのソースコードを特定しているのか調査してみる

更新日: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の概要は下記の公式のドキュメントがわかりやすかったです。

https://github.com/facebook/react/blob/main/packages/react-devtools/OVERVIEW.md#devtools-extension-overview-diagram


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のソースコードを特定しているのかわかったので一旦終わります。

head1

id

Table of contents