WebStormでVue.jsなアプリケーションをデバッグする

npm run devしたVue.jsなアプリケーションをIntelliJ IDEA(WebStorm)でデバッグする的な話を社内のIntelliJ IDEA勉強会でしたら盛り上がったのでブログにも手順を残しておく。*1

アプリケーションを起動する

npm run devで起動してあげましょう。 こんな感じのメッセージが表示されたら起動成功ですね。

 I  Your application is running here: http://localhost:8080

下のリンク先にあるように、WebStorm 2020.2 Betaから、コンソールに出力されたリンクから簡単にデバッグができるようになりましたね。 リンクを Cmd/Ctrl+Shift + クリックだけなのでだいぶ簡単になりましたね。

blog.jetbrains.com

IntelliJ(WebStorm)にデバッグ用の実行構成を追加する(以降の手順は2020.1以前のバージョンの場合)

1. 実行構成のJavaScript Debugに構成を追加する
2. 構成のURLには、デバッグ対象のアプリケーションのURLを設定する。(npm run devで表示されたURL)

デバッグをしてみる

前の手順で登録した構成を実行します。注意しないといけないのは、ここでDebugを選択すること。(JavaScript Debugな構成でも明示的にDebug実行してあげないとデバッグできないので…)

あとは好きなところにブレークポイントおいてデバッグするだけですね。こんな感じに使い慣れた環境でデバッグ出来るようになります。

おわり。

*1:多分Vue.jsだけじゃなってReactでも出来るはずです