PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。

一、开章废话

(全体祷告)PHP是世界上最好的语言!bala bala~
是不是有很多小伙伴看到java,.net 程序猿朋友在IDE打断点调试,感觉很COOL。其实PHP也有很多DeBug工具,工欲善其事,必先利其器。So,今天让我们来一起从0开始配置一个PHP Debug环境。
PHP优秀的Debug工具也有很多,像Xdebug,zend-debug等等,这些都是帮助我们在程序中进行断点调试的利器。网上也有很多类似的教程过程也很详细,但是很多设置讲的并不清楚,也不完整,鱼龙混杂,最重要的是,不好使!不好使!不好使!所以就将我的配置过程贴出来,以帮助很多不知道的小伙伴。

二、必要准备

虽然说,从0开始,但~呃~,phpStorm、PHP,我们这次使用的环境如下:

  • Ubuntu16.04
  • Apache2.4
  • php7.0
  • phpStorm 2017.3.3

三、安装Xdebug

apt install php-xdebug

编辑php.ini

vim /etc/php/7.0/apache2/php.ini
###将下面这段文字沾进去
[XDbug]
xdebug.profiler_enable=1     
xdebug.profiler_output_dir="/var/tmp"  ##如果上面的配置为1,会在这里生成大量临时文件,巨多,注意删除
xdebug.remote_enable=1
xdebug.remote_port=9000   ##调试端口默认就是9000
xdebug.remote_host="localhost"   ##转发使用的域名,默认本机localhost

检查cli扩展是否安装成功

php -m | grep xdebug

检查Apache扩展,

phpinfo()

出现下面这段配置说明xdebug安装成功,并且使用了phpStorm作为IDE工具配合。


image.png

如果出现下面这些配置信息说明Xdebug生效了,简单介绍一下配置项

  • xdebug.remote_enable 远程调试开启(因为phpStorm要监听服务)
  • xdebug.remote_handler 远程调试控制插件为dbgp,这个要在phpStorm配置
  • xdebug.remote_host 服务地址
  • xdebug.remote_port 服务端口


    image.png

    经过上面几步Xdebug扩展就安装好了!

四、配置phpStorm

1、配置php

依次打开:phpStorm -> settings -> Languages & Frameworks -> PHP
点击下图CLI Interpreter项的...按钮

image.png

出现弹出框选择你的php执行命令安装位置(我的是/usr/bin/php7.0)

PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第1张图片
image.png

看到上面Debugger: Xdebug 2.6.0了吗?如果有这行小字,说明你的Xdebug是可以用的。

2、配置Servers

依次打开:phpStorm -> settings -> Languages & Frameworks -> PHP -> Servers
如下图,点击左上角小加号,新增一个服务器,配置一下你主机开启的webServer 的主机地址端口,Debugger选择 Xdebug,选择好你的目录映射关系。

PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第2张图片
image.png

3、配置Debug

依次打开:phpStorm -> settings -> Languages & Frameworks -> PHP ->Debug,看到面板里的如下图中Xdebug项目栏中的配置了吗?端口9000;,没错就是php.ini中的配置xdebug.remote_port

PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第3张图片
image.png

4、配置DBGp Proxy插件

依次打开:phpStorm -> settings -> Languages & Frameworks -> PHP ->Debug ->DBGp Proxy
还记的phpinfo 里面的xdebug.remote_handler配置的dbgp 就是他 配置如下(按照你的项目配置来)

PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第4张图片
image.png

5、配置调试配置项

这个比较隐蔽,位置在phpStorm顶部工具栏下面的右上角,有一排小按钮如图:


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第5张图片
image.png

点击图中的第一个按钮的灰色倒三角出现下拉框,如下


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第6张图片
image.png

选择 Edit Configurations... 进入面板如下图:
PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第7张图片
image.png

点击左上小加号出现下拉框如下图


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第8张图片
image.png

选中PHP Web Page 右侧出现编辑面板
PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第9张图片
image.png

选择自己刚才新建的服务器,选择浏览器Chrome

五、配置Chrome

安装php-Xdebug chrome 插件,因为众所周知的原因,你需要爬一下墙头,不过国内也有镜像,留个家庭作业,自己百度一下。
下载完以后,在浏览器扩展安装上Xdebug,装完以后就能看到一只灰色的小强!


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第10张图片
image.png

右键小强,出现配置项,IDE key一项中选择咱们的phpstorm。


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第11张图片
image.png

再次左键小强,选中Debug,小强变身王者绿!
PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第12张图片
image.png

OK,大功告成!

六、使用

回到phpStorm中,在你的代码里的行号一栏中点击一下,这一行就会变红!这就是一个断点如下


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第13张图片
image.png

再次点击phpStorm顶部右上角那个灰色按钮,选择我们刚才新增的配置项,如下


PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第14张图片
image.png

再点即旁边的红色小电话,小电话变绿了ok,说明已经监听上了Xdebug的服务,点击红色小强,哦也!就能看到调试中的Debug信息。
PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。_第15张图片
image.png

你可能感兴趣的:(PHP的正确打开方式:从零开始配置 Ubuntu 16.04 + phpStorm + Chrome + xdebug 开发环境。)