electronに手軽にDevTools Extensionを導入する

react devtoolsやredux devtoolsは非常に便利ですが、electronではchromeにインストールしたDevTools Extensionをそのまま使えません。
そして、electronはDevTools Extensionをサポートしていますが、その導入はやや複雑です。

electron/devtools-extension.md

ドキュメントにはReact Developer Toolsを例にその導入方法が書かれています。

1. ChromeにReact Developer Toolsをインストールしてください。
2. 検索バーからchrome://extensionsに移動し、extension IDを見つけます。fmkadmapgofadopljbjfkapdkoienihiのようにハッシュ文字列になっています。
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

1. ファイルパスをBrowserWindow.addDevToolsExtension APIに渡します。
   React Developer Toolsは~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0のようになります。

となりますが、さすがに面倒です。

electron-load-devtoolを使うと、開発環境を考慮し、簡単にDevTools Extensionを導入できます。

akameco/electron-load-devtool: Easily load dev tool for electron

インストール

$ npm install --save-dev electron-load-devtool

Usage

redux devtoolsを利用する場合です。
loadDevtoolにextension IDを渡します。
redux devtoolsはelectron-load-devtoolがサポートしているのでREDUX_DEVTOOLSを渡しています。

const electron = require('electron');
const loadDevtool = require('electron-load-devtool');

electron.app.on('ready', () => {
    const win = new electron.BrowserWindow({width: 400, height: 400});
    win.loadURL(`file://${__dirname}/index.html`);

    loadDevtool(loadDevtool.REDUX_DEVTOOLS);

    win.openDevTools();
});

デフォルトで以下のDevToolsのextension IDをサポートしています。

• REDUX_DEVTOOLS
• EMBER_INSPECTOR
• REACT_DEVELOPER_TOOLS
• BACKBONE_DEBUGGER
• JQUERY_DEBUGGER
• ANGULARJS_BATARANG
• VUEJS_DEVTOOLS

8/24追記

すでに対象のDevTools Extensionがアクティブになっている場合に、読み込み処理をスキップするようにしました。
loadDevtoolにextension IDだけではなく、{id: 'extension ID', name: 'extension name'}のようなidとnameを持ったオブジェクトを渡してやると、チェックを行います。
もちろん上記のDevTools Extensionはチェック対象です。

また、electron-debugと同様に、開発環境のみ機能を有効にするようにしました。
プロダクション環境でも有効にする場合は(あまりないと思いますが)、第二引数のオプションのenabledをtrueにする必要があります。

参考

akameco/electron-load-devtool: Easily load dev tool for electron
electron/devtools-extension.md
sindresorhus/electron-is-dev: Check if Electron is running in development
sindresorhus/electron-debug: Adds useful debug features to your Electron app