Laravel Sail - vscode devcontainer で xdebugを使う #PHP

やりたかったこと

vscodeのdevcontainerでxdebugを使いたい(chrome)

備考

読み手の対象:

すでにdevcontainerで開発している方
vscodeでxdebugを触ったことがある方

環境:

PHP 8.2.10 (cli) (built: Sep  2 2023 06:59:22) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.10, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.10, Copyright (c), by Zend Technologies
    with Xdebug v3.2.1, Copyright (c) 2002-2023, by Derick Rethans

Laravel Framework 10.23.1
Google Chrome　バージョン: 120.0.6099.129（Official Build）（x86_64）
Dev Containers　v0.327.0

やったこと

chromeに拡張機能を追加

参考
- https://xdebug.org/docs/step_debug#browser-extensions

`.env`の修正

開発環境の.envに下記を追記

.env

SAIL_XDEBUG_MODE=develop,debug,coverage

コンテナ再起動

`launch.json`の生成

参考
- Laravel SailでXdebugを有効にする
- おそらく、基本的な構成であればlaunch.json生成してそのまま使える

.vscode/launch.json

    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
        },

vscode上でxdebugの起動

デバッグ

ブレークポイントを設定
chromeの拡張機能を有効にする
対象画面を開く
ブレークポイントで止まる

まとめ

ポイントはchromeの拡張機能です。

Laravel Sail - vscode devcontainer で xdebugを使う