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

IntellijのNuxt.jsでimportのailiasを設定したい

Intellijのvueとかjsのサポートがかなりよくなってきたので、1IDEで完結した欲求がでてきました。
vscodeだとある程度勝手に認識してくれるんだけど、Intellijはできないみたいで設定してあげる必要がある模様。

nuxt.config.jp

module.exports = {
  resolve: {
    extensions: ['.js', '.json', '.vue', '.ts'],
    root: path.resolve(__dirname),
    alias: {
      '@core': path.resolve(__dirname + '/src_core'),
      '@web': path.resolve(__dirname + '/src_web'),
    }
    // 省略
  },

このrootaliasを追加すればいける模様。(resolveを書いてなかったらそれも追加で)

import sampleRepos from "@core/modules/repository/sampleRepos
import samplePage from "@web/modules/repository/samplePage

これがジャンプできるようになる。便利

Intellijでdebug実行すると warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended

warning: Sharing is only supported for boot loader classes because bootstrap classpath has been appended

ブートストラップクラスパスが追加されているため、共有はブートローダークラスでのみサポートされます

ということらしいが、intellijでしか警告がでない。

Intellij Idea > preference > Build, Execution,Deployment > Async Stack TraceInstrumenting agent をunlockすれば、でなくなる。

intellijでdebugするとこの警告がでてくる warning: forcing TieredStopAtLevel to full optimization because JVMCI is enabled

OpenJDK 64-Bit GraalVM CE 19.3.0 warning: forcing TieredStopAtLevel to full optimization because JVMCI is enabled

JVMCIが有効になっているため、TieredStopAtLevelを完全に最適化する こういうことらしいが、gradle bootRun では発生しない。Intellijで発生する。

IntelliJの設定かなにかだろうと思い設定を確認

Run/Debug Configurations の中に Enable launch optimization があり、これをunlockすると警告がでなくなった

Intellijのgoogle-java-format plugin を外した.

ちょっと思うところがあって、google-java-format plugin を外した。
このプラグインがあると、結構強制力が強くて、indent4 にしたいときにできなかったり、import文を変えたかったりしたときにできなかったりとか・・・あったので、外しました…

ただそれだけ…

https://plugins.jetbrains.com/plugin/8527-google-java-format

intellij の live template で snippet管理

intellijでcode snippetを蓄積するのに、Live Templateを使う

intellijのメニューから

preference -> Editor -> Live Templates

から下記を行う

  • 言語を選択する
  • +ボタンを押す
  • Abbreviationにキーワードを入力
  • Template text: にテンプレートを入力
  • Applyを押して完了

文字入力してtabキーとかで補完できる

spring boot devtools or spring loaded をIntellijで動かす

SpringBootで開発してるときにサクサク開発したい欲求があり、以前はEclipse + SpringBoot + SpringLoaded使ってて、かなりサクサク開発できてて、気持ちよかったんです。(アノテーションの変更は検知してもらえなかった記憶が)
現在、IntelliJ + SpringBoot devtools にした時に、IntelliJの内部処理?のおかげで上手く動かなかったので、動くようにする方法をいくつか。

IntelliJでspringboot-devtools or spring-loadedが動かない原因

↓これになります。

説明にあるように、IntelliJでSpringBootを起動した場合、起動中はビルドが走らないようになっています。
springboot-devtoolsもspring-loadedもバイナリの変更を検知してreloadしているので、これではビルドが走らないです。

解決策

IntelliJでFull Buildするマクロを仕込み、キーマップを設定する

  • Edit -> Macros -> Start Macro Recording をクリック

  • Build -> ReBuild Project をクリック
  • Edit -> Macros -> Stop Macro Recording をクリック
    • マクロ名をきめる
  • 上記で作成したマクロをkeymap に登録する

⌘ + F9 で強制ビルドする

ちょっとした変更なら、これでいける。
– Javaソース以外だとビルドかからないかも

コマンドラインからmaven or gradle で起動する

コマンドラインから起動します。

$ mvn spring-boot:run

or 

$ gradle bootRun

IntellJのビルドしない条件に引っかからないので、springboot-devtoolsもspring-loadedも動作します。