Electronでvue-devtoolを使えるようにする

Electronでアプリを作るとき、フロントエンドにVue.jsを使うとやはりなんだかんだでdevtoolが欲しくなります。通常のWebアプリケーションの作成時はChromeにdevtoolをインストールすると良いのですが、Electronの場合だとChromeのように拡張機能を入れる手がありません。

そこで活用できるのがelectron-devtools-installerです。

github.com

このパッケージを使用しするとVue.jsに限らず他のdevtoolも入れることができます。

electronのメインプロセスに次のコードを挿入します。

if (process.env.NODE_ENV === 'development') {
  let installExtension = require('electron-devtools-installer')
  installExtension.default(installExtension.VUEJS_DEVTOOLS)
    .then((name: string) => console.log(`Added Extension:  ${name}`))
    .catch((err: string) => console.log('Unable to install `vue-devtools`: \n', err))
}

この状態で実行し、DevToolsを開くとVue.jsのdevtoolが追加されていることがわかります。

devtoolが追加されていることがわかります

これでだいぶ開発しやすくなります。