🌊

Windows11&VSCode&Docker環境でXDebugを使うには

2025/01/29に公開

はじめに

ブレークポイントを利用しステップ実行で変数の中身やウォッチ式を確認できるかどうかというのはデバッグ効率に大きく影響します。
javascriptならChromeブラウザで標準搭載しています。
しかしPHP+VSCodeでやるにはかなり難易度が高いです。
ここでは表題の環境で動いた方法を記載していきます。

PHPのインストール

XDebugを使うためにはホストマシンにもPHPを動かす環境が必要なので、インストールします。

Set-ExecutionPolicy RemoteSigned -scope CurrentUser
iwr -useb get.scoop.sh | iex
scoop install php

XDebugの設定

以下のようにDockerfileに追記します。


FROM php:8.0-fpm


WORKDIR /var/www/html/gschool_api

ADD https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions /usr/local/bin/

RUN chmod +x /usr/local/bin/install-php-extensions && \
    install-php-extensions pdo_mysql @composer-2

#----------ここから追記--------------------------------------------
# Xdebugのインストール
RUN pecl install xdebug && docker-php-ext-enable xdebug

# Xdebug設定の追加
RUN echo "xdebug.mode=debug" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.client_host=host.docker.internal" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.client_port=9003" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.start_with_request=yes" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.idekey=VSCODE" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

#----------ここまで追記--------------------------------------------

vscodeのワークスペースルートに.vscodeフォルダを作成し、その中に以下のlaunch.jsonファイルを作成して配置する。

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Listen for Xdebug",
        "type": "php",
        "request": "launch",
        "port": 9003,
        "pathMappings": {
          "/var/www/html/dummy_projcet/src": "${workspaceRoot}/src"
        },
        "log": true,
        "xdebugSettings": {
          "max_data": 65536,
          "show_hidden": 1,
          "max_children": 100,
          "max_depth": 5
        }
      }
    ]
  }

イメージをリビルドしてコンテナを再起動する。

Dockerfileの修正はイメージのコンパイルが必要です。
起動オプションに--buildをつければOK。

cd {docker-compose.ymlがあるフォルダ}
docker-compose up -d --build

VSCodeにデバッグ用拡張機能をインストールする。

「PHP Debug」という拡張機能があるのでインストールします。

おわりに

以上で設定は完了です。
下のボタンからXdebugを起動し、ソースコードの行番号の横にブレークポイントをマークすればステップ実行できるようになります。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp

Discussion