如何愉快的在PhpStorm中进行Xdebug断点调试?

前言

  • 如果你厌烦了 print_rlogvar_dump 这类一次调试一行的方式
  • 如果你的业务复杂到一层又套一层,打 log 都救不了你的思路
  • 如果你了解断点调试,但是还没有在 PhpStorm 中配置过
  • 如果你想在 前端 页面 按菜单或按钮 调用 API 时,断点调试后端代码
  • 如果你想在 Postman 访问 API 时,断点调试后端代码

参考文档

如何愉快的在PhpStorm中进行Xdebug断点调试:https://blog.csdn.net/RobotYang123/article/details/80370030
如何愉快的在PhpStorm中进行Xdebug断点调试:https://segmentfault.com/a/1190000014942730
PHP xdebug 模块下载:https://xdebug.org/download.php
PHP xdebug 模块检测和下载:https://xdebug.org/wizard.php
Xdebug helper 浏览器插件:https://www.crx4chrome.com/crx/1716/
PhpStorm 本地断点调试:https://blog.csdn.net/qq_21386275/article/details/78109498


PHP 安装 Xdebug 模块

Windows

  • 这里我用的是 Wamp3.1.0_x64,已经默认安装了 php_xdebug

  • 因此只需要在菜单的 php 拓展内将 php_xdebug 启用即可
    Wamp3.1.0_x64 php_xdebug

  • 如果 没有安装 xdebugphpstorm 提示 xdebug版本与php版本不符,则需要自行下载 xdebugxdebug版本与php版本不符

  • 打开本地终端,执行 php -r 'phpinfo();',复制终端输出的所有 phpinfo 信息

  • 访问地址:https://xdebug.org/wizard.php ,粘贴 phpinfo 信息到输入框,点击按钮进行分析当前 phpinfo 适配的 xdebug 版本,然后进行下载

  • 检测 phpinfo,并下载对应 xdebug 版本 分析phpinfo适配的xdebug

  • 查看 php.inixdebug 配置,确保 xdebug.remote_enable = On 启用

    ; XDEBUG Extension
    [xdebug]
    zend_extension ="C:/Users/robot/Program/Wamp/Wamp3.1.0_64/bin/php/php5.6.31/zend_ext/php_xdebug-2.5.5-5.6-vc11-x86_64.dll"
    xdebug.remote_enable = On
    xdebug.profiler_enable = off
    xdebug.profiler_enable_trigger = off
    xdebug.profiler_output_name = cachegrind.out.%t.%p
    xdebug.profiler_output_dir ="C:/Users/robot/Program/Wamp/Wamp3.1.0_64/tmp"
    xdebug.show_local_vars=0
    

Linux

  • 参考文档
    • https://blog.csdn.net/u011250882/article/details/48764915
    • https://blog.csdn.net/woshihaiyong168/article/details/74276158
  • 下载 xdebug.tgz 安装包
    • 下载地址:https://xdebug.org/files/

Ubuntu

  • 参考文档
    • https://www.cnblogs.com/jingjingdidunhe/p/6955619.html
  • 安装 xdebug 模块
    • sudo apt-get install php-xdebug
  • 查看所有模块
    • php -m
  • 查找 xdebug 安装后的扩展路径
    • find /usr/ -name 'xdebug.so'
    • /usr/lib/php/20151012/xdebug.so
  • 查找 php.ini 所在路径
    • php -i|grep 'php.ini'php -r 'phpinfo();'
    • 可能的位置 /etc/php/7.0/cli/php.ini/etc/php/7.0/apache2/php.ini
  • 编辑 xdebug 配置
[xdebug]
zend_extension="/usr/lib/php/20151012/xdebug.so"
xdebug.remote_enable=1
//xdebug.remote_handler=dbgp
//xdebug.remote_mode=req
//xdebug.remote_host=127.0.0.1
//xdebug.remote_port=9000

PhpStorm 配置 debug connections 服务

  • 在工具栏中选择 File -> setting
  • 搜索关键词 debug,选择 Languages & Frameworks 下的 PHP -> Debug
    • 配置默认 端口 9000
    • 取消强制中断
      PhpStorm 配置 debug connections 服务

配置与调试

  • 多种调试配置方式:本质都是在 cookie 中自动添加 XDEBUG_SESSION=PHPSTORM
    • 使用 浏览器 Xdebug Helper 插件设置 idekey,用 debug 启动访问时,然后 cookie 会自动添加 XDEBUG_SESSION
    • 使用 请求体 request 中设置 XDEBUG_SESSION_START=PHPSTORM 请求参数,然后 cookie 会自动添加 XDEBUG_SESSION
      • 在请求的 URL 后追加,如 http://localhost:500/api/TestQ/xdebug?XDEBUG_SESSION_START=PHPSTORM
      • 在请求的 body 中追加,如 request.body.XDEBUG_SESSION_START=PHPSTORM
    • 使用 PhpStorm 配置 Debug Configuration 与 Servers ,用 PhpStorm debug 启动访问时,URL会自动追加 XDEBUG_SESSION_START 请求参数,然后 cookie 会自动添加 XDEBUG_SESSION

浏览器 Xdebug Helper 插件方式

优缺介绍
  • 优点:
    • 无需 PhpStorm 配置 Debug Configuration 与 Servers
    • 只要配置一致的 idekey=PHPSTORM 或在 cookie 中添加 XDEBUG_SESSION=PHPSTORM
      • Xdebug Helper 配置 idekey=PHPSTORM 后,在启用 debug 模式时,会自动在当前访问 url 所在域名(如 localhost:500)下的 cookie 中添加 XDEBUG_SESSION=PHPSTORM
      • 前端 只需要任意页面启用 Xdebug Helper 的 debug 模式即可,原理如上(但要确认你的 client request 携带的 cookie 可以正确到达 server request
      • Postman 只需要指定域名(如 localhost)的 cookie 中添加一次 XDEBUG_SESSION=PHPSTORM 即可
      • PhpStorm 中只需开启 Listening Debug Connections(就是顶部路径栏中右边那个小电话图标)
  • 缺点:
    • 需要安装 Xdebug Helper
安装 Xdebug helper 插件
  • 下载 Xdebug helper 插件的 crx 文件,在浏览器扩展程序中拖放安装即可
  • 配置插件选项,在插件上右键菜单选择“选项”,配置 idekey 如下
    Xdebug helper 插件配置
启用测试断点调试
  • PhpStorm

    • 在 PhpStorm 中启动你的 小电话
    • 设置断点
      启动小电话,设置断点
  • 浏览器 URL / 前端 URL(启动 Xdebug helper 插件的 debug 模式
    启动方式一

    • 然后访问你的调试文件 或者 API 地址
  • Postman URL

  • 前端 node.js / express.js 等

    • 按上面的逻辑,应该是在 cookie 中添加 XDEBUG_SESSION=PHPSTORM,如 response.cookie('XDEBUG_SESSION', 'PHPSTORM');
    • 我这里用的是 node.js + express.js 直接在 app.js 中全局注入了 XDEBUG_SESSION 的 cookie
      app.js 中全局注入XDEBUG_SESSION
    • 虽然浏览器控制台的 Application 也显示 XDEBUG_SESSION 的 cookie 被正确写入
      控制台的 Application的XDEBUG_SESSION
    • 然后后台 API 却没有收到该 cookie,所以 PhpStorm 的 debug 也没有生效,原因待查……

请求体 request 中通过 XDEBUG_SESSION_START 请求参数 方式

优缺介绍
  • 优点:
    • 无需安装 Xdebug Helper
    • 无需 PhpStorm 配置 Debug Configuration 与 Servers
  • 缺点:
    • 需要在 request body 或 当前 URL 后追加 XDEBUG_SESSION_START=PHPSTORM 请求参数
PhpStorm 配置 debug connections 服务
  • 与前文一致
启用测试断点调试
  • PhpStorm

    • 与前文一致
  • 浏览器 URL / 前端 URL

    • 关闭 Xdebug helper 插件,即切换到 Disable 模式;或者直接卸载
    • 在当前访问的 URL 后追加 ?XDEBUG_SESSION_START=PHPSTORM
      在当前 URL 后追加?XDEBUG_SESSION_START=PHPSTORM
  • Postman URL

    • 在当前访问的 URL 后追加 ?XDEBUG_SESSION_START=PHPSTORM
      Postman追加?XDEBUG_SESSION_START
  • 前端 node.js / express.js 等

    • 在 request body 中追加请求参数 XDEBUG_SESSION=PHPSTORM,如 request.body.XDEBUG_SESSION_START='PHPSTORM'

PhpStorm 配置 Debug Configuration 与 Servers 方式

优缺介绍
  • 优点:
    • 无需安装 Xdebug Helper
    • 无需在 request body 或 当前 URL 后追加 XDEBUG_SESSION_START=PHPSTORM 请求参数
  • 缺点:
    • 需要在 PhpStorm 中配置 Debug Configuration 与 Servers
    • 配置完 PhpStorm 后,需要点击右上角的 甲壳虫 图标,获取调试用的 XDEBUG_SESSION_START=session_key
PhpStorm 中配置 Debug Configuration 与 Servers
  • 点击右上角,选择 Edit Configurations
  • 点击 + 号,新增一个 PHP Web Page
  • 点击 Server 右边的那个 ... ,先新建一个 Web 服务
    设置PHP Web Page
  • 然后点击右上角的 甲壳虫 图标,获取调试用的 XDEBUG_SESSION_START=session_key
    点击右上角的甲壳虫图标
  • 复制这一对 XDEBUG_SESSION_START=12850,之后就是和**《请求体 request 中通过 XDEBUG_SESSION_START 请求参数 方式》**介绍的操作一样啦,这里不再赘述。
  • 所以网络上的这一种调试方式相对繁琐多余,目前我也不知道有何意义

查看断点信息

查看断点信息

调试快捷键

  • F7 通过当前行,进入下一行,如果该行是方法,则进入方法体
  • F8 通过当前行,进入下一行,如果该行是方法,也直接进入下一行,不进入方法体
  • F9 通过整个流程,全部顺序执行

要点总结

  • PHP安装Xdebug模块,在 正确的 php.ini 下设置 xdebug.remote_enable=1或者 On
  • Postman在 API 域名下的cookie中添加XDEBUG_SESSION=PHPSTORM
  • PhpStorm启动小电话,开启侦听
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本地环境的搭建和配置是进行开发工作的基础,以下是xampp、phpstormxdebug和chrome的配置和断点调试的步骤: 1. 安装和配置XAMPP: - 下载并安装XAMPP,它是一个集成了Apache、MySQL和PHP的开发环境。 - 打开XAMPP控制面板,启动Apache和MySQL服务。 - 在浏览器地址栏输入localhost,确认XAMPP是否正常运行。 2. 安装和配置PHPStorm: - 下载并安装PHPStorm集成开发环境。 - 打开PHPStorm,创建或导入你的项目。 - 在设置的PHP选项配置PHP可执行程序路径,选择XAMPP的php.exe文件。 - 配置项目的运行/debug配置,选择Xdebug作为调试引擎。 3. 配置Xdebug: - 打开xampp\php\php.ini文件,在文件末尾添加以下代码: ``` [Xdebug] zend_extension = path_to_xampp\php\ext\php_xdebug.dll xdebug.remote_enable = 1 xdebug.remote_handler = dbgp xdebug.remote_host = localhost xdebug.remote_port = 9000 ``` 4. 配置Chrome浏览器: - 在Chrome浏览器安装Xdebug Helper插件。 - 点击插件图标,选择设置,将IDE Key设置为PHPStorm。 - 启用Xdebug Helper插件,并确保它为绿色以表示调试已启动。 5. 调试代码: - 在PHPStorm设置断点,可以通过点击代码行号来设置断点。 - 在Chrome浏览器访问你的网页应用。 - 当代码运行到断点处时,PHPStorm会自动跳转到调试模式并在IDE显示当前状态。 - 你可以使用PHPStorm的调试工具栏来控制代码的执行、查看变量的值以及观察程序的执行流程。 通过以上步骤,你可以在本地环境使用XAMPP、PHPStormXdebug和Chrome进行代码的断点调试。你可以设置断点、监控变量的值,以及通过PHPStorm的调试工具栏控制代码的执行流程,这将有助于你更有效地调试和排除代码的问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值