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

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

v1.0

作者：ZBW

目录

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

简介

我们的项目在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中像正常调试一样查看各种临时变量了。