IntelliJでNuxt.jsのdebugできるようにする(chrome/opera)

本家はこちら

IntelliJでNuxt.jsをdebug(breakpoint)できるようにしたくて、設定するメモ。

nuxt.config.jsを変更する

下記の3行を追加する

extend(config, ctx) {
      if (ctx.isDev && ctx.isClient) {               //追加
        config.devtool = 'eval-source-map'    //追加
      }                                                               //追加
            // 省略
}

$ npm run dev を実行する

Chromeのプラグインをインストールする

下記のプラグインをインストールする

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?hl=ja

インストール後にデバッグするタブで下記のアイコンを右クリックする

その後、inspect in IDEA をクリックする

下記のバーがでてきたらデバッグモードになる

breakpointを貼って、そのURLまで遷移すれば、ステップ実行ができるようになります。