Vue.js devtools 拡張機能が機能していない

[sabonerune]

不具合の内容

#2563 (comment)
かなり前からですがVue.js devtools拡張機能が機能していないようです。
どうやらelectron-devtools-installer自体は正常に動作し、インストール自体は正しく行われいるようですがElectron側の仕様変更により拡張機能が起動していないようです。

現象・ログ

ChromeDevtoolsにVueのタブが表示されない。
ログは特に表示されない。

再現手順

191abb6 で開発モードで起動する。

期待動作

ChromeDevtoolsにVueのタブが表示される。
またはそれ以外の方法でVue DevToolsが使える。

その他

この辺りで回避策が書いてあるかもしれない?
MarshallOfSound/electron-devtools-installer#244
electron/electron#41613

Chrome 拡張機能ではなくhttps://devtools.vuejs.org のVite PluginかStandalone Appを使う手もありそうです。

[Hiroshiba]

調査ありがとうございます！！

個人的にはVue DevToolsはあまり使っていないのもあり、あまり緊急で修正しなくても良いのかもとは思っています。
結構使ってる人がいたりしたらコメントほしいです。（便利そうなのでどういうときに使ってるかも知りたい！！）

issue追ってる感じelectron側の対応を待っているっぽい？のですが、結構かかりそうな気もします。
3年間他の拡張機能をインストールする需要が生まれてないですし、 @sabonerune さんが挙げていただいているVite Pluginに移っても良いかもですねぇ。

もしよかったら実際Vite Plugin使う方法でVue DevToolsが入るか検証いただけますか？
入るならelectron-devtools-installerの依存外して移行しちゃっても良いのかなと！
electron-devtools-installerが正常かどうするようになって拡張機能をインストールしたくなったら、また依存増やせば良さそう。

[sabonerune]

@Hiroshiba
軽く試してみました。

• Vite Plugin
  ブラウザの下端にアイコンが表示されクリックやショートカットキーでアプリ上にオーバーレイ表示される形でDevTooolが描画される。
  Separate WindowはEllectronでは使えないらしい?(同じブラウザで開く必要があるらしい?)

• Standalone App
  常に別のウインドウでVue devtoolsを起動させるので起動させるウインドウが一つ増えることになる。
  コマンドでVue devtoolsを起動させるなど手間が増える。

---

ブラウザ拡張機能が一番手間が少なくて良かったな…という感じです。

[Hiroshiba]

なーーーるほどです、ありがとうございます！！！！！
使用感がだいぶ変わってくるんですねぇ･･･。

移行するとしたら手間が増えないVite Pluginかなとは思いますが、オーバーレイはそれはそれで不便な気がしますね。。。

あ。
あとは普通のChromeでブラウザ版を開いて、そっちにVue Devtoolsを入れるという手もありそう。（今思いつきました）
これがVOICEVOX開発時の推奨方法になりそう･･････？

うーーん　ちょっと様子見をするのが良いのかなと思いました！！

• DevToolsをインストールするコードを省かずちょっと動向を見守る
  • 現状見れないというNOTEコメントとこのissueへのリンクを書き足しても良いかも
• 半年後くらいにまた再考
• Vue DevToolsを見る方法をドキュメントで案内しても良いかも･･･だけど、まあ気が向いたら！

[sevenc-nanashi]

あとは普通のChromeでブラウザ版を開いて、そっちにVue Devtoolsを入れるという手もありそう。（今思いつきました）

いつもそれで開発してます。ファイルの読み書きの時だけElectronを開く感じ。
普通に開発できますね。