声明

本教程仅供参考，磨刀不误砍柴工

教程中用到的软件、插件、工具等

1.PhpStorm 2020.1（破解版）
2.phpStudy 2016（集成环境，其他的也得）
3.php-8.1.9-nts-Win32-vs16-x64（php版本）
4.php_xdebug-3.2.0-8.1-vs16-nts-x86_64.dll（针对php版本的xdebug拓展）
5.xdebug helper-1.6.1.crx（浏览器插件）
6.360急速浏览器13.5 （浏览器）
7.RunApi（接口调试工具，其他的也得）

开始

1、集成环境

微信截图_20230210112836.png

1.1、习惯的配置环境变量（不一定需要哦）

微信截图_20230210112017.png

2、IDE工具

微信截图_20230210112849.png

3、站点目录

微信截图_20230210121339.png

4、经过下载后的基本文件

微信截图_20230210121440.png

5、运行phpinfo获取本地php版本信息,并全选phpinfo页面内的所有数据（CTRL+A）

微信截图_20230210111701.png

6、放到https://xdebug.org/wizard页面下进行检索获取对应php的xdbeug拓展

微信截图_20230210111712.png

微信截图_20230210111722.png

微信截图_20230210111811.png

7、把下载的debug拓展文件放入ext目录下

微信截图_20230210122209.png

8、配置php.ini文件，开启debug拓展并配置基本信息（php7跟php8配置上有所区别，可以去官方网站看，翻译下就能理解了），php配置修改后记得重启服务！

[XDebug]
;https://xdebug.org/docs/profiler#mode 相关设置说明
zend_extension="E:\tool\phpStudy\php\php-8.1.9-nts\ext\php_xdebug-3.2.0-8.1-vs16-nts-x86_64.dll"
xdebug.mode = debug
;注意注意注意 原本默认9000，但是我们nginx重定向使用了这个端口，所以我们debug就用9100
xdebug.client_port = 9100
;函数调用跟踪信息输出文件目录，默认值为/tmp
xdebug.trace_output_dir ="E:\tool\phpStudy\tmp\xdebug"
;性能分析文件的存放位置，默认值为/tmp
xdebug.profiler_output_dir ="E:\tool\phpStudy\tmp\xdebug"
;性能分析文件的命名规则，默认值为cachegrind.out.%p
xdebug.profiler_output_name = "cachegrind.out.%t.%p"
;用于zend studio远程调试的应用层通信协议
xdebug.remote_handler = "dbgp"
xdebug.idekey = PHPSTORM
xdebug.client_host = "localhost"

xdebug.log ="E:\tool\phpStudy\tmp\xdebug"
xdebug.log_level = 7
xdebug.profiler_append = 0
xdebug.start_with_request = default
xdebug.use_compression = false
;打开xdebug的性能分析器，以文件形式存储，这项配置是不能以ini_set()函数配置的，默认值为0
xdebug.profiler_enable = 1
xdebug.remote_enable = 1

微信截图_20230210122342.png

9、开始配置phpStorm，File->Setting->Languages & Frameworks

微信截图_20230210112108.png

微信截图_20230210112138.png

微信截图_20230210112151.png

微信截图_20230210112201.png

10、配置run/debug，选择PHP Web Page

微信截图_20230210112305.png

11、实验下，在入口处打断点，然后启动电话图标（绿了），留在点击甲虫（会打开默认页面）

微信截图_20230210112445.png

微信截图_20230210112528.png

11.1、启动成功会进入默认页面，直接放行就好

微信截图_20230210112600.png

12、复制页面上的url后面的参数到接口工具上实验实验

微信截图_20230210112615.png

微信截图_20230210112631.png

13、可以看到接口工具请求方式时的debug效果了

微信截图_20230210111311.png

14、我们继续实验通过浏览器的方式使用（前后端联调实验），电话启动（绿了，不用点击甲虫）

微信截图_20230210112409.png

15、把xdebug helper-1.6.1.crx丢到360急速浏览器中，会自己安装，然后配置选择PHPSTORM

微信截图_20230210122557.png

微信截图_20230210122652.png

16、在域名（站点是localhost）下启动浏览器xdebugging插件，我这里实验的是请求yii2项目中的debug页面

微信截图_20230210111135.png

微信截图_20230210124214.png

备注

1. 教程只是在本人环境下进行截图说明的，大家的环境可能都不一样，所以只能是借鉴
2. 不要全部照搬，除非你的环境跟本人一模一样
3. 如果有workerman业务开发的，请不要开启php的xdebug拓展了，不支持