Windows10,Laradock,Visual Studio Codeの環境にXDebugを導入する

XDebugの導入には気を付ける所が沢山あり、自分もハマったのでメモを残しておく。

動作環境

以下の構成でXDebugを導入する手順になります。

  • Windows10 Pro
    • ESETセキュリティ
  • Laradock
    • PHP 7.3
    • nginx 1.17.6
    • mysql 8.0.18
  • Visual Studio Code 1.41.1

Laradockの設定

LaradockではデフォルトでXdebugが無効になっています。
各コンテナにXdebugがインストールされるように設定を変更します。

Laradockの.envを修正

Laradockの.envを修正し、workspaceとphp_fpmのコンテナにXdebugがインストールされるようにします。

WORKSPACE_INSTALL_XDEBUGとPHP_FPM_INSTALL_XDEBUGをfalseからtrueに変更します。

workspaceとphp_fpmのxdebug.iniを修正

workspace/xdebug.iniとphp_fpm/xdebug.iniを以下のようにします。
いずれのファイルとも同じ内容にします。

xdebug.remote_host、xdebug.remote_portはコンテナ内からホストマシンのxdebugに接続するためのホストとポートになります。

ポートはすでに他のアプリケーションで使われている場合は任意のポートに変更し、以降ポートを指定する部分も合わせます。

xdebugが動かない場合でよくある理由の一つが、このホストとポート間違いかと思います。

xdebug.remote_logはXdebugがうまく動かなった時の原因を調べるのに役立つので追加しています。

xdebug_log フォルダーは自動的には作られないので、自分で/var/www以下に作っておきます。

workspaceのスケジューラを停止

LaradockのworkspaceコンテナではLaravelのタスクスケジューラが毎分起動するようにあらかじめ設定されています。

これが動くとXdebugが反応してしまう可能性があるので無効にしておきます。

laradock/workspace/crontab/laradockをの行をコメントアウトして、以下のようにします。

コンテナの再ビルド

workspaceとphp-fpmのコンテナを再ビルドします。

「設定は変更したけど再ビルドを忘れていた」というウッカリもたまにあるのでご注意を。

Laradockの設定は以上です。

Visual Studio CodeにXdebugをインストールする

Visual Studio CodeにXdebugをインストールして設定します。

エクステンションをインストール

エクステンションのメニューを開いて「PHP Debug」を検索し、一番ダウンロードされてそうなやつをインストールします。

Xdebugの設定

Xdebugの設定をします。

Visual Studio Codeの左メニューの虫アイコンを選んでXdebugの画面を表示し、上側のプルダウンは「Listen for XDebug」を選択し、歯車アイコンをクリックします。


launch.jsonが開くので以下のように編集します。

ポートはLaradockで設定したものを合わせておきましょう。

pathMappingsはコンテナ側とホスト側のフォルダーの対応するパスをそれぞれ指定します。

${workspaceRoot}にはVisual Studio Codeで開いているワークスペースのパスが入ります。必要なら変更しましょう。

試しに実行する

ブレークポイントを適当な場所に設定します。

エディタの左側の余白をクリックすると赤い丸がつきます。
これがブレークポイントです。

虫アイコンをクリックし、XDebugの画面上部の三角ボタンを押すとXDebugが軌道します。

起動するとステータスバーがオレンジ色になり、上部にXDebugのメニューが表示されます。

この状態でローカルホストのWeb画面を表示させると、ブレークポイントの所でコードの実行が止まります。

上手くいってないと何も反応せずに、通常通りプログラムが実行されます。

ESETセキュリティのファイアウォール設定

ファイアウォールがXDebugの通信をブロックしている場合があるので、セキュリティソフトの設定を確認します。

ESETセキュリティの「設定」→「ネットワーク保護」を選択。


「トラブルシューティングウィザード」を選択。

Visual Studio Codeのブロックされている通信が記録されていたら、右側の「ブロック解除」ボタンを押して通信を許可します。

ファイアウォールが問題だった場合はこれで解決するはずです。

以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*