Laravel SailにVSCode + Xdebugを導入する

環境

PC

機種 : MacBook Pro 2021(M1 Max)
OS : Monterey(12.2.1)

Laravel Sail

PHP version : 8.1.9
Laravel version : 9.25.1
Xdebug version : 3.1.5

VSCodeでPHP Debugをインストール

PHP Debugをインストールしておきます。インストール後にたまに正しく動かない時があるので、VSCodeの再起動をしておきます。

launch.jsonの作成

$ ls
README.md           bootstrap/          config/             lang/               public/             storage/            vite.config.js
app/                composer.json       database/           package.json        resources/          tests/
artisan*            composer.lock       docker-compose.yml  phpunit.xml         routes/             vendor/
$ mkdir .vscode

.vscode/launch.json

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

Laravel SailのXdebugの設定

Dockerfileとかをいじらないといけないかな〜と思って調べていたら、Laravel SailはデフォルトでXdebugを入れてくれているみたいです。超優秀。

https://readouble.com/laravel/9.x/ja/sail.html

Xdebugによるデバッグ

$ ./vendor/bin/sail php -v
PHP 8.1.9 (cli) (built: Aug 15 2022 09:40:11) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.9, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.9, Copyright (c), by Zend Technologies
    with Xdebug v3.1.5, Copyright (c) 2002-2022, by Derick Rethans

envに以下を追記します。

+SAIL_XDEBUG_MODE=debug

検証用のAPIエンドポイント作成

リクエストを投げるAPIエンドポイントを作成します。

$ ./vendor/bin/sail php artisan make:controller GetXdebugController

app/Http/Controllers/GetXdebugController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class GetXdebugController extends Controller
{
    public function __invoke(Request $request)
    {
        $status = 'xdebug';
        return response()->json([
            'status' => $status
        ]);
    }
}

routes/api.php

Route::get('/xdebug', \App\Http\Controllers\GetXdebugController::class);

API実行して、ブレイクポイントで止めてみる

キャッシュが効いているのかよくわかりませんでしたが、そのままだとブレイクポイントで止まってくれなかったので、dockerコンテナを再起動しておきます。
(深追いしていませんが、./vendor/bin/sail　php artisan cache:clearと ./vendor/bin/sail php artisan config:clearを実行しても駄目だったので別要因かもしれません)

$ ./vendor/bin/sail down
$ ./vendor/bin/sail up -d

VSCodeで一番上の階層に.vscodeディレクトリが来る場所を開きます。
app/Http/Controllers/GetXdebugController.phpを開きます。
fn + F5でVSCode下部のバーが青色からオレンジ色に変わったことを確認します。停止したい場所の行番号の横をクリックしてブレイクポイント(赤色の丸)をつけます。

API実行はpostmanで実行してみます。?XDEBUG_SESSION=1を付ける必要があります。
postmanを実行するとSending request...のままで止まります。

VSCodeがブレイクポイントをつけた行にハイライトになっていたら成功です。
postmanでレスポンスが返ってきてしまう場合は、どこか設定をミスってます。

Laravel Sailだと簡単に導入することができました。