如何在基于 Docker 的 PHP 环境使用 VScode 进行断点调试

本文关键点

visualstudiocodedocker下的php环境xdebug1.visualstudiocode1.1.安装、设置

官方下载

推荐配置

请参考这里，只是一些初始设置、美化等，与php调试无关。

安装

快捷键cmd+p或ctrl+p，输入extinstallphpdebug

注意：安装完成后必须重启vscode。

配置

打开一个php项目，点击菜单debug>addconfiguration，或按照下图操作

详细配置如下：

{//useintellisensetolearnaboutpossibleattributes.//hovertoviewdescriptionsofexistingattributes.//formoreinformation,visit:https://go.microsoft.com/fwlink/?linkid=830387"version":"0.2.0","configurations":[{"name":"listenforxdebug","type":"php","request":"launch","port":9001,//对应xdebug的配置"stoponentry":true,"pathmappings":{//"容器中对应的项目地址":"本机项目地址"//绝对路径"/var/www/html/debao/":"${workspaceroot}"}},{"name":"launchcurrentlyopenscript","type":"php","request":"launch","program":"${file}","cwd":"${filedirname}","port":9001}]}

配置成功后，在项目下生成一个包含该配置的目录，如下：

.├──.vscode│├──launch.json├──其它项目文件2.docker下的php环境

推荐直接克隆我之前封装的一个基于docker的lnmpa环境，当然你也可用使用你自己的dockerphp环境，但是这里的配置是针对nginx+apache的组合形式，你可以根据具体环境进行调整。

详细如下：

修改dockerfile文件，安装xdebug

...&&mkdir-p/tmp/xdebug&&wget-chttps://github.com/xdebug/xdebug/archive/2.6.0.tar.gz&&tar-xf2.6.0.tar.gz-c/tmp/xdebug--strip-components=1&&docker-php-ext-configure/tmp/xdebug--enable-xdebug&&docker-php-ext-install/tmp/xdebug...

修改后，需要重新编译对应的镜像文件，更多安装扩展的方式请参考：docker中的php如何安装扩展

配置xdebug

在php.ini文件追加以下配置

[xdebug]zend_extension=xdebug.soxdebug.remote_enable=1xdebug.remote_handler=dbgpxdebug.remote_port=9001xdebug.remote_autostart=1xdebug.remote_connect_back=0xdebug.idekey=dockerxdebug.remote_host=192.168.2.14

说明：

server{listen80;server_namemy.test;#这里替换你的域名indexindex.htmlindex.htmindex.php;root/usr/share/nginx/html/test;...location~.*.(php|php5)?${proxy_passhttp://php_apache:8091;#这里是对应的apache容器地址和端口proxy_read_timeout300;proxy_send_timeout300;indexindex.php;proxy_set_headerhost$host;proxy_set_headerx-real-ip$remote_addr;}...}

主要追加以下两个参数，用以解决在debug时504超时问题，具体数值可根据需要设置。

修改docker-compose.yml文件，在nginx和apache服务下通过expose暴露9001端口

使用如下命令重新启动服务

docker-composestopdocker-composedowndocker-composeup-d3.测试断点调试

按快捷键f5打开断点，此时在浏览器中访问网页，将跳转到vscode编辑器，并且样式如下：