【PHP】VSCode で Xdebug を使用してデバッグをする方法

VSCode を使用しての PHP デバッグ方法メモ。

前提

VSCode をエディタとして利用
- プラグイン Remote - Containers 導入済み
Docker を導入済み

簡単にご説明しますと Docker 内で VSCode が起動するので環境が同一になるように作られています。

Developing inside a Container using Visual Studio Code Remote Development

ディレクトリ構造

├── .vscode
│   └── launch.json
├── docker
│   └── web
│       ├── Dockerfile
│       └── xdebug.ini
├── docker-compose.yml
└── src
    └── index.php

Docker環境構築

docker-compose.yml

docker-compose.yml を用意

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
version: '3'

services:
    web:
        container_name: web
        build: ./docker/web
        ports:
            - '8080:80'
        volumes:
            - ./src:/var/www/html
            - ./docker/web/xdebug.ini:/usr/local/etc/php/conf.d/xdebug.ini

Dockerfile

PHP の Dockerfile を用意。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
FROM php:8.1.2-apache

RUN apt-get update && apt-get install -y \
    git \
    unzip \
    vim

# xdebug インストール
RUN pecl install xdebug \
    && docker-php-ext-enable xdebug

xedebug.ini

xdebugの設定（php.ini に含めてもOK

1
2
3
4
5
6
7
8
9
[xdebug]
; xdebug のモード（debug
xdebug.mode=debug
; デバッグの開始
xdebug.start_with_request=yes
; ホスト指定
xdebug.client_host=host.docker.internal
; ホスト側のポート指定
xdebug.client_port=9003

VScode

デバッグ用設定ファイル

debug 設定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003, // php.iniで設定したポート番号
            "pathMappings": {
                // Dockerのドキュメントルート:ローカルのドキュメントルート
                "/var/www/html/": "${workspaceRoot}/php"
            }
        }
    ]
}

プラグインインストール

PHPデバッグをのプラグインをVSCodeにインストール

PHP Debug

PHP

index.phpを用意

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<?php
declare(strict_types=1);
 
for ($i = 1; $i <= 100; $i++) {
    if ($i % 15 === 0) {
        echo 'FizzBuzz';
    } elseif ($i % 3 === 0) {
        echo 'Fizz';
    } elseif ($i % 5 === 0) {
        echo 'Buzz';
    } else {
        echo $i;
    }
 
    echo PHP_EOL;
}

デバッグの実行

index.php の行番号横をダブルクリックしてブレークポイントを設定
docker-compose up -d でDockerを起動
デバッグの実行（下記のいずれかの方法
- F5
- Ctrl + Shift + d → 再生ボタンを押して実行
- メニューバー → 実行 → デバッグの開始
http://localhost:8080/ に接続

これでデバッグが開始されます。

参考

【PHP】VScodeでXdebugを使ってデバッグする