Electronで、Vue Devtoolsが使えなくなった時の対処

Electronで開発いるアプリIMASUPで、Vue Devtoolsが利用できない状況が発生し困っていましたが、解決できたので記事にしました。

前提

npm run electron:serveでアプリを立ち上げた際、Vue Devtoolsが何も反応しなくなった。

./src/background.jsで、electron-devtools-installerが指定していたdevtoolsの拡張機能をVUEJS3_DEVTOOLSからVUEJS_DEVTOOLSに変更した。

electronでdevtoolsのインストールを行なっているライブラリ「electron-devtools-installer」のソースを読んでいたら、拡張機能のIDが指定されていました。vue devtoolsがうまく起動しなかったときVUEJS3_DEVTOOLSを指定していたのですが、ソースで指定されているIDを調べてみると、最終更新が2021年12月のv6.0.0 beta 21でした。

一方、VUEJS_DEVTOOLSの参照する拡張機能のIDを調べてみると、最新バージョンを示していました。

同様な事象でお困りの方への参考になれば幸いです。