PHPのデバッグ環境構築の備忘録（Xdebugの設定）①

この記事は、「独学エンジニア」という学習サイトで学んだ内容を、将来自分で見直すために記録している備忘録です。

Xdebugの設定とVS Codeでのデバッグ機能を有効にするまでの手順を簡潔にまとめます。

---

検証環境

• PHP: 8.4.6
• Xdebug: 3.4.2
• Docker: 27.2.0
• Docker Compose: 2.29.2
• VS Code: 1.101.0
• Dev Containers: 0.417.0

---

1. VS Codeのリモート開発拡張機能のインストール

• 手順:
  • VS Codeの左側の「拡張機能」アイコンをクリック。
  • Dev Containersと検索し、該当する拡張機能をインストール。
    補足: 以前の名称は Remote - Containers でしたが、現在は Dev Containers に変更されています。
• 確認: 左下にリモート接続用のアイコンが表示される。

---

2. リモート開発環境の設定

• 設定ファイル: devcontainer.json
• 主な設定項目:
  • name: 開発環境の名前（例: Part3）。
  • dockerComposeFile: Docker Composeファイルのパス。
  • service: デバッグ対象のコンテナ名（例: app_container）。
  • workspaceFolder: 作業フォルダパス（例: /var/www/html）。
  • forwardPorts: ホストとコンテナ間で転送するポート（例: 9003 for Xdebug）。
  • extensions: リモート環境で使用する拡張機能を指定（例: PHP Debug, IntelliSenseなど）。

---

3. Xdebugの設定

• DockerfileでXdebugをインストール:

  RUN pecl install xdebug \
      && docker-php-ext-enable xdebug
  
  

• Xdebug設定ファイル: xdebug.iniやphp.iniの一部。

  xdebug.mode=debug
  xdebug.start_with_request=yes
  xdebug.client_host=host.docker.internal
  xdebug.client_port=9003
  xdebug.log=/tmp/xdebug.log
  
  

• コンテナ内の設定反映: php.iniやXdebugの設定が正しいことを確認。

---

4. VS Codeのデバッグ設定

• 設定ファイル: .vscode/launch.json

• 主な設定項目:

  {
    "version": "0.2.0",
    "configurations": [
      {
        "type": "php",
        "request": "launch",
        "name": "Listen for XDebug",
        "port": 9003
      }
    ]
  }
  
  

• デバッグツールバー: 左側の「虫」アイコンをクリックし、適切な設定が選択されていることを確認。

---

5. リモートコンテナに接続

• 手順:
  • 左下のリモート接続アイコンをクリック。
  • 「Reopen in Container」または「Open Folder in Container」を選択。
  • 必要なフォルダを選び、接続を待つ。

---

6. デバッグの実行

• 確認:
  • ブラウザやクライアントからリクエストを送信。
  • VS Codeの「虫」アイコンをクリックしてデバッグセッションを開始。
  • ブレークポイントが正しく動作するか確認。

---

トラブルシューティング

• 設定の見直しポイント:
  • devcontainer.jsonのパスやポート設定。
  • DockerfileでのXdebugインストールと設定。
  • launch.jsonのポート番号（Xdebugと一致しているか）。
  • ブラウザやクライアントがXdebugをトリガーしているか確認。

---

以上が、自分用の備忘録として、今後デバッグ環境を再構築する際の参考にできるよう整理した内容になります。
これからも開発効率を高めるために、XdebugとVS Codeの活用していきたいと思います。