ElectronアプリでVueを使うようにしたらコンソールにこんなのが出ていました。

Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

vue-devtoolを入れると便利だよ、ということらしいので調べてみました。

Vueを使ったWebサイトの場合はブラウザ側にvue-devtoolを入れることでDeveloperToolを拡張できるんですが、Electronでは勝手が異なります。

devtoolに関するドキュメントがあったので読んでみました。

DevTools Extension | Electron

www.electronjs.org

ここで紹介されているやり方を整理すると

• chromeに対象のdevtoolを入れて
• その拡張のextension IDを調べて
• ファイルシステム上で場所を特定して
• Electronのready後にBrowserWindow.addDevToolsExtensionする

ということでした。

めんどくさいなーと思ってよくよく読んでいたらelectron-devtools-installerというのを使ってもいいよという記述がありましたので、こちらを試してみました。

GitHub - MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron

An easy way to ensure Chrome DevTools extensions into Electron - GitHub - MarshallOfSound/electron-devtools-installer: An easy way to ensure Chrome DevTools extensions into Electron

github.com

まず対象のElectronのプロジェクトでこのパッケージを導入します。

npm i -S electron-devtools-installer

つぎにmainプロセスにて以下のコードを追記します。

const { default: installExtension, VUEJS_DEVTOOLS } = require("electron-devtools-installer");

function createWindow() {
  // いろいろ略

  // ready後のコールバック内で呼ぶ
  installExtension(VUEJS_DEVTOOLS)
    .then(name => console.log(name))
    .catch(err => console.log(err));
}

app.on("ready", createWindow)

これでアプリを起動し直すとDeveloperToolにVueタブが出てきてくれます。

よかった。入りました。

他のDevtool系も同様の方法で入れられるようなので覚えとくと便利そうです。