top of page

head1

id

Table of contents

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

更新日:2022年8月8日


React Developer Toolsは開発サーバーで立ち上げたアプリからソースコードを特定できるんだけど、どうやって実現しているのか追ってみる。もはやメモ書きみたいになるだろうが悪しからず。



React Developer Toolsはオープンソースなのでレポジトリを見つけて、エントリーポイントらしきものを発見。


ここから追っていけば、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にアクセスするのが楽そう。


__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.

Reactとdevtoolsが通信するための変数みたいなものだと理解。で、そこにアクセスすることでコンポーネントなどいろんな情報が参照できるのです。


で、自分がやりたかったは HTMLElementからReactコンポーネントのソースコード情報を参照したいということなのですが、下記のコードで実現できる。


__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.get(1).findFiberByHostInstance($0)

$0はChromeでは現在選択中のHTMLElementなのですが、 document.querySelector(".App") とかでも動きます。


ちょっと雑すぎますが、React Developer Tools がどのようにReactのソースコードを特定しているのかわかったので一旦終わります。

bottom of page