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

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」によりデバッグされています」 と表示されます
• この状態で、ブレークポイントのある部分が実行されたら止まってくれます

参考文献

• 公式: Debugging with JetBrains Chrome Extension