WebStorm＆Nuxtでサーバーサイドのデバッグ

コードが増えてくるとサーバーサイドでブレークポイントを貼ってソースレベルデバッグがしたくなりますよね。WebStorm（Intellij IDEA）を使っているのですが、以下の方法でできるようになりました。

・メニューからRun > Edit Configurations...を選択
・左上の＋ボタンからNode.jsのConfigurationを追加
・以下のように入力してOKを押す

Node interpriter:
適切なものをプルダウンで選択。私はanyenvでNode.jsをインストールしているので、このようになっています。

Node parameters:
Nuxtプロジェクトのルートディレクトリにある./node_modules/.bin/nuxtを指定。私の場合、TypeScriptを使えるように@nuxt/typesをインストールし、nuxtコマンドではなくnuxt-tsコマンドで起動するので、node_modules/.bin/nuxt-tsを指定しています。
https://typescript.nuxtjs.org/ja/

Working directory:
Nuxtプロジェクトのルートディレクトリを指定

これでWebStormからプロジェクトをビルド＆デバッグ起動できるようになります。上にある虫アイコンをクリックします。

serverMiddlewareとして実装したソースコードにブレイクポイントを貼るとそこで止まってくれるはずです。ただNuxtのpages/以下にあるページコンポーネントのasyncData()関数で実行されるコードはブレイクポイントを貼っても止まってくれませんでした・・・でもこれでも十分助かります。serverMiddleware以下にAPIの実装がたくさんあるので。