0
Help us understand the problem. What are the problem?

posted at

updated at

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が開始される

スクリーンショット 2021-10-16 16.19.18.png

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

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

スクリーンショット 2021-10-16 16.32.39.png

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

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

スクリーンショット 2021-10-16 16.39.03.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
0
Help us understand the problem. What are the problem?