DevTools エクステンション

Electron は Chrome デベロッパー ツール拡張 をサポートしています。これは人気ウェブフレームワークのデバッグ向けに Chrome デベロッパー ツールを拡張できます。

ツールを使ったデベロッパー ツール拡張の読み込み

デベロッパー ツール拡張を読み込む最も簡単な方法は、サードパーティ製ツールで手順を自動化することです。 electron-devtools-installer はこれを行うにあたって人気の NPM パッケージです。

手動でのデベロッパー ツール拡張の読み込み

ツールを使う手段をお望みでない場合は、必要な作業すべてを手で行うこともできます。 Electron で拡張機能を読み込むには、Chrome でそれをダウンロードして、そのファイルシステムのパスを探し、ses.loadExtension API を呼び出して Session にロードします。

以下は React Developer Tools を使用する例です。

1. Google Chrome で拡張機能をインストールします。

2. chrome://extensions に移動し、fmkadmapgofadopljbjfkapdkoienihi のようなハッシュ文字列であるそれの拡張 ID を探します。

3. Chrome が拡張機能の保存に使用している、ファイルシステムの場所を調べます。

   • Windows では %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions です。
   • Linux では以下のいずれかになります。
     • ~/.config/google-chrome/Default/Extensions/
     • ~/.config/google-chrome-beta/Default/Extensions/
     • ~/.config/google-chrome-canary/Default/Extensions/
     • ~/.config/chromium/Default/Extensions/
   • macOS では ~/Library/Application Support/Google/Chrome/Default/Extensions になります。

4. 拡張機能の場所をses.loadExtension API に渡します。 React Developer Tools v4.9.0 の場合、以下のようになります。

   const { app, session } = require('electron')
   const path = require('node:path')
   const os = require('node:os')
   
   // macOS の場合
   const reactDevToolsPath = path.join(
     os.homedir(),
     '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
   )
   
   app.whenReady().then(async () => {
     await session.defaultSession.loadExtension(reactDevToolsPath)
   })

注釈:

• loadExtension は Extension オブジェクト の Promise を返します。これには、読み込まれた拡張機能についてのメタデータが含まれます。 この Promise はページ読み込み前に (await 式などで) 解決する必要があります。 さもなくば、拡張の読み込みは保証されません。
• loadExtension は、app モジュールの readyイベントが発生する前には呼び出せず、インメモリ (非永続) セッションでも呼び出せません。
• 拡張機能を読み込みたい場合は、アプリを起動するたびに loadExtension を呼び出す必要があります。

デベロッパー ツール拡張の除去

拡張の ID を ses.removeExtension API に渡すことで、Session から拡張を削除できます。 これにより、読み込んだ拡張がアプリの次回起動時にも保持されることはなくなります。

デベロッパー ツール拡張サポート

Electron は chrome.* API のうち限られたいくつか のみをサポートしています。未サポートの chrome.* API を使用した拡張機能は動作しない可能性があります。

以下のデベロッパー ツール拡張は Electron での動作がテストされています。

• Ember Inspector
• React Developer Tools
• Backbone Debugger
• jQuery Debugger
• AngularJS Batarang
• Vue.js devtools
• Cerebral Debugger
• Redux DevTools Extension
• MobX Developer Tools

デベロッパー ツール拡張が動作しない場合はどうすればいいですか?

まず、拡張がメンテナンスされていて、最新の Google Chrome と互換性があるかどうかを確認してください。 未サポートの拡張については、さらなるサポートを提供できません。

拡張機能が Chrome で動作しているのに Electron で動作しない場合は、Electron の Issue トラッカー にバグ報告し、拡張機能のどの部分が期待通りに動作しないかをご説明ください。