https://zenn.dev/hand_dot/articles/a1523d8b0449ad

React Inspector というChrome拡張機能を作りました。

Chrome上でインスペクタを起動し、クリックしたReactコンポーネントのソースコードをピンポイントでエディターで開きます。(現在はVSCodeのみ対応)

• Chrome web store: https://chrome.google.com/webstore/detail/react-inspector/gkkcgbepkkhfnnjolcaggogkjodmlpkh
• GitHub: https://github.com/hand-dot/react-inspector

Reactのソースコードに直接ジャンプできるのでUIからのコードの特定がすごく楽になります。

• 新しく入ったプロジェクト
• 多言語対応されたサイト
• 昔作ったアプリのメンテ

などで使ってもらえるとソースコードを特定する時間が削減されて便利だと思います。

どうやって動いているのか

React Developer ToolsというReactチームが公式に提供しているChrome拡張機能はみなさんご存知かと思います。

React Developer Tools は __REACT_DEVTOOLS_GLOBAL_HOOK__ というグローバル変数を設定し、その後Reactは初期化中にその変数と通信します。

__REACT_DEVTOOLS_GLOBAL_HOOK__ には renderers というMapオブジェクトがあるのですが、その値に格納されている findFiberByHostInstance というメソッドを使ってWebページ上のHTML要素からReact Fiberを探すことができます。

FiberはReactの差分検出処理エンジンです。しかし差分処理に必要な情報以外にも、Fiberには開発ビルド時に追加されるデバッグに使える情報がいくつかあります。

React Inspectorは Fiberに設定されている _debugSource という情報を使ってVSCodeでファイル名+行+列で開く ということをやっています。

必要条件

上記で説明したように、React Developer Toolsの設定する REACT_DEVTOOLS_GLOBAL_HOOK と開発ビルド時のReact Fiberを利用して動作するため、下記の2点が満たされないと動きません。