VSCodeでDockerコンテナ上(以後、コンテナ)のPHPプログラムをデバッグします。
VSCodeはMicrosoftが提供するオープンソースコードのエディタで、軽量で高速かつ高機能という優れたものです。
Dockerとは、コンテナ仮想化を用いてOSレベルの仮想化を行うことを可能にするプラットフォームです。
コンテナ上のコードをデバッグすると言っても、設定はコンテナ上にないプログラムをデバッグする設定とほとんど変わりません。
Docker上でxdebugの設定をするのみです。
VSCodeにRemote Explorerをインストールしていることを前提とします。
Remote ExplorerとはVSCodeの拡張機能で、SSLやWSLのプロトコルを通してローカルのVSからリモートの編集を可能にします。
下記でインストール方法は記載しています。
コンテナへのアクセス方法は下記に記載しています。
VSCodeにphp debugをインストールする
VSCodeを起動します。
Remote Explorerペインを開きます。
Dev Container、Remotesを選択できるプルダウンからRemotesを選択し、Dockerコンテナ(以後、コンテナ)を載せている環境にアクセスします。
認証を通って環境にアクセスできたら再度Remote Explorerペインを開きます。
プルダウンからDev Containerを選択し、アクセスしたいコンテナにアクセスします。
コンテナにアクセスできたら、Extensionペインを開きます。
上部の検索窓にphp debugと打ち込み検索します。
php debugがヒットしたらそれをインストールします。
コンテナにxdebugをインストールする
前手順でコンテナにアクセスしているはずなのでそのままアクセスした状態から始めます。
画面上のツールバーでTerminal>New Terminalをクリックしプロンプトを開きます。
下記コマンドでphp-xdebugをインストールします。
yum --enablerepo=remi,remi-php73 istall php-xdebugCentOS以外を利用している場合はインストールするものは違いますので、下記をxdebugの公式サイトを参照してください。
インストール完了したらxdebugのiniファイルを修正します。
vi /etc/php.d/15-xdebug.ini下記を記載します。
xdebug.client_host=localhost
xdebug.client_port=9003
xdebug.idekey=VSCODE
xdebug.mode=develop,debug
xdebug.start_with_request=yes
zend_extension=xdebug.so現在xdebugの最新メジャーバージョンは3ですのでそのバージョン用の記載です。
phpのバージョンが低いなどで2を利用している方は書き方を変える必要があることはご留意ください。
xdebugとphpのバージョン対応は下記公式サイトのページをご参照ください。
記載した内容を簡単に説明します。
client_hostはxdebugが接続したいIPアドレスもしくはホスト名を記載します。
インストールしたコンテナでデバッグするため、ここではlocalhostと記載します。
client_portは9003を入れます。
xdebugのデフォルトで決められたポートの値です。
idekeyはxdebugを利用するIDE(統合開発環境)を入れるためVSCODEと入力します。
modeはxdebugのどの機能を有効にするかの設定です。
developmentとdebugをここでは選択します。
developmentを指定すればphpデフォルトよりよいエラーメッセージやより多くの情報を表示できるようになります。
debugを指定すればステップ実行のデバッグを有効化できます。
start_with_requestでは、リクエストの最初のタイミングでデバッグできるようにするかを制御できます。
yesを設定します。
zend_extensionでは、指定したライブラリをPHPにロードできます。
xdebugの共有ライブラリであるxdebug.soを設定します。
設定し終えたらapacheを再起動します。
sudo systemctl restart httpdこれで設定した内容が反映されます。
VSCodeのデバッグ設定をする
VSCodeのデバッグ設定はlaunch．jsonに記載します。
下記の手順でlaunch.jsonを作成します。
VSCodeの画面でRun and Debugを開きます。
create a launch.json fileをクリックします。
debug対象を選択するプルダウンが出てきたらPHPを選択します。
これでデフォルト設定のlaunch.jsonが作成されます。
ファイルは開いているフォルダの最上位階層に.vscode/launch.jsonの構造で作られます。
中身はデフォルトの記載がされていますが下記の通り書き換えます。
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003,
"stopOnEntry": true,
"pathMappings": {
"${workspaceRoot}": "${workspaceRoot}"
}
}
]
}configurationsで何を設定しているかを見ます。
nameはデバッグ開始時のドロップダウンに表示される値なので何でも構いません。
どういう設定のデバッグか分かりやすくしておくとよいでしょう。
typeはデバッガーのタイプです。
phpのデバッグなのでphpと記載します。
repuestはこの設定はデバッグ対象のプロセスの起動方法を指し、launchかattachかを選択できます。
launchにすればデバッグ開始時に新しいプロセスを起動します。
attachにすると既に動いているプロセスにアタッチしてデバッグできます。
アタッチするプロセスはプロセスIDやプロセス名を指定して決められます。
portはプロセスにアクセスする時のポートです。
現在最新のxdebugバージョン3では9003を指定します。
stopOnEntryはプログラムの最初の処理でデバッグするかどうかで、trueにするとデバッグします。
普段はfalseでいいです。
PathMappingsはローカルパスをリモートパスにマッピングするための値です。
ただ上記通りの設定をしていればローカルとリモートは同じパスを見ているため下記で問題ありません。
"${workspaceRoot}": "${workspaceRoot}"これでlaunch.jsonの設定完了です。
PHPプログラムのステップでのデバッグを試す
デバッグができることを試して終わります。
VSCodeの画面でRun and Debugをクリックします。
開いたペイン上部でListen for Xdebugを選択し左の△をクリックします。
これでデバッガーが動き始めました。
launch.jsonでstopOnEntryをtrueにしているため、この状態でPHPプログラムを実行すると最初の処理で止まるはずです。
デバッグを止める場合は小さいバーが出ていると思うため、そちらの停止(□)をクリックすればよいです。
