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には開発ビルド時に追加されるデバッグに使える情報がいくつかあります。
https://github.com/facebook/react/blob/f0efa1164b7ca8523b081223954d05c88e92053b/packages/react-reconciler/src/ReactInternalTypes.js#L193
React Inspectorは Fiberに設定されている _debugSource という情報を使ってVSCodeでファイル名+行+列で開く ということをやっています。
必要条件
上記で説明したように、React Developer Toolsの設定する REACT_DEVTOOLS_GLOBAL_HOOK と開発ビルド時のReact Fiberを利用して動作するため、下記の2点が満たされないと動きません。
- React Developer Tools がインストールされている
- Reactが開発用ビルドであること
React DevToolで開発モードの React のサイトを訪れた場合、アイコンは下記のような赤い背景となっています。
インスペクタの起動方法
React Developer Toolsをインストールし、Reactの開発サーバーを立てた状態で、下記の3通りの方法でインスペクタを起動できます。
- 拡張機能のアイコンをクリック
- コンテキストメニュー
- ショートカット
Mac:Command+Shift+X
Win:Ctrl+Shift+X
作った感想
- Chrome拡張は https://crxjs.dev/ を使うとTSで楽に開発できる。
- Reactの内部構造を少し知れた。Reactのソースコードを読むといろいろ発見がある。
- GitHubレポジトリ公開しているのでアイデアや不具合があれば気軽にIssueください！