DevTools拡張機能

Electronは、Chrome DevTools拡張機能をサポートしており、これは一般的なWebフレームワークをデバッグするためのChromeの開発者ツールの機能を拡張するために使用できます。

ツールを使用したDevTools拡張機能のロード

DevTools拡張機能をロードする最も簡単な方法は、サードパーティツールを使用してプロセスを自動化することです。electron-devtools-installerは、まさにそれを行う一般的なNPMパッケージです。

手動によるDevTools拡張機能のロード

ツールを使用する方法を望まない場合は、必要な操作をすべて手動で行うこともできます。Electronに拡張機能をロードするには、Chrome経由でダウンロードし、そのファイルシステムパスを見つけて、Sessionにses.loadExtension APIを呼び出してロードする必要があります。

例として、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')
   
   // on 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を呼び出す必要があります。

DevTools拡張機能の削除

拡張機能のIDをses.removeExtension APIに渡して、Sessionから削除できます。ロードされた拡張機能は、アプリの起動間で永続化されません。

DevTools拡張機能のサポート

Electronは、chrome.* APIの限定されたセットのみをサポートしているため、サポートされていないchrome.* APIを内部で使用する拡張機能は動作しない場合があります。

次のDevTools拡張機能は、Electronで動作することがテストされています。

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

DevTools拡張機能が動作しない場合はどうすればよいですか？

まず、拡張機能がまだメンテナンスされており、最新バージョンのGoogle Chromeと互換性があることを確認してください。サポートされていない拡張機能に対する追加のサポートは提供できません。

拡張機能がChromeでは動作するがElectronでは動作しない場合は、Electronのissue trackerにバグを提出し、拡張機能のどの部分が期待どおりに動作しないかを説明してください。