如何通过VS Code & Xdebug正确调试WordPress插件中的PHP文件？

问题背景 #

要调试WordPress插件中的app_setup.php文件，之前尝试VS Code的“Launch Built-in web server”和“Launch currently open script”配置均失败：前者访问随机端口出现404且断点不触发，后者虽触发断点但因无WordPress环境导致函数未定义报错。

正确调试步骤 #

1. 配置WAMP中的Xdebug #

PHP Debug插件依赖Xdebug，需先在WAMP中启用并配置：

• 打开WAMP管理器，找到当前使用的PHP版本，编辑对应版本的php.ini文件。
• 添加或修改以下Xdebug配置（路径根据你的WAMP安装目录调整）：

  zend_extension = xdebug
  xdebug.mode = debug
  xdebug.start_with_request = yes
  xdebug.client_host = 127.0.0.1
  xdebug.client_port = 9003
  xdebug.log = "c:/wamp64/logs/xdebug.log"
  

• 重启WAMP的Apache服务，通过访问http://127.0.0.2/phpinfo.php（新建包含<?php phpinfo(); ?>的文件）确认Xdebug模块已加载。

2. 配置VS Code的调试配置文件 #

• 在VS Code中打开插件项目，进入.vscode文件夹（无则新建），编辑launch.json，替换为以下配置：

  {
      "version": "0.2.0",
      "configurations": [
          {
              "name": "监听Xdebug请求",
              "type": "php",
              "request": "launch",
              "port": 9003,
              "pathMappings": {
                  "C:/wamp64/www/blogs/wp-content/plugins/myplugin": "${workspaceFolder}"
              }
          }
      ]
  }
  

  • 重点调整pathMappings：将服务器上插件的绝对路径（示例为C:/wamp64/www/blogs/wp-content/plugins/myplugin）映射到VS Code当前工作区路径（${workspaceFolder}），确保Xdebug能关联本地代码与服务器运行的代码。

3. 启动调试并触发断点 #

• 在app_setup.php中设置好断点。
• 在VS Code的调试面板选择“监听Xdebug请求”，点击启动按钮，此时VS Code处于等待调试连接的状态。
• 打开Chrome访问测试文章URL：http://127.0.0.2/test/，当页面加载执行到插件短代码对应的逻辑时，VS Code的断点会自动触发。

为什么之前的方法无效 #

• Launch Built-in web server：使用PHP内置轻量服务器，和WAMP的Apache环境完全独立，未加载WordPress核心，且访问的随机端口与WP站点无关，因此断点无法触发。
• Launch currently open script：直接单独运行app_setup.php，未初始化WordPress核心环境，所有WP专属函数都未被定义，必然报错。

内容的提问来源于stack exchange，提问作者alancc