【PHPSTORM】Vagrant環境のPHPをリモートデバッグする

この記事は現役ウェブディベロッパーがわかりやすさにこだわって作成しました

概要

Vagrant環境で作成したWORDPRESSのWEBサイトをJetBrains製IDEのPHPSTORMでデバッグする時に必要な設定を記載しています。VagrantはVirtualBoxですので、バーチャルマシンとのリモートデバッグの手順になります。

環境

  • Vagrant
  • WordPress
  • PHPSTORM

※VirtualMachine側の設定としてXDebugが動作している必要があります。

PHPSTORMの設定

 
 

プロジェクト作成

  • VirtualMachineのドキュメントルートと共有しているWordPressのソースコードの場所をPHPSTORMに設定します
  • 起動直後の画面で、「Create New Project from Existing Files...」を選択するか、
    メニューバーから「New Project from Existing Files...」を選択します。

  • すでに共有化されているソースコードをしてするため、一番上の「Web server is installed locally...」を選択します。

プロジェクトファイルが存在するディレクトリを選択します。

デバッグ対象のリモートサーバーを設定します。
「新しいリモートサーバー」を選択します

ローカルにマウントされたフォルダ(ドキュメントルート)とサーバーのURLを指定します。

ドキュメントルートのディレクトリからデバッグ対象のフォルダを相対指定します。

デバッグ環境設定

PHPSTORMの設定メニューから、LANGUAGE&FRAMEWORKS→PHP→DEBUGを選択して、Xdebugを設定します
サーバーに設定したXdebugのポート番号を指定します(ここでは9001)

Configurationを選択してデバッグ条件の設定を行います。

プラスボタンで新規設定の一覧から、PHP Remote Debugを選択します

Filter Debug connection by IDE keyのチェックをONにします

サーバー情報の設定項目を新規に作成します

名前とホストURL、ポート番号を指定して、DEBUGERにはXDEBUGを選択します
USE PATH MAPPINGSにチェックを入れて、デバッグ対象のローカルのパスとサーバーのパスのマッピングを行います

IDE KEYにはXDEBUGで設定したIDを指定します

デバッグ個所にブレイクポイントを設定します。
受話器のアイコンをクリックして待機状態にします。

ブラウズからデバッグ対象のURLを入力して起動します

PHPSTORM上のブレイクポイントを設定した箇所でプログラミングが中断するのでデバッグコマンドを使用してデバッグしていきます。

PHP/Javascript/WORDPRESS案件全般承ります

この記事についてのご質問またはお困りのことがございましたら、お気軽にお問い合わせください。

タイトルとURLをコピーしました