php前后端分离项目如何启用phpstorm的断点功能

问题描述

参考网上的帖子设置了phpstorm的断点功能，且浏览器安装和启用了xdebug helper插件但是前端项目请求后端接口时无法监听和启用debug功能。

分析问题

1.尝试在浏览器输入本地后端域名的接口进行访问时发现在浏览器中直接请求后端接口可以启用debug功能。
2.分析出应该时前端项目缺少某些参数导致的

解决问题步骤

1.前端请求项目中加如请求header中加入XDEBUG_SESSION_START这个参数：如我使用的是axios 加入以下代码
axios.defaults.headers.common['XDEBUG_SESSION_START'] = 'PHPSTORM'
2.后端项目放行CrossHTTP放行XDEBUG_SESSION_START

点击查看代码

class CheckRequestHead
{
    public function __construct()
    {

    }
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Token, User-id, Authorization, X-XSRF-TOKEN, XDEBUG_SESSION_START');
        $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
        $response->header('Access-Control-Allow-Credentials', 'true');
        return $response;
    }
}

php.ini中确保加入以下两行

xdebug.mode=debug
xdebug.start_with_request=trigger

这两行是确保xdebug能从header中监听到XDEBUG_SESSION_START参数
以下是我完整的php.ini中xdebug的配置 可以参考

点击查看代码

[Xdebug]
zend_extension=D:/phpstudy_pro/Extensions/php/php7.3.4nts/ext/php_xdebug.dll
xdebug.idekey=PHPSTORM
xdebug.remote_enable = On
xdebug.remote_host=localhost
xdebug.remote_port=9100
xdebug.remote_handler=dbgp
xdebug.auto_trace = On
xdebug.log="/tmp/xdebug.log"
xdebug.mode=debug
xdebug.start_with_request=trigger

到此就完美解决啦！

另外一种方式

如果上面这种方式没有解决可以直接在axios的封装中加入XDEBUG_SESSION_START参数 如下为我axios下的代码

点击查看代码

export default function (method, url, data = null) {
  method = method.toLowerCase();

  // 开发环境下注入调试参数
  const debugParams = process.env.NODE_ENV === 'development' ? {
    XDEBUG_SESSION_START: 'PHPSTORM'
  } : {};
  if (method === 'get' || method === 'delete') {
    return instance[method](url, {
      params: {
        ...data,
        ...debugParams
      }
    });
  } else if (method === 'post' || method === 'put') {
    // 直接附加到 URL（兼容性更好）
    const separator = url.includes('?') ? '&' : '?';
    const debugUrl = process.env.NODE_ENV === 'development'
      ? `${url}${separator}XDEBUG_SESSION_START=PHPSTORM`
      : url;

    return instance[method](debugUrl, data, {
      onUploadProgress: progressEvent => {
        const complete = (progressEvent.loaded / progressEvent.total * 100 | 0);
        stores.commit('user/SET_PROGRESS', Math.floor(complete));
      }
    });
  } else {
    return false;
  }
}

需要注意的坑

前端配置中
axios.defaults.headers.common['XDEBUG_SESSION_START'] = 'PHPSTORM';
这里的参数一定要是XDEBUG_SESSION_START 而不是XDEBUG_SESSION。这里之前问通义千问说是用XDEBUG_SESSION这个参数结果试了好多次都不行。后面问deepseek才发现是这里的参数要用XDEBUG_SESSION_START。在这里浪费了好长时间