Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

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

$
0
0

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

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 では少数派なせいか情報がなかったので一応メモ。


Viewing all articles
Browse latest Browse all 1387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>