VScodeでXDebugを動かそうとしたらかなりハマったのでここにメモしておきます。
- 開発環境
- windows 10 pro
- docker 2.0.0.3
- laravel 最新のやつクローン
- VSCode 1.36.1
#前提条件
laradockの環境ができていること。
laradockの環境構築は探せばたくさん出てくるので各自行ってください。
#XDebugのインストール
早速ですが、laradock/.envファイルをいじってもらいます。
WORKSPACE_INSTALL_XDEBUG=true
～中略～
PHP_FOM_INSTALL_XDEBUG=true
またlaradock/php-fpmとlaradock/workspaceにある xdebug.iniを以下のように編集します。
ここで**重要なことはホスト名の指定です。**私はこれをやらなくて1日無駄にしました。
たぶんコピペでも大丈夫だと思います。
PS:hibohibooさんの記事によると、ホスト名の指定は xdebug.remote_host=10.0.2.2 じゃないとダメな環境もあるようです。ご指摘ありがとうございます。
; NOTE: The actual debug.so extention is NOT SET HERE but rather (/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini)
xdebug.remote_host=host.docker.internal
xdebug.remote_connect_back=0
xdebug.remote_port=9001
xdebug.idekey=Listen for XDebug
xdebug.remote_autostart=1
xdebug.remote_enable=1
xdebug.cli_color=1
xdebug.profiler_enable=0
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.var_display_max_children=-1
xdebug.var_display_max_data=-1
xdebug.var_display_max_depth=-1
ここまでできたらdockerでbuildしましょう。
laradockのあるディレクトリに移動し以下を実行します。ここではApache2とmysqlにしていますが、各自環境によって変えてください。
> docker-compose up -d --build apache2 mysql
これでインストールができるはずです。
ネットワーク絡みのエラーが出たときは、dockerのsettingsのNetworkの項目のDNS serverを8.8.8.8にしてください。だいたいうまくいきます。
ではうまくできたか確認してみましょう。workspaseに入ってphpのバージョンを確認します。
> docker-compose exec workspace bash
# php -v
PHP 7.2.19-1+ubuntu16.04.1+deb.sury.org+1 (cli) (built: May 31 2019 11:16:55) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies
with Zend OPcache v7.2.19-1+ubuntu16.04.1+deb.sury.org+1, Copyright (c) 1999-2018, by Zend Technologies
with Xdebug v2.7.1, Copyright (c) 2002-2019, by Derick Rethans
with Xdebugなんとかかんとかとかかれていればdocker側の設定はOKです。
#VSCode側の設定
とりあえず、拡張機能を入れます。
今回はとりあえずPHP IntelliSenseとPHP Debugをいれましょう。拡張機能の検索のところからインストールしてください。
##PHP IntelliSenseの導入
補完機能とかしてくれるやつです。
dockerとか関係なしにphpを入れなければなりません。
ここからダウンロードして適当な場所に解答してください。
そして、VSCodeの設定より、settings.jsonを開き以下を追記します。
"php.validate.executablePath": "解凍先のパス\\php.exe",
これで補完機能が使えるようになります。
##Xdebugの導入
さて、最後にXdebugの導入を行います。
ここで忘れてはいけないことが、プロジェクトフォルダをVScodeで開くことです。
エクスプローラー等でプロジェクトフォルダからVScodeで開いてください。
そして「デバッグ」→「構成の追加」でjsonファイルを編集します。
説明は他に譲るのでとりあえず以下をコピペ
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"pathMappings": {
"/var/www/": "${workspaceFolder}"
},
"log": true,
"port": 9001
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9000
}
]
}
気をつける点は２つ。pathMappingsとportの部分です。
pathMappingsは右の/var/www/がdockerから見たプロジェクトの位置（困ったらworkspaceで入って確認してみてください）。一方の${workspaceFolder}がVScodeで開いているフォルダの位置を指定してください。
portは最初のxdebug.iniに指定したものと同じにしてください。
この辺を間違えるとデバックできません
これで設定完了です。虫マークの矢印ボタンを押せばデバッグができる・・・はずです。
試しにしてみましょう。
<?php
$a = 1;
$a = $a + 1;
echo $a;
ここで二つ目の$aの左横を指定してブレークポイントを指定します。
そして虫ボタンを緑三角をクリックしてデバック実行です。
test.phpをブラウザで立ち上げると・・・・ブレークポイントでとまりましたか？
うまくいけばこんな感じになります。