みなさん、こんにちは。どんぶラッコです。
私は普段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 をクリックで監視モードが開始します。
簡単ですね!
みなさんもぜひ設定してみてください！
