JavaScript

PHPStorm * Nuxt.js で ブレイクポイントを設定できるようにする!

みなさん、こんにちは。どんぶラッコです。

私は普段Nuxt.jsを開発するときに PHPStorm を使って開発しています。

そんなときに、ブレイクポイントを使いたくなること、ありませんか?

私も使いたいなーと思いつつ、後回しにしていました。。

今回はその方法をご紹介します!

IntelliJ の機能を使ってブレイクポイント

こちらのサイトが非常に参考になりました。

nuxt.config.js に設定を追加

まずは nuxt.config.js に下記記述を追加します

build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      // 以下を追加
      if (ctx.isDev && ctx.isClient) {
        config.devtool = 'eval-source-map'
      }
     // 追加終わり
    }
  }

テンプレートのコメントにも書いてある通り、extend内に記述することで、webpackの設定を拡張することができます。

config.devtoolを使うとJSのソースマップを生成する方法を指定できます。

https://webpack.js.org/configuration/devtool/

eval-source-map 方式は行番号とソースマップを一致させる方法なので、デバッグをするときに有効な方法です。

https://medium.com/@fernalvarez/nuxt-js-debugging-for-webstorm-9b4ef5415a5

Chrome Extentionをインストール

次に、 JetBrains IDE Support を Chromeに追加します。

https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji

これで完了です!

Inspect in PhpStorm をクリック

あとは localhost:3000 など、自身が立ち上げた環境で、先ほどインストールした拡張機能を右クリック→Inspect in Phpstorm をクリックで監視モードが開始します。

簡単ですね!


みなさんもぜひ設定してみてください!

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニア経験を経て、ProgLearnのシステム開発を担当。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です