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まで遷移すれば、ステップ実行ができるようになります。