かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Vue CLI 3.x で生成した Vue.js + TypeScript を VS Code でデバッグするときの注意点 for Windows

かなりレアなケースだと思うので完全に自分への備忘録です。

Vue.js を VS Code でデバッグ出来るのは周知?の通り。

jp.vuejs.org

ただ、私の環境ではブレークポイントに止まらなくて困ったなぁとなってました。TypeScript 使ってるからか??と思ったのですが原因は別にありました。

シンボリックリンクのフォルダーで開発してるとダメ

パスが長いとダルイので C:\Repos をドキュメントフォルダーの下の Repos のシンボリックリンクとして作っておいて、普段は C:\Repos でアクセスできるようにしてました。 VS Code でも code C:\Repos\hogehoge みたいにして開いてました。

この状態で上記のデバッグの手順を踏むと Chrome はシンボリックリンクではないドキュメントフォルダーの下に実ファイルがあると思っていて(webpack:///C:\users\username\documents\repos\xxxxx みたいなパスになってた)、VS Code の中では C:\Repos にあると思ってる感じになってしまい、当然ファイルの場所が違うのでブレークポイントを VS Code で指定しても動いてくれませんでした。

まとめ

シンボリックリンクのフォルダーではデバッグできないので、デバッグが必要なときは実フォルダー開きましょう。

凄い悩んだけど、シンボリックリンク使ってる人とか Windows では少数派なせいか情報がなかったので一応メモ。