wp-env + VScode で Xdebugを使う

wordpress開発にはXdebugがとても便利だったので紹介。
ブレークポイントを設定して変数の値の変化や、処理の流れを追えるので

var_dump($hoge); // スマートじゃない

などで、都度検証しなくて良く
開発が非常にやりやすくなる。

普段 wordpressのテーマ開発で使っている「wp-env」には Xdebug がインストールされていて、簡単に使うことが出来た。
(ちなみにwp-envにはdockerが必要です)

準備

手順1

wp-envをインストール

  npm i @wordpress/env

手順2

PHP Debug エクステンションを Xcodeにインストールする
https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug

vscodeを再起動する

手順3

プロジェクトルートに「.vscode/launch.json」を用意する
「pathMappings」の箇所は独自のものに変更

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
          "/var/www/html/wp-content/themes/example_theme": "${workspaceFolder}/wp-content/themes/example_theme" # テーマのディレクトリをコンテナー内とマッピング
      }
    }
  ]
}

手順4

xdebugオプションをつけて、wp-envを実行する

  "scripts": {
    "wp-start": "wp-env start --xdebug",
    "wp-update": "wp-env start --xdebug -- --update",　 //　これじゃないとダメっぽい
  }

// 参照
https://ja.wordpress.org/team/handbook/block-editor/reference-guides/packages/packages-env/

使い方

①のボタンを押すと
②「Listen for Xdebug」が出てくるので、押す
debugが開始される

デバックしたい、ファイルに移動して（今回の場合はfront-page.php）、
検証したい場所にブレイクポイントをつける。

phpの実行。
今回で言うと http://localhost:8888/ にアクセスする。
するとブレークポイントごとに、処理が止まるので、
右のボタン再生？ボタンとそれ以外を駆使して
ブレークポイントごとに検証を開始する。

サイドバーに定義した変数の値の変化が出るのと、
デバックコンソールからも、コール出来る。

関係ないけど、wordpressってめっちゃ変数あるんですね。
その辺も可視化出来てGood.

これを使わないのはもったいないので是非お試しあれ。