Copy & Paste Engineer

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

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

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

前提

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

ディレクトリ構造

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

Docker環境構築

docker-compose.yml

docker-compose.yml を用意

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 を用意。

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

[xdebug]
; xdebug のモード（debug
xdebug.mode=debug
; デバッグの開始
xdebug.start_with_request=yes
; ホスト指定
xdebug.client_host=host.docker.internal
; ホスト側のポート指定
xdebug.client_port=9003

VScode

デバッグ用設定ファイル

debug 設定

{
    "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を用意

<?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;
}

デバッグの実行

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

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

参考