不多说，直接上step by step:
1.xampp配置
看看我的XAMPP版本：
修改配置文件，该打开打开，该加上加上，结果如下（当前需要重新启动apache,配置才会生效)：
[XDebug]
zend_extension = "c:xamppphpextphp_xdebug.dll"
xdebug.profiler_append = 0
xdebug.profiler_enable = 1
xdebug.profiler_enable_trigger = 0
xdebug.profiler_output_dir = "c:xampp mp"
xdebug.profiler_output_name = "cachegrind.out.%t-%s"
xdebug.remote_enable = on
xdebug.remote_handler = "dbgp"
xdebug.remote_host = "localhost"
xdebug.remote_mode = "req"
xdebug.remote_port = 9001
xdebug.trace_output_dir = "c:xampp mp"
xdebug.idekey= PHPSTROM
请注意端口，有时候这个端口会冲突（比如默认的9000端口，我的机器上就冲突了），如果冲突，就修改一个，只要几方设置保持一致就没问题
2.chrome浏览器设置
进入chrome扩展程序：chrome://extensions/
点击获取更多扩展程序，在Google商店里面搜索：jetbrain，然后安装JetBrains IDE Support插件！
当然这里多说一句，google的扩展商店可能中国未必能访问，如果遇到这种情况，你有两个选择：一个是国内下载这个插件，自行安装；还有就是翻墙了。本人采用的是第二个方案。（作为程序员，准备一个翻墙账号还是不要的）
如图所示：
安装成功之后，会出现JB标志：
3.phostorm的设置：
File->Setting->Languages&Frameworks->php，设置好interpreter,设置如下：
如果以上没有设置好，那么请点击interpreter后面的...按钮，进入设置界面，只要正确设置了PHP的目录，和PHP.ini文件设置正确，系统会自动检测到启动了Xdebug的，如下图所示：
接着设置File->Setting->Languages&Frameworks->php->servers,设置如下图：
然后设置File->Setting->Languages&Frameworks->php->Debug，主要设置xDebug的端口，我这里是9001，要和php.ini里面设置一致，如下图所示：
最后设置File->Setting->Languages&Frameworks->php->Debug->DBGP Proxy,ID KEY和端口要和php.ini中保持一致，如下图所示：
4.phpstorm调试配置设置：
设置：Run->Edit configurations,点添加按钮（加号),选择PHP WEB Application类型，在右边填写相关信息，要注意Start URL应该指向你项目的浏览器访问根目录，如下图所示：
到这里，所有设置全部完毕，下面看看如何使用：
5.开始调试
首先打开你的PHP项目，在你想要调试的程序语句最左边单击，设置断点，断点显示为淡红色圆点，如下图所示：
设置完断点之后，你就可以执行Run->Debug->localhost进行调试了。或者单击右上角的绿色调试图标或者按shift+F9快捷键也可以。
有些教程说还要先点击右上角的电话图标（侦听PHP DEBUG连接），经过我实验，其实不用点击也是可以调试的。
点击调试之后，会自动打开浏览器访问你当前项目的根目录，然后你在浏览器中进行操作，只要程序执行到断点位置，就会在phpstorm中自动中断，并出现调试窗口，显示调试环境和变量，然后你可以单步跟踪了。
打开Run菜单，就会出现各种调试命令了，这个不详细说了。
比如我的程序运行到断点显示如下：
要继续执行，值需要按F9，浏览器就会出现运行结果。
希望这个教程能帮到你！