phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

时间:2022-10-21 19:57:54

wamp环境搭建好后,接下来我们看一下在phpstorm下的调试环境如何配置和搭建


配置php  interpreter

        

找到设置->语言和框架->PHP

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

 

在路径找到之间安装wamp时,装好的php.exe和php.ini两个文件路径,设置好后填上去即可。

 

修改字体需要先保存一个方案,然后才可以修改字体以及字体大小,行间距等。

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

修改phpstorm主题

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

 

安装插件

 

我们都知道Emmet是前段代码神器,我们先借由它来顺便了解phpstorm安装插件的过程

 

首先在设置中找到Plugins

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

在搜索框中输入Emmet 点击下面的install安装即完整,非常简单。

 

接下来我们开始配置调试环境

首先选择默认的web浏览器

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

在代码调试点击刚刚设置的浏览器,我用的是firefox

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

点击以后出现的是如下的地址栏中的地址

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

为了使用本地的ip来调用可以在设置中的Deployment来进行设置

 

          找到设置->构建、执行部署->Deployment

 

在Type中选择local or mounted folder

 

在下面设置好项目地址和路径即可

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

点击mappings设置好本地项目路径

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

 

在代码调试中点击浏览器图标:

以换成我们设置好的本地ip地址

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

 


PHPSTORM调试环境配置

 

 

1.       服务器端设置

 

我使用的是wamp。找到wamp下phh.ini配置文件,打开后找到最后的Xdebug模块,修改如下:

zend_extension="D:/web/wamp64/bin/php/php7.0.10/zend_ext/php_xdebug-2.4.1-7.0-vc14-x86_64.dll"

 

xdebug.remote_enable = On

xdebug.profiler_enable = On

xdebug.remote_mode="req"

xdebug.profiler_enable_trigger = On

xdebug.profiler_output_name =cachegrind.out.%t.%p

xdebug.profiler_output_dir="D:/web/wamp64/tmp"

xdebug.remote_host=172.17.3.178

xdebug.show_local_vars=0

xdebug.idekey="PHPSTORM"

xdebug.remote_port=9001

 

xdebug.remote_handler=dbgp

xdebug.collect_vars = On

xdebug.collect_return = On

xdebug.collect_params = On

 

zend_extension的路径视自己的xdebug.dll具体路径而定

xdebug.remote_host视自己具体测试时使用的ip而定

xdebug.remote_port此端口用来传输调试信息,要与PHPSTORM设置相同即可,默认是9000,这里我们改为9001

xdebug.idekey该值也要与PHPSTORM设置相同


特别注意:由于受限于PhpStorm的内置的 PHP版本,XAMPP 中的 PHP版本不可过高,否则会出现无法识别PHP Version Debugger的情况。

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

 

 

配置好后重启服务器

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

加入以下代码,用浏览器打开查看phpinfo信息,找到xdebug模块

说明安装成功

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置


2.       客户端配置

 

打开 文件>设置>语言和框架>PHP>Debug,做如下配置

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

查看 Xdebug 配置信息,其中的 Debug port 是否是 9001 (其实就是看看是否和前面服务端 php.ini 里的 xdebug.remote_port 保持一致,或设置其他较大端口如:10000,只要二者相同即可)。

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

打开 文件>设置>语言和框架>PHP>Debug >DBGp Proxy 下,IDE key填写:PHPSTORM,Host 可以设置为172.17.3.178(视自己调试地址而定),port是指 HTTP 端口,默认是 80,当然可以随意修改,把服务器的 HTTP 端口设置成一样就成。

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置


3.浏览器扩展配置

 

PHP 是强大的 Web 开发语言,假若没有浏览器来进行联合调试简直就是笑话,一般来说,推荐大家使用 Chrome 浏览器和 Firefox 浏览器来进行开发(二者选一即可):

 

Firefox 下我推荐 Theeasiest Xdebug 插件,在选项中设置 IDE key = PhpStorm (即与 DBGp Proxy 下设置的IDE key一样即可),配置起来也不复杂。

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置


4.调试

 

好了,对 Xdebug 和 PhpStorm 的配置现在可以告一段落,那么我们现在就开始来调试测试一番,看看上述的配置有没有问题。

 

新建一个配置

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

Server选用我们之前建立好的Apache,Debugger选择Xdebug

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

注意Start URL:要调试哪个页面,就怕start URL设置为哪个页面

 

接着激活 PHPStorm IDE 的 'Start Listen for PHP Debug Connections' 按钮(右上角 Debug 区类似电话的图标,带红色禁止小圆圈标志表示未激活,变绿表示正在监听中)。

设置断点

 phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

点击爬虫按钮开始 debug 状态。

phpstorm wamp下环境以及调试环境(Xdebug)搭建和配置

浏览器会开始弹窗等待调试会话,按 F7 便可逐行进行断点调试,再也不需要 echo 或者 print 这样繁琐的打印调试了。

 

 

5.总结

 

1)  端口号设置一定要相同,如:Xdebug Port、HTTP Port。

2)  IDE Key 设置也一定要相同。