🐙

sail環境でのxdebug設定

2024/03/28に公開

sail環境でxdebugの設定をする手順をまとめたも

ステップ1

VScodeの拡張機能でxdebugと検索して、PHP Debugをインストールする。

ステップ2

VScodeの実行とデバッグをクリックして、lounch.jsonファイルを作成するをクリック。

デバッガの設定が表示されるので、PHPをクリック。

作成されたlounch.jsonファイルを下記内容に編集する(環境によって、適切に修正が必要)

{
  // 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": "${workspaceFolder}"
      }
    },
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 0,
      "runtimeArgs": ["-dxdebug.start_with_request=yes"],
      "env": {
        "XDEBUG_MODE": "debug,develop",
        "XDEBUG_CONFIG": "client_port=${port}"
      }
    },
    {
      "name": "Launch Built-in web server",
      "type": "php",
      "request": "launch",
      "runtimeArgs": [
        "-dxdebug.mode=debug",
        "-dxdebug.start_with_request=yes",
        "-S",
        "localhost:0"
      ],
      "program": "",
      "cwd": "${workspaceRoot}",
      "port": 9003,
      "serverReadyAction": {
        "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
        "uriFormat": "http://localhost:%s",
        "action": "openExternally"
      }
    }
  ]
}

ステップ3

.envファイルに下記記述を追記。

SAIL_XDEBUG_MODE=develop,debug

sail downをしてsail up -d、若しくはsail artisan optimizeコマンドでキャッシュをクリアする。

ステップ4

ChromeのXdebug helper拡張機能をインストールして有効化する。
https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc/

ステップ5

デバッガを処理に止め、確認する。

Discussion