Posted at

PhpStorm で JavaScript をデバッグする設定

PhpStorm で JavaScript をデバッグすることができます。

条件付きのブレークポイントも設定できますので便利です。


手順


  • Chrome に拡張機能をインストールします

  • LiveEdit プラグインをインストールします

  • Live Edit の設定をします

  • デバッグします


Chrome に拡張機能をインストールします

Chrome を起動して、JetBrains IDE Support 拡張機能 をChrome にインストールします

僕の場合は、開発中は主にシークレットモードで作業しますので、拡張機能のオプション設定で「シークレット モードでの実行を許可する」もオンに設定しています。


LiveEdit プラグインをインストールします


プラグインの確認

WebStorm だと LiveEdit プラグインが最初から入っているようなんですが、PhpStorm では初期状態では入っていないので入れる必要があります。



  • Preference から


  • Build, Execution, Deployment の下の Debugger を開いてみます

  • そこの子供に Data Views / Stepping などと並んで Live Edit があるか確認します

  • あれば次の項に移動します


プラグインのインストール



  • Live Edit の項目がなかった場合はプラグインをインストールします

  • Preference の Plugins の Market Place を選択します

  • 検索窓に liveedit と入力します

  • LiveEdit というプラグインがあります。Vender は JetBrains になっているやつです

  • それをインストールします

  • IDE を再起動します


Live Edit の設定をします



  • Preference から


  • Build, Execution, Deployment の下の Debugger を開いてみます

  • そこの子供に Live Edit があるはずですので、それを選択します


  • Use JetBrains IDE Support extension for debugging and Live Edit というチェックボックスにチェックを入れます


  • OK ボタンで Preference を閉じます


デバッグします


  • PhpStorm でデバッグしたいプロジェクトを開きます

  • JavaScript のコード上で停止したい場所にブレークポイントを設定します

  • Chrome でプロジェクトを表示させます

  • 右クリックのコンテクストメニューに Inspect in PhpStorm というメニューがあるのでそれを選択します


    • または JetBrains プラグインのアイコンが表示されている場合は、アイコン上で右クリックでも Inspect in PhpStorm が表示されます



  • すると 「このブラウザは「JetBrains IDE Support」によりデバッグされています」 と表示されます

  • この状態で、ブレークポイントのある部分が実行されたら止まってくれます


参考文献