Xdebug-1

Xdebug 壱ノ型 – WSL2環境

WSL2環境

構成

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

サーバー設定

WLS2にUbuntuをインストール

Microsoft StoreからUbuntuディストロのインストール

インストール後、開く

コンソールが開く

ユーザー名とパスワードを指定

Installing, this may take a few minutes…

Please create a default UNIX user account. The username does not need to match your Windows username.

For more information visit: https://aka.ms/wslusers

Enter new UNIX username: cuore

Enter new UNIX password:

Retype new UNIX password:

passwd: password updated successfully

Installation successful!

To run a command as administrator (user “root”), use “sudo “.

See “man sudo_root” for details.

cuore@hide-dell:~$

PHP + Apacheをインストール

cuore@hide-dell:~/xdebug-test$ sudo apt update

cuore@hide-dell:~/xdebug-test$ sudo apt install php

cuore@hide-dell:~/xdebug-test$ apache2 -v

Server version: Apache/2.4.29 (Ubuntu)

Server built: 2022-01-05T14:50:41

cuore@hide-dell:~$ php -v

PHP 7.2.24-0ubuntu0.18.04.10 (cli) (built: Oct 25 2021 17:47:59) ( NTS )

Copyright (c) 1997-2018 The PHP Group

Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

with Zend OPcache v7.2.24-0ubuntu0.18.04.10, Copyright (c) 1999-2018, by Zend Technologies

cuore@hide-dell:/var/www$ sudo chown -R cuore /var/www/html/

xdebugをインストール

cuore@hide-dell:/usr/lib/php$ sudo apt install php-xdebug

cuore@hide-dell:~$ php -v

PHP 7.2.24-0ubuntu0.18.04.10 (cli) (built: Oct 25 2021 17:47:59) ( NTS )

Copyright (c) 1997-2018 The PHP Group

Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

with Zend OPcache v7.2.24-0ubuntu0.18.04.10, Copyright (c) 1999-2018, by Zend Technologies

with Xdebug v2.6.0, Copyright (c) 2002-2018, by Derick Rethans

Xdebugのバージョンは2.6.0でモジュールができている。

/usr/lib/php/20170718/xdebug.so

/etc/php/7.2/apache2/php.iniにxdebugのディレクティブ追記

cuore@hide-dell:~/xdebug-test$ sudo vi /etc/php/7.2/apache2/php.ini

……

[xdebug]

zend_extension=/usr/lib/php/20170718/xdebug.so

xdebug.remote_enable = 1

xdebug.remote_autostart = 1

xdebug.remote_host = “127.0.0.1”

xdebug.remote_port = 9100

※ 通常Xdebug2のremote-portは9000だが、私はDockerで9000あたりを使っているので9100に設定。

remote_autostartは1としているが、これによりURLに?XDEBUG_SESSION_STARTがあっても無くてもxdebugが動作する。

一人で管理しているサーバーなら手軽であるが、複数人でテストや運用しているときは他人が知らずにアクセスしてxdebugに引っ掛かって止まることもあるので注意。特に運用中の―サーバーでは0にしておいた方が無難。

/var/www/html//phpinfo.phpを作成

phpinfo();

Apache再起動後 http://localhost/phpinfo.php で確認。

1.2 VS Code

「PHP Debug」Extensionをインストール

WSLからVS Codeをインストールし起動する。作業ディレクトリは何でもよい、なぜなら後で/var/www/htmlディレクトリを直接開いてデバッグするので。

cuore@hide-dell:~$ mkdir xdebug-test

cuore@hide-dell:~$ cd xdebug-test/

cuore@hide-dell:~/xdebug-test$ code .

Installing VS Code Server for x64 (ccb…47)

Downloading: 100%

Unpacking: 100%

Unpacked 1842 files and folders to /home/cuore/.vscode-server/bin/ccb…47.

cuore@hide-dell:~/xdebug-test$

Extension「

」からPHP Debugをインストール。

launch.jsonに以下設定。

{

“name”: “Listen for Xdebug”,

“type”: “php”,

“request”: “launch”,

“port”: 9100

},

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

VS Codeから/var/www/htmlを開く。

ここでの確認は、ネット上からおかしなコードをダウンロードしてきて実行したことにより被害を受けてもMSの責任ではないよという確認。

ブレークポイント設定

ソースコード(ここではphpinfo.php)を開いてブレークポイントを設定。

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

Run and Debug「

」からデバッグ実行。

VS Codeがリッスン待ち状態となる。VS Code下部のステータスバーがオレンジ色になりそのことを明示している。

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

ブラウザからphpinfo.phpを指定する。(ChromeでもFirefoxでもOK)

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

remote_autostartを有効にしているのでブレークポイントで止まっているが、無効の場合はURLに「?XDEBUG_SESSION_START=XXX」を付ける必要がある。詳細を知りたければ「残心の章」を参照。

1.3 PHPStorm

設定の大まかな流れ

  1. CLI インタープリターの設定 Settings > PHP
  2. Xdebugのポート設定 Settings > PHP > Debug
  3. サーバーの構成 Settings > PHP > Servers
  4. デバッグの構成 Run > Edit Configurations

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

PHPStormからプロジェクトを開く。\\wsl$でのアクセスに対応しているので、WSL2上のディストロのファイルを直接開ける。

/var/www/htmlを直接指定する。

このプロジェクトのソースを信頼する、に設定。

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

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

クリック。

CLI Interpretersダイアログで

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

ラジオボタンWSLを選択後はデフォルトのまま「OK」をクリック。

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

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

デバッグポートの設定

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

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

リモートサーバーを追加

サーバーの設定

Name : 任意

Host : localhost(WSL2のディストロが複数ある場合は注意 ※この後の章参照)

デバッグ構成

構成を追加

  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」が選択されていることを確認して「

」をクリック。

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

ブラウザからphpinfo.phpを指定する。(ChromeでもFirefoxでもOK)

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

remote_autostartを有効にしているのでブレークポイントで止まっているが、無効の場合はURLに「?XDEBUG_SESSION_START=XXX」を付ける必要がある。詳細を知りたければ「残心の章」を参照。