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
Electron supports Chrome DevTools extensions, which can be used to extend the ability of Chrome's developer tools for debugging popular web frameworks.
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 - MarshallOfSound/electron-devtools-installer
github.com

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

npm i -S electron-devtools-installer

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

 1const { default: installExtension, VUEJS_DEVTOOLS } = require("electron-devtools-installer");
 2
 3function createWindow() {
 4  // いろいろ略
 5
 6  // ready後のコールバック内で呼ぶ
 7  installExtension(VUEJS_DEVTOOLS)
 8    .then(name => console.log(name))
 9    .catch(err => console.log(err));
10}
11
12app.on("ready", createWindow)

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

よかった。入りました。

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