Laravel SailにXdebugを導入

Laravel

前提

  • Laravel Sailでプロジェクトが作成済みであること。
  • VSCodeを使用
  • MacBook

インストールがまだの方は下記を参考にお願いします!

Laravel Sail 9.x Laravel
インストール 9.x Laravel

手順

./vendor/bin/sail up

で、プロジェクトを起動させます。

VSCodeを開き、拡張機能の検索窓に

ms-vscode-remote.remote-containers

と入力します。

出てきた「Dev Containers」という拡張機能をインストール。

有効化すると、左のメニューにPCのマーク(リモート エクスプローラー)が表示されるので選択。

開発コンテナーのリストに、起動中のdokcerコンテナが並んでいます。

laravelが動いているコンテナを選択し、「新しいウィンドウでアタッチする」をクリック。

別ウィンドウで、コンテナの中にアタッチできました。

(初回は cd /var/www/html && code .で移動する必要がある場合も)

次に、左メニューの再生+虫マーク、「実行とデバッグ」を選択。

「launch.jsonファイルを作成します。」のリンクを押します。

デバッガーはPHP。

launch.jsonが自動生成されました。

下記のように編集します。

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

これで一旦リモートは閉じてください。

./vendor/bin/sail down

で、コンテナも一旦閉じます。

.envファイルを開き、下記を追加します。

SAIL_XDEBUG_MODE=debug

再びコンテナを起動しましょう。

./vendor/bin/sail up -d

また、リモートエクスプローラーからコンテナにアタッチします。

アタッチできたら拡張機能のタブに切り替え、

xdebug.php-debug

と入力します。

コンテナにアタッチしているVSCodeに「PHP Debug」という拡張機能を入れ、有効化してください。

これでコンテナ側の準備完了です。

ここからはブラウザとAPIで異なるので、分けて説明します!

ブラウザの場合

web.phpに、デバッグ結果が見やすいように追加します。

<?php

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
    $sample = 22;
    $sample2 = $sample * 100 /2;
    $sample3 = $sample + $sample2;
    return view('welcome');
});

変数のところの行の左端をクリックし、ブレークポイントを設定します。

設定されると赤丸になります。

次にブラウザ(chrome)で拡張機能をインストールします。

Xdebug helper
Easy debugging, profiling and tracing extension for Xdebug

他のブラウザはこちらを参照してください👇

Xdebug: Documentation » Step Debugging
Xdebug: A powerful debugger for PHP

ブラウザでトップページを開きます。

404 Not Found

拡張機能で、Debugを選択します。

コンテナにアタッチしているVSCodeに戻り、左上の再生ボタンをクリック。

再生、停止ボタンなどのツールバーが表示されます👇

VSCodeの下がオレンジ色になるはずです。

これで、ブラウザをリロードしてみます。

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

左側には変数の情報が表示されています。

次のブレークポイントに進むには、再生のマークをクリックします。

次のブレークポイントに遷移しました👇

左側の変数の表示部分で、$sampleが22と表示されていますね!

このようにデバッグを行うことができます。

APIの場合

APIのエンドポイントを適当に作成してみます。

api.phpにルーティングを定義

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| API Routes
|--------------------------------------------------------------------------
|
| Here is where you can register API routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "api" middleware group. Make something great!
|
*/

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});
Route::get('/sample', [\App\Http\Controllers\SampleController::class, 'index']);

SampleControllerを作成します。

<?php

namespace App\Http\Controllers;

use Illuminate\Foundation\Auth\Access\AuthorizesRequests;
use Illuminate\Foundation\Validation\ValidatesRequests;
use Illuminate\Routing\Controller as BaseController;

class SampleController extends BaseController
{
    use AuthorizesRequests, ValidatesRequests;

    public function index()
    {
        $status = 'ok';
        return response()->json([
            'sample' => $status
        ]);
    }
}

ポストマンで、このendpointにリクエストを送ってみます。

レスポンスが返ってくればOKです。

では、ブレークポイントを指定しましょう。

$statusの変数の値をデバッグしてみます。

左メニューの「実行とデバッグ」から、左上の再生マークをクリック。

この状態で、

404 Not Found

にリクエストを送ります。

XDEBUG_SESSIONのクエリパラメータをつけるのがポイントです。

ブレークポイントで止まりました!

左側に変数の内容が表示されていますね。

あとはブラウザと同じで、続行を押すと次のブレークポイントに進むことができます。

これでデバッグができるようになりました🥳

動かない場合

筆者もうまく動かないケースに何回か遭遇しました。

(おそらくしばらく放置するとフリーズする??)

いずれの場合も、コンテナを再起動することで解決しました。

それでも動かない場合は、

  • ブラウザの場合は拡張機能がインストール済みでDebugモードになっていること
  • APIの場合はXDEBUG_SESSIONのクエリパラメータをつけていること
  • コンテナにアタッチしているVSCodeで、PHP Debugの拡張機能が入っていること

この辺を確認してみると良いと思います。