DevTools エクステンション

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

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

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

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

ツールを使う手段をお望みでない場合は、必要な作業すべてを手で行うこともできます。 To load an extension in Electron, you need to download it via Chrome, locate its filesystem path, and then load it into your Session by calling the 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. Pass the location of the extension to the 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 returns a Promise with an Extension object, which contains metadata about the extension that was loaded. この Promise はページ読み込み前に (await 式などで) 解決する必要があります。 さもなくば、拡張の読み込みは保証されません。
• loadExtension は、app モジュールの readyイベントが発生する前には呼び出せず、インメモリ (非永続) セッションでも呼び出せません。
• 拡張機能を読み込みたい場合は、アプリを起動するたびに loadExtension を呼び出す必要があります。

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

You can pass the extension's ID to the ses.removeExtension API to remove it from your Session. これにより、読み込んだ拡張がアプリの次回起動時にも保持されることはなくなります。

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

Electron only supports a limited set of chrome.* APIs, so extensions using unsupported chrome.* APIs under the hood may not work.

以下のデベロッパー ツール拡張は 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 トラッカー にバグ報告し、拡張機能のどの部分が期待通りに動作しないかをご説明ください。