かなりレアなケースだと思うので完全に自分への備忘録です。
Vue.js を VS Code でデバッグ出来るのは周知?の通り。
ただ、私の環境ではブレークポイントに止まらなくて困ったなぁとなってました。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 では少数派なせいか情報がなかったので一応メモ。