しおしお

IntelliJ IDEAのことなんかを書いてます

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

IntelliJ(WebStorm)にデバッグ用の実行構成を追加する

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

デバッグをしてみる

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

f:id:sioiri:20190907235001p:plain

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

おわり。

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