Xdebug-2

Xdebug 弐ノ型 – WSL2+Docker

WSL2+Docker環境

構成

Windows 10, WSL2, ディストロ : Ubuntu 20 LTS

サーバー設定

Docker環境構築

以下のディレクトリ構成にそれぞれファイルを作成する。

サンプル用ディレクトリ : php_xdebug_app

├── docker

│ └── php

│ ├── Dockerfile

│ └── php.ini

├── html/

│ ├── index.html

│ └── phpinfo.php

└── docker-compose.yml

※ docker/php下のファイルは1階層上げて/docker直下でも良いが、DBサーバが必要となったときにdocker/db下に関連ファイルを置くというのがよくあるパターンなのでこうしておく。

※ docker/php/pnp.iniとは別にxdebugように設定だけをxdebug.iniに配置することもよくあるが説明を簡略化するためphp.iniにxdebug関連の設定を入れた。

docker-compose.yml

version: ‘3.8’

services:

php:

build: ./docker/php

ports:

– ‘8180:80’

volumes:

– ./html:/var/www/html

– ./docker/php/php.ini:/usr/local/etc/php/php.ini

docker/php/Dockerfile

FROM php:7.4-apache

RUN pecl install xdebug \

&& docker-php-ext-enable xdebug

docker/php/php.ini(xdebug 3)

[xdebug]

xdebug.mode=debug

# xdebug.start_with_request = yes

xdebug.client_host=host.docker.internal

xdebug.client_port=9103

※ xdebug.start_with_requestは好みで

html/index.php

<h1>Hello x-debug</h1>

phpinfo.php

<?php phpinfo();

コンテナ作成

cuore@ICT-PC0031:~/php_xdebug_app$ docker-compose up -d

Building php

[+] Building 40.9s (7/7) FINISHED

:

WARNING: Image for service php was built because it did not already exist. To rebuild this image you must use `docker-compose build` or `docker-compose up –build`.

Creating php_xdebug_app_php_1 … done

コンテナ側でApache起動

root@cf9d7ef146f1:~# service apache2 start

Starting Apache httpd web server: apache2.

動作確認

ブラウザからアクセスして動作確認

index.htmlの内容が表示される。

VS Code

Extensionインストール

VS Codeに以下のExtensionをインストールします。

  • PHP Debug(リモート側環境)
  • Remote Development(ローカル環境)

VS Codeは、いわゆるIDEそのものはホストOSであるWindowsにインストールされるが、開発環境の設定はそれぞれの実行場所、リモート側に配置される。Extensionは以下の様にどこのシステムにインストールするかを意識することが必要。

  1. Extensionは、まずローカル側のVS Code環境にRemote Developmentをインストールする。これでリモート(コンテナ)に接続できる。
  2. リモート接続してコンテナ側でPHP Debugをインストールする。

Ubuntu on WSL上からVS Codeを実行

code .

VS CodeをDocker Desktop上のphp_xdebug_appコンテナに接続する。

WSL: Ubuntuからコンテナに接続したVS Codeがもう1つ開く。VS Codeの左下の表示で確認できる。

WSL上のUbuntu

Container上のphpサーバ

新規作成のContainerにはPHP Debugが入っていないので、インストールする。

(親切にLocal側のExtensionにインストールボタンが表示されている。)

リモート側(今回作成したコンテナ)にPHP DebugExtensionが追加され、右上のカウントが0から1に変わっているのがわかる。

ブレークポイント設定

Container:VS Codeからデバッグ対象のファイルを開きブレークポイントを設定

デバッグ構成

左のメニューから

「Run and Debug」を選び、「RUN AND DEBUG」画面を表示する。

Create a launch.json file.のリンクをクリック。

環境としてPHPを選択。

launch.jsonが開くのでソースを修正

{

“name”: “Listen for Xdebug”,

“type”: “php”,

“request”: “launch”,

“port”: 9103

},

VS Codeをリッスン待ちにする

デバッグ環境として今設定した「Listen for Xdebug」を選択し

ボタンをクリック。

デバッグ側でリッスンが開始される。(もちろん、launch.jsonで指定した9103ポート)

VS Codeの下部のステータスバー(?)がオレンジ色になりデバッグ中であることがわかる。

Open in Browserをクリックすると「http://localhost:9103/」でブラウザからアクセスしに行くが、9103出は開けない。。

ブラウザからアクセスしブレークポイントで止める

テスト対象URLをブラウザからアクセス(docker-compose.ymlで指定した8180番ポート)

http://localhost:8180/phpinfo.php?XDEBUG_SESSION_START=XXX

XXXは任意の文字列、このテストでは実際に”XXX”としている。

※ このパラメータをいちいちつけるのが面倒であれば、Chromeの「Xdebug helper」等を利用すればよい。

無事、ブレークポイントで止まりました。

PHPStorm

デバッグ対象プロジェクトフォルダを開く

ダイアログにWSL2のフォルダ(\\wsl$)が表示されるので対象となるフォルダを選択。

ソースコードを信頼します。

Settings > Build, Execution, Deployment > Docker

デフォルトで「OK」。

CLI インタープリターの設定

Setting > PHP画面のCLI Interpreterドロップボックスで

クリック。

CLI Interpretersダイアログで

をクリックする。「From Docker, Vagrant, VM, WSL…」と「Local…」のうち、「From Docker…」を選択。

ラジオボタンDocker Composeを選択、ServiceでPHPを選択、後はデフォルトのまま「OK」をクリック。

内容を確認して「OK」ボタンをクリック。

PHP Language levelが5.6だったので7.4に変更

デバッグポートの設定

ポートをphp.iniで設定した値とする。ここでは9103。

‘Break at first line in PHP scripts’はケースバイケースで指定する。指定したステップで止まらないなどの問題が発生したときにチェックを入れてとにかく止める、といったときに便利。

リモートサーバーを追加

サーバーの設定

Name : 任意

Host : localhost

デバッグ構成

構成を追加

  1. PHP Remote Debugを追加
  2. Name : 任意
  3. Filter debug connection by IDE keyをチェック
  4. Serverは前項で設定したサーバー名(localhost)
  5. IDE keyはPHPSTORM(これは任意の文字列でよいはず)

デバッグエンジンの構成を検証する

ここでエラーとなるが原因不明、デバッグには影響ないのでスキップする。

ブレークポイント設定

ステップ実行対象のソースの止めたい場所で「●」を付ける。以前用意したphpinfo.phpで止めてみます。

PHP Stormをリッスン待ちにする

構成したデバッグ構成「Xdebug」が選択されていることを確認して「

」をクリック。

ブラウザからアクセスしブレークポイントで止める

ブラウザから下記URLを指定する。(ChromeでもFirefoxでもOK)

http://localhost:8180/phpinfo.php?XDEBUG_SESSION_START=XXX

接続してよいか確認のダイアログが出るので「Accept」をクリック。

無事、ブレークポイントで止まりました。