Electronで開発いるアプリIMASUPで、Vue Devtoolsが利用できない状況が発生し困っていましたが、解決できたので記事にしました。
前提
- electron-devtools-installer v3.2.0
- electron v22.0.3
- vue v3.2.45
事象
npm run electron:serve
でアプリを立ち上げた際、Vue Devtoolsが何も反応しなくなった。
![](https://i0.wp.com/tomikyblog.com/wp-content/uploads/2023/01/508cd1ed9a1cf52dcb5b860e6ddbc19c.png?resize=1024%2C1002&ssl=1)
対処
./src/background.js
で、electron-devtools-installerが指定していたdevtoolsの拡張機能をVUEJS3_DEVTOOLS
からVUEJS_DEVTOOLS
に変更した。
![](https://i0.wp.com/tomikyblog.com/wp-content/uploads/2023/01/73d580cd387321ec5b8eea2d7a14b60e.png?resize=1024%2C173&ssl=1)
![](https://i0.wp.com/tomikyblog.com/wp-content/uploads/2023/01/c8e2b1ab258b732686be4bb1f2e81243-e1674288775763-1024x1002.png?resize=1024%2C1002&ssl=1)
electronでdevtoolsのインストールを行なっているライブラリ「electron-devtools-installer」のソースを読んでいたら、拡張機能のIDが指定されていました。vue devtoolsがうまく起動しなかったときVUEJS3_DEVTOOLS
を指定していたのですが、ソースで指定されているIDを調べてみると、最終更新が2021年12月のv6.0.0 beta 21でした。
一方、VUEJS_DEVTOOLS
の参照する拡張機能のIDを調べてみると、最新バージョンを示していました。
同様な事象でお困りの方への参考になれば幸いです。
コメント