前提
- Laravel Sailでプロジェクトが作成済みであること。
- VSCodeを使用
- MacBook
インストールがまだの方は下記を参考にお願いします!
手順
./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)で拡張機能をインストールします。
他のブラウザはこちらを参照してください👇
ブラウザでトップページを開きます。
拡張機能で、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の変数の値をデバッグしてみます。
左メニューの「実行とデバッグ」から、左上の再生マークをクリック。
この状態で、
にリクエストを送ります。
XDEBUG_SESSIONのクエリパラメータをつけるのがポイントです。
ブレークポイントで止まりました!
左側に変数の内容が表示されていますね。
あとはブラウザと同じで、続行を押すと次のブレークポイントに進むことができます。
これでデバッグができるようになりました🥳
動かない場合
筆者もうまく動かないケースに何回か遭遇しました。
(おそらくしばらく放置するとフリーズする??)
いずれの場合も、コンテナを再起動することで解決しました。
それでも動かない場合は、
- ブラウザの場合は拡張機能がインストール済みでDebugモードになっていること
- APIの場合はXDEBUG_SESSIONのクエリパラメータをつけていること
- コンテナにアタッチしているVSCodeで、PHP Debugの拡張機能が入っていること
この辺を確認してみると良いと思います。