【技术博客】使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试

目录

• 使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试
  • 简介
  • PhpStorm中的远程开发
    • 1. 配置服务器
    • 2. 配置路径对应
    • 3. 配置同步
    • 4. 进行代码同步
    • 5. 优势和缺陷
  • 利用Xdebug进行后端调试
    • 1. 服务端配置
    • 2. PhpStorm内配置
    • 3. 浏览器配置
    • 4. 开始调试

使用PhpStorm和Xdebug实现Laravel工程的远程开发及调试

v1.0

做者：ZBW

简介

咱们的项目在Alpha阶段初期开发阶段遇到了很多困难，尤为是在本地部署项目迟迟跑不起来，进度方面产生了一些压力。除此以外，因为项目后端代码中依赖了部分Bash指令，在Windows上运行项目也成为了一项难题。所以团队计划将整个项目部署到一台开发服务器上，在服务器上运行并检视代码的效果。从而如何方便地修改服务端代码并查看效果成为了一个亟待解决的问题。

PhpStorm是Jetbrains公司开发的一款功能强大且易用的、专为PHP开发设计的IDE。PhpStorm固然也内置了远程开发相关的一些功能，能够方便地同步本地和多个服务器之间的代码，这为开发和最终的发布都带来了便利。本文将介绍PhpStorm在远程开发方面的使用。

远程开发考虑的另外一个问题是如何进行debug。代码运行在服务器而不是本地，而且以往写程序用print这类函数进行控制台debug的方式在Laravel工程中难以实现。在调研一番后咱们选择了Xdebug这款PHP经常使用的调试器，结合PhpStorm进行debug。从而在本地打好断点后，能够在本地拦住服务端运行的代码，并可逐行调试。本文将介绍如何在服务端和本地配置好Xdebug进行调试。

PhpStorm中的远程开发

1. 配置服务器

1. 顶部菜单栏Tools->Deployment->Browse Remote Host开启右侧侧边栏，点击...打开配置页面，点击左上的+添加一个远程服务器。

2. 按下图配置服务器的基本信息，主要包括服务器ip、端口、验证信息（账号密码，也能够试用SSH证书），项目在服务器上的根目录，项目网址地址。配置结束后可使用Test Connection测试链接是否正常。

2. 配置路径对应

​ 1.在Deployment窗口下点击顶部的Mappings配置本地和服务器路径的对应关系。本项目按如图配置便可。

​ 2.配置不须要同步的路径。点击顶部的Excluded Paths配置不须要同步的路径，这些每每是能够在服务器直接安装、不会常常变更的代码，包含隐私信息的文件以及服务端生成的与代码无关的文件等。

3. 配置同步

顶部菜单栏Tools->Deployment->Options打开同步相关设置。

此处须要额外注意的是关于自动上传功能，该功能请谨慎开启！！！谨慎开启！！！谨慎开启！！！

缘由是自动上传极可能会直接覆盖掉服务器上的文件，甚至删除服务器上的文件（若是本地没有而服务器上有），而且没有回撤的方式。当你的本地目录发生比较大的变化（例如切换Git分支），若是不慎按下了Ctrl+S，则PhpStorm在上传时不分三七二十一就会覆盖掉以前的全部文件，而且删除服务器上一些没有的文件。

（笔者在发布前一天切换分支查看注释率时，手贱按了一下Ctrl+S，结果差点把服务器上的文件全都搞乱）

4. 进行代码同步

代码同步有多种方式能够进行。

​ 1.指定文件手动选择同步方式（上传/下载）：右键在文件树中点击选中的单个或多个文件，进入Deployment选项菜单，选择所需的方式便可进行。

​ 2.同步整个文件夹内的文件

​ 上图中介绍的sync便具备这样的功能，其能够自动按多种方式对比本地和服务端文件的差别，并由你选择不一样的同步方式。

​

​ 3.自动同步，即上文提到的自动上传。上传时若是遇到时间冲突会提醒你进行Merge（相似Git），但也有可能直接就覆盖了。不管如何该方法请谨慎使用。

5. 优势和缺陷

优势：

• 开发时本地修改代码以后能够直接上传到服务器上验证效果，在IDE内一鼓作气。
• 方便管理服务器上的代码，在发布时只须要对服务器进行一次同步便可。
• 须要临时、快速地修改服务器上的文件时能够直接在IDE内操做（例如修复小bug）。

缺点：

• 多人使用该功能时会很是混乱，极可能出现前脚改完后脚被覆盖了的状况。
• 没有回退机制，尤为是一旦误删了服务器上的文件很难恢复。
• 同步体验通常，有时须要手动对每一个文件进行核对以及确认同步操做，而且对比二进制文件速度较慢。

整体来讲在IDE中使用这一功能须要根据项目开发的模式以及人员的数量进行调整。

利用Xdebug进行后端调试

1. 服务端配置

​ 1.安装Xdebug：Installation Guide。在Ubuntu环境下能够选择手动编译安装，根据教程选择合适的版本后在服务端编译便可。

​ 固然你也能够选择：apt install php-xdebug，但在Ubuntu 16.04下该方式安装的版本较低（虽然够用，但不利于升级）

​ 2.配置Xdebug

​ 使用apt安装的话，在/etc/php/7.0/mods-available/下新建文件xdebug.ini，填入如下内容。

zend_extension=xdebug.so
xdebug.remote_autostart = 1 # 自动启动xdebug
xdebug.remote_enable = 1           #是否开启远程调试
xdebug.remote_handler = dbgp          #指定远程调试的处理协议
xdebug.remote_host= 127.0.0.1          #指定远程调试的主机名，若是你的IDE运行在有公网ip或者开发服务器和PC运行在同一个内网中，那么此处你能够直接设置成本机的公网/内网ip
xdebug.remote_port = 9001               #指定远程调试的端口号，本文不使用默认的9000了
xdebug.remote_log = /tmp/xdebug_remote.log # 日志位置

​ 若是编译安装，则须要手动配置php的全局配置php.ini中的相关内容。以上配置结束后，重启apache服务器，并使用php -v查看输出是否有xdebug字样，若是有则配置成功了。

2. PhpStorm内配置

​ 1.设置PHP解释器：进入Settings->Languages&Frameworks->PHP，在CLI Interpreter出点击右侧的...设置远程解释器。在Path mappings处设置目录对应。

​ 2.进入左侧栏目中PHP->Debug条目，设置Xdebug端口号

​ 3.新建一个运行配置，点击IDE右上角的Add Configuration

​

​ 进入后首先添加一个运行配置，如图选择PHP Remote Debug，而后新增一个服务器，配置服务器相关信息以及路径对应。最后记得配置好IDE key

​

3. 浏览器配置

​ 本文以Chrome浏览器为例。在浏览器中安装一个叫作Xdebug helper的插件。其余浏览器能够在这里选择相似的插件：Browser Debugging Extensions

​ 安装好插件后，首先配置其IDE key。打开设置，选择PhpStorm便可。

​

4. 开始调试

以上内容配置完毕后，咱们终于能够开始调试了。不过还有一些准备工做：

• 打开浏览器插件，点击小虫子图标后选择Debug项便可。

• 打开PhpStorm中的xdebug监听，点击如图显示便可。

• （很是重要）创建一个反向SSH链接。因为是须要服务器向咱们的PC发送请求，而咱们的PC又没有能够直连的公网IP（若是你有那么请忽略本条。并将以前在服务器上设置的remote_host设置为你的本机ip），所以咱们须要经过SSH创建一个反向的连接，将本地9001端口反代到服务端。指令以下：

  ssh -R 9001:localhost:9001 user@hostname

以上都配置好了以后，在须要调试的代码中打好断点，而后点击绿色小虫子新建一个Debug会话，同时打开浏览器进入对应的页面，就能够开始Debug了！

当服务端运行到断点处时，会在IDE中停下，网页每每也会卡住。此时你就能够在IDE中像正常调试同样查看各类临时变量了。