1、下载安装Visual Studio Code

官网地址：https://code.visualstudio.com/

点击下载链接进行下载及安装。

ps：Visual Studio Code摆脱了vs系列开发工具臃肿的特点，算是一款轻量级跨平台的良心作品。

2、下载安装XAMPP

XAMPP是一个功能强大的建站集成软件包，安装后即直接集成了Apache+MySQL+PHP+PERL等环境。

官网地址：https://www.apachefriends.org/zh_cn/download.html

建议选择7.2.3版本，特别注意，没有特殊需要不要选择虚拟机版本“XAMPP-VM”，否则拷贝文件特别费劲。

XAMPP使用可以参考XAMPP使用介绍 ，实际上安装后有可视化操作界面，打开玩一玩就知道如何使用了。

3、下载安装xdebug

官网地址：https://xdebug.org/docs/install

注：一些低版本的XAMPP自带xdebug，但是我验证7.x的版本没有带该功能，所以需要下载。

官网介绍了多种下载安装方式，需要注意选择合适的版本安装，否则会有兼容性问题。

这里采用brew进行安装。

因为我们通过XAMPP工具包安装的php版本为7.2.3，所以我们这里也要选择下载对应7.2.3版本的xdebug。

我们可以用如下命令先搜索xdebug版本。

brew search xdebug。注：没有安装brew要先安装brew，安装brew

image.png

从搜索结果中我们看到有一个php72-xdebug版本，该版本与我们安装的7.2.3php版本兼容，用如下命令安装该版本。

brew install homebrew/php/php72-xdebug

安装完成后会有一个安装目录输出，将该目录地址拷贝下来。

本人安装的目录为：/usr/local/Cellar/php72-xdebug/2.6.0

如果brew 无法安装，可以通过官网pecl install xdebug安装。

但是这里还有个坑，如果是mac系统默认带的php版本与xampp的php版本不一样，可能会出现问题。

官网pecl install xdebug安装的版本对应的是系统的php版本，需要使用sudo /Applications/XAMPP/xamppfiles/bin/pecl install xdebug进行安装。

如果这样安装不了可以去https://pecl.php.net/搜索xdebug，并查找相应的版本下载下来，之后再执行sudo /Applications/XAMPP/xamppfiles/bin/pecl install xdebug-2.9.8.tgz

通过xampp重启webserver，之后打开http://localhost/dashboard/phpinfo.php，搜索xdebug，查看是否安装成功。

4、配置php.ini文件

打开/Applications/XAMPP/xamppfiles/etc/php.ini文件，并在末尾添加如下代码

[xdebug]
zend_extension=/usr/local/Cellar/php72-xdebug/2.6.0/xdebug.so
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=127.0.0.1
xdebug.remote_port=9000
xdebug.remote_autostart=1

搜索zend_extension=opcache.so，确认它是被注释的，如：“;zend_extension=opcache.so”

使用XAMPP重启web server服务。

打开http://localhost/dashboard/phpinfo.php，页面搜索xdebug，会查到如下结果，表明xdebug安装配置成功。

image.png

5、配置vs code的php开发相关环境

5.1、安装php debug插件。如下图所示，在界面搜索php debug并安装，安装之后按提示点击“重新加载”按钮。

image.png

配置PHP安装路径

image.png

配置XDebug调试

点击调试按钮，默认会有一个php环境的提示，选择会自动生成如下配置信息

{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000
}

如果因为项目路径问题没有自动生成，可以直接拷贝。

image.png

新建一个php文件，编辑并保存到/Applications/XAMPP/xamppfiles/htdocs/test.php。

将/Applications/XAMPP/xamppfiles/htdocs拖入vs code中，并在test.php中增加断点，点击调试按钮，并在浏览器中打开http://localhost/test.php,可以看到vs code中已经能断点调试了。为什么一定要拖入一个文件夹？因为vs code要求必须是文件夹才能调试。。

image.png

路径配置