Visual Studio CodeでWSL上のPHPをデバッグ

前書き

内容が古くなってきたので、WSL2＋PHP8.4に書き換えようと思います。

前提条件

WSL2を使い、Ubuntu24.04（LTS）インストールして使います。

作業手順

PHP8.4のインストール

Ubuntu24.04の標準ではPHPは8.3です。
すでに8.4になってからかなり立ちますので、最新版を使っていきたいと思います。
まずは必要なリポジトリなどを入れていきましょう。

sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update

その後PHPを入れていきます。

sudo apt -y install php8.4 php8.4-mbstring

そうするとapache2が入っていないなら強制的にapache2がインストールされ、モジュール類がインストールされます。
PHPの必要なモジュールはこの時に入れておきましょう。
インストールが終わったら、php -vでバージョンを確認してみてください。

Xdebugのインストール

sudo apt install php8.4-xdebug

これだけで入ります。

Xdebugの設定

zend_extension=xdebug.so

この一行しかありませんが、この下に足します。

zend_extension=xdebug.so

xdebug.mode=debug
xdebug.start_with_request=yes

Xdebugの有効化・Apacheの再起動

その後、xdebugを有効にして、サーバーを再起動します。

sudo phpenmod xdebug
sudo systemctl restart apache2

Visual Studio CodeをWSLに接続する

まずリモートエクスプローラーを押します。
そこでWSLターゲットを選び、その中のUbuntu-24.04にカーソルを乗せると→が出ます。
それを押すと現在のウィンドウで接続します。

その後作業したいフォルダを開くことになります。
通常は/var/www/htmlはrootが所有者になっているので、自分のアカウントに変えておくと良いです。

Visual Studio Codeにプラグインをインストール＆設定する

PHP Debugというプラグインをインストールします。
パブリッシャーがXdebugであることを確認してください。同名のプラグインが存在します。

PHP Debugを設定

デバッグしたいファイルをVSCodeで開きます。
そして、サイドバーの「実行とデバッグ」ボタンを押します。
launch.jsonファイルを作成します。というリンクをクリックします。

そうすると、設定ファイルが開きますので、下記のように書き換えます。

{
    "version": "0.2.0",
    "configurations": [
		{
		  "name": "Listen for Xdebug",
		  "type": "php",
		  "request": "launch",
		  "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            }
		}
	]
}