Laravel Sail - vscode devcontainer で xdebugを使う

やりたかったこと

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の起動

デバッグ

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

まとめ

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

参考ページ

• https://zenn.dev/na9/articles/852ba511622e66
• https://readouble.com/laravel/9.x/ja/sail.html#debugging-with-xdebug
• https://xdebug.org/docs/step_debug#browser-extensions