ElectronでReact Developer Toolsを使う

現在公開されているReact Developer Tools(ブラウザ拡張)は、現在のElectronバージョン(24.4.0)に対応していません。

これは、現在のChrome系ブラウザ拡張がManifest V3(そういう拡張用APIがあります)を前提としているのに対し、ElectronはManifest V2にしか対応していないため(参照: https://github.com/facebook/react/issues/25843)

Electronにブラウザ拡張としてReact DevToolsをインストールするためには、Manifest V2に対応させた非公式バージョンを使うしかなさそう。

• https://github.com/facebook/react/issues/25843#issuecomment-1406766561
• electron-devtools-installer: Manifest V2に対応した各種拡張の野良ビルド(ReactだけでなくVueやAngular等も含む)をインストールするツール

というわけで、ブラウザ拡張をインストールするのは結構面倒なんですが、React DevToolsは単体のアプリとしてもリリースされているため、そちらを使ってもよい。

$ npm install -D react-devtools

でインストールして、

$ npx react-devtools

で起動。

こういう画面が出て待機状態になるので、Electronアプリのindex.htmlに<script>タグを仕込む。
注意点としては、このスクリプトはReactロード前に読まれる必要があるため、なるべく上の方に入れましょう。

index.html

<script src="http://localhost:8097"></script>

DevToolsのロードが成功すると、こんな感じでコンポーネントの表示やプロファイリング・レンダリングの可視化などができます。

このタグはdev modeのみで有効化したいんですが、スマートなやり方が思いつかなかったので、URLに?debug パラメータがついている時に有効化するようにしました。

renderer/main.tsx

// main processからdev modeかどうかを取得
const isDev = await utilService.isDev();
if (isDev && document.location.search === "") {
  document.location.href = "./?debug";
}

index.html

    <script>
      if(document.location.search === '?debug') {
        document.write('<script src="http://localhost:8097"></' + 'script>')
      }
    </script>

2023年になってもdocument.writeは依然として有益というわけだ！
(アプリのコードよりも絶対先に読みたい + 条件によって有効化したい、という要件を満たす方法がこれしか思いつかなかった)

何はともあれ良かったですね。