以前虽使用Xdebug调试，仅仅和PHPStorm结合到一起，未与浏览器结合，所以调试非常麻烦。偶然想到应该有Chrome插件支持联合Debug，遂百度后发现。

一、博主环境：

OS: Windows 10 X64

WebServer: WampServer 3.1.4 X64

WebServer端口：8080

PHP: 7.1.9

Laravel: 5.4

PHPStorm: 2017.2

二、配置过程

1、编辑php.ini使其支持远程调试

php.ini中Xdebug环节内容如下：

[xdebug]
zend_extension ="c:/wamp64/bin/php/php7.1.9/zend_ext/php_xdebug-2.5.5-7.1-vc14-x86_64.dll"

xdebug.profiler_enable = On
xdebug.profiler_enable_trigger = On
;xdebug.profiler_output_name = cachegrind.out.%t.%p
;xdebug.profiler_output_dir ="c:/wamp64/tmp"
xdebug.show_local_vars=0
xdebug.show_exception_trace = On
xdebug.remote_enable = On
xdebug.remote_autostart = Off
xdebug.auto_trace = On

2、配置PHPStorm打开DBGp Proxy

DBGp Proxy中的port填写apache php-fpm监听的端口。

phpstorm其它配置如下：

3、Chrome安装Xdebug helper，并配置

4、打开待调试页面，将Xdebug helper调整至debug状态

5、PHPStorm运行Debug

6、随意debug。

在代码中打断点，然后点击页面，进入该功能区，即可debug。