自分だけのクイズ作成 - Quipha公開中

【Laravel Sail】VS CodeでXdebugによるデバッグ完全解説

Laravel
スポンサーリンク

はじめに

Laravel SailはDockerコンテナ上に開発環境を構築しますが、必要な環境は一式用意されているため非常に便利です。
またオプションで必要なサービスを追加したり、自分でDockerfileをカスタマイズすることにより、オリジナルの環境の用意もできます。

環境は構築し直すことも配布することも容易ですので、個人でもチームでの開発でも便利です。

Laravelプロジェクトでデバッグを行う際、var_dump、dd、Logなどで変数を出力し確認するのが簡単でしょう。
また「以前Xdebugを導入したけど動かなかった」とか「導入が面倒」など、億劫になっている方もいらっしゃるのではないでしょうか。(私もでした・・)

今回はLaravel Sailの環境でVS Codeを使い、Xdebugによるデバッグ方法を詳しく解説していきます。

古いバージョンのSailの場合、導入や設定などの対応が色々と必要でした。
現時点の最新バージョンでは、Xdebugは導入済みで、簡単な設定で使用することができます。

Laravel Sailでプロジェクトを作成する方法については、以下の記事で詳しく解説しています。

Windows
Mac
使用するバージョンなど
  • Windows 11 or macOS Monterey (M1)
  • Laravel 8 or 9
  • Sail
  • Xdebug v3.1.2

2022/04/20 WindowsとMacを使い、最新バージョンで確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

プロジェクトの作成

拡張機能がない場合は、エディタ上でブレークポイントを設定することができません

VS Codeの拡張機能に「PHP Debug」をインストールします。

これでコード上にブレークポイントを設定できるようになりました。

スポンサーリンク

Xdebugの確認

まずはSailを起動します。(バックグラウンド起動)

$ sail up -d

最新のSailには、最初からXdebugが導入されています。
以下のコマンドで確認してみましょう。
Xdebug v3.1.2」が導入されているのが分かります。

$ sail php -v
PHP 8.1.4 (cli) (built: Apr  4 2022 13:30:33) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.4, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.4, Copyright (c), by Zend Technologies
    with Xdebug v3.1.2, Copyright (c) 2002-2021, by Derick Rethans

phpinfoでも確認してみましょう。
phpinfoを表示するためのルーティングを追加しました。

routes\web.php
Route::get('/phpinfo', function () {
    phpinfo();
});

以下のURLにアクセスして画面を確認してみましょう。

http://localhost/phpinfo

Xdeubgが導入されていることが確認できました。

デバッグ設定

VS Codeのデバッグ設定

VS Codeのデバッグ設定を行います。
「実行とデバッグ」を開き、「launch.jsonファイルを作成します」をクリックします。

PHPを選択します。

以下のファイルが作成されました。

.vscode\launch.json

中身は以下のようになっています。

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003
        },
        {
            "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"
            }
        }
    ]
}

「Listen for Xdebug」を使用しますので、以下のように修正します。

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

Sail設定

Sailのデバッグの設定を行いましょう。
.envファイルを開き、以下の一行を追記します。

SAIL_XDEBUG_MODE=develop,debug

この設定を変更した場合は、Sailの再起動が必要です。

Sailを起動していた場合は一度終了し、起動します。

$ sail down
$ sail up -d

デバッグ実行

デバッガーの起動

F5キーを押し、デバッガーを起動しましょう。
「Listen for Xdebug」が起動されていることを確認します。

CLIのデバッグ

Artisanのコマンドのデバッグを行ってみましょう。
試しに適当なマイグレーションファイルを作成します。

$ sail artisan make:migration create_samples_table

以下のファイルが作成されましたので開きます。(日付は作成日時になります)

database\migrations\2022_01_18_130402_create_samples_table.php

ブレークポイントを設定しました。

以下のようにマイグレーションコマンドを、Xdebugで実行します。

$ sail debug migrate

「sail artisan」ではなく「sail debug」で実行するのがポイントです。

デバッグ直後は、artisanファイルで停止されました。
F5で継続します。

先程設定したブレークポイントで停止しました。

ローカル変数の一覧やグローバル変数の一覧も確認することができます。

ブレークポイントで停止した変数などが確認できますので、var_dumpなどで出力するより便利ですし、開発効率が上がります。

ちなみにデバッガーを起動しても、以下のコマンドの場合はブレークポイントに反応しません
デバッグしたい時にだけ「sail debug」コマンドを使用すれば良いでしょう。

$ sail artisan migrate

ブラウザのアクセスをデバッグ

Webブラウザでアプリケーションを操作しながら、デバッグを行うやり方です。

適当な箇所にブレークポイントを設定しましょう。
今回は、web.phpに設定しました。

CLI同様、F5キーを押しデバッガーを起動しましょう。
「Listen for Xdebug」が起動されていることを確認します。

自動でXdebugが開始されませんので、手動でデバッグを開始します。
URLパラメータに以下を追加してアクセスするとXdebugが開始されます。

?XDEBUG_SESSION_START=session_name

URLの例です。

http://localhost?XDEBUG_SESSION_START=session_name

server.phpで停止されました。
F5で継続します。

先程設定したブレークポイントで停止されました。

ローカル変数の一覧やグローバル変数の一覧も確認することができます。

デバッグが有効のままですので、以降のアクセスはXDEBUG_SESSION_STARTを指定する必要はありません。
逆に停止する場合は、以下のパラメータをURLに追加してアクセスします。

?XDEBUG_SESSION_STOP=session_name

URLの例です。

http://localhost?XDEBUG_SESSION_STOP=session_name

上記のURLにアクセスした際はブレークポイントで一旦止まりますが、それ以降は止まらなくなります。

スポンサーリンク

自動デバッグ開始設定

基本はここまで説明したやり方で良いですが、Xdebugを自動で起動する方法もあります。

「sail artisan」コマンドでもデバッグに反応してしまうので、イマイチなところもありますが、Xdebugの設定を変更するやり方を含めて紹介します。
個人的にはこの設定は行いませんが、参考になればと思います。

Sailのphp.iniを変更します。
以下のコマンドを実行します。

$ sail artisan sail:publish

Copied Directory [/vendor/laravel/sail/runtimes] To [/docker]
Publishing complete.

プロジェクト直下に「docker」フォルダが作成されました。
その中に、Dockerfileやphp.iniが格納されており、カスタマイズすることができます。

格納ファイル
  • Dockerfile
  • php.ini
  • start-container
  • supervisord.conf

Dockerコンテナは今回は「PHP8.1」を使用していますので、以下のファイルを修正します。

docker\8.1\php.ini

以下の内容を追記します。

[xdebug]
xdebug.start_with_request=yes

コンテナを再構築します。

$ sail build --no-cache

Sailを起動している場合は停止してください。
ビルドには時間がかかります。

完了後、Sailを起動しましょう。

$ sail up -d

phpinfoを確認してみましょう。
start_with_request」が有効になっているのを確認できます。

F5キーを押して、デバッガーを起動しましょう。
自動でXdebugが起動しますので、XDEBUG_SESSION_STARTを指定しなくてもブレークポイントで停止されます。

ただし「sail artisan」コマンドでもデバッグが反応してしまいます。
デバッガーを起動していないと、接続できないエラーが表示されます。

$ sail artisan migrate
Xdebug: [Step Debug] Time-out connecting to debugging client, waited: 200 ms. Tried: host.docker.internal:9003 (through xdebug.client_host/xdebug.client_port) :-(
Nothing to migrate.
Xdebug: [Step Debug] Time-out connecting to debugging client, waited: 200 ms. Tried: host.docker.internal:9003 (through xdebug.client_host/xdebug.client_port) :-(
Xdebug: [Step Debug] Time-out connecting to debugging client, waited: 200 ms. Tried: host.docker.internal:9003 (through xdebug.client_host/xdebug.client_port) :-(

自動起動は有効にせず、「sail debug」や「XDEBUG_SESSION_START」で手動でXdebugを起動するのが良いでしょう。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

さいごに

今回は、Laravel Sail環境で、Xdebugによるデバッグ方法を解説しました。
比較的簡単な設定で済み、すごく開発効率が上がりますので、是非導入しましょう。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました