WebStorm&NuxtでクライアントサイドのJavaScriptデバッグ
ChromeやSafariでもJavaScriptのソースレベルデバッグはできますが、Nuxtを使ってると、どのファイルにデバッグしたいコードがあるのかわかりづらかったりします。
WebStorm(IntelliJ)を使っているならWebStorm経由でブラウザを起動することで、WebStormのエディタ上でブレークポイントを貼ってデバッグできます。
- メニューのRun > Edit Configurations...を選択
- 左上の＋ボタンを押して、JavaScript Debugを選択
- 以下のように入力してOKを押す
URL:
デバッグしたいウェブアプリのURL
Browser:
起動したいブラウザを選択
これでWebStormの虫アイコンを押すとブラウザが起動します。
WebStormのエディタ上でソースコードにブレークポイントを貼り、ブラウザの操作でそのコードを通るとそこで止まるはずです。TypeScriptでも問題なさそうでした。
