WordPressの開発環境でXdebugを利用する方法を紹介します。
Xdebugとは?
Xdebugとは、PHPの拡張機能です。2002年5月8日のリリース以後、定番のデバッグツールとして長年利用されています。例えば、1行ごとにプログラムを実行して関数の処理の流れを確認するなど、開発効率を上げることができます。WordPressだけでなく、CakePHPやLaraelのプロジェクトでも利用されています。

おすすめの環境構築
WordPressの開発環境の構築には、DockerやXAMPP(もしくはMAMP)を使うことも可能ですが、ここではLocal(旧名「local by flywheel」)をおすすめします。他の方法に比べて簡単だからです。(参考:https://localwp.com/help-docs/advanced/using-xdebug-within-local/)
Xdebugを利用するにはエディタも必要です。ここではVisual Studio Codeの例を取り扱います。Visual Studio CodeでXdebugを利用するには、拡張機能「PHPdebug」をインストールする必要があります。
まとめると、以下の3つが必要です。
- Local
- Visual Studio Code
- PHPdebug
手順1. Localのインストール
Localの公式サイトからダウンロードし、案内に従ってインストールします。
手順2. Xdebugを有効にする
LocalはXdebugを簡単に有効化できるようになっています。

ダッシュボードの一番下にあるXdbugのトグルをOnにするだけです。
手順3. Visual Studio CodeにPHPdebugをインストールする
Visul Studio Codeを開いて、拡張機能のPHPdebugをインストールします。

インストール完了後、Visul Studio CodeのメニューからRun > Add Configrationsと選択していくと、プロジェクトのルート直下に./vscode/launch.jsonが作成されます。
手順4. デバッグを実行する
デバッグしたいPHPファイルにブレイクポイントを指定します。

Visual Studio Codeのアクティビティバー(左端のアイコンが並んでいる部分)のRun and Debugを選択してから、左上の緑の矢印を選択してXdebugを実行します。Xdebugを実行している状態でLocalの環境にアクセスすると、ブレイクポイントの位置での変数の値などがVisual Studio Code上で確認できるようになります。