PhpStorm上でLaravel Mixプロジェクトのブレークポイントを使ったデバッグ

RubyMine上でRails Webpackerプロジェクトのブレークポイントを使ったデバッグ で行なったようにLaravelプロジェクトでも同じようにモダンなJSフレームワークをブレークポイントを使ってデバッグしようと思います。

手順的にはRubyMineとRails Webpackerと同じで、Laravel mixではsourcemapをビルド時に生成する設定が必要です。

webpack.mix.jsを以下のように編集します。

.
.
.
if (!mix.inProduction()) {
  mix.sourceMaps();
}

あとは、RubyMine上でRails Webpackerプロジェクトのブレークポイントを使ったデバッグ と同じで、JetBrainsのブラウザ拡張のインストールやJavaScript Debugの設定を行なって起動するとブレークポイントが使えるようになります。