修正VS Code的launch.json以在WAMP虚拟主机上调试WordPress

问题分析 #

当前配置的核心问题是PHP调试监听配置缺少路径映射，你错误地将路径映射配置在了Chrome浏览器的调试项中。Xdebug需要明确服务器端文件路径与本地VS Code工作区路径的对应关系，才能正确匹配断点。

修改后的launch.json配置 #

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            // 新增PHP调试的路径映射：服务器端文档根对应本地工作区路径
            "pathMapping": {
                "b:/wamp64/www/mywebsite": "${workspaceFolder}"
            }
        },
        {
            "name": "Open in Browser",
            "type": "chrome",
            "request": "launch",
            "url": "http://mywebsite.local",
            "webRoot": "${workspaceFolder}"
            // 移除Chrome配置中无关的pathMapping，该项仅用于前端资源映射
        }
    ],
    "compounds": [
        {
            "name": "Debug and Open in Browser",
            "configurations": [
                "Listen for Xdebug",
                "Open in Browser"
            ]
        }
    ]
}

关键修改说明 #

• 在PHP监听配置中添加pathMapping：将服务器上的站点根路径（b:/wamp64/www/mywebsite）映射到VS Code的工作区路径（${workspaceFolder}），确保Xdebug能将服务器端执行的文件与本地编辑器中的文件对应起来。
• 移除Chrome配置中的多余pathMapping：该项仅用于前端JS/CSS等资源的调试映射，与PHP断点无关，保留反而可能造成混淆。

额外验证步骤 #

1. 确保VS Code打开的工作区根目录是b:/wamp64/www/mywebsite，否则${workspaceFolder}会指向错误路径。
2. 检查WAMP虚拟主机的DocumentRoot配置确实为b:/wamp64/www/mywebsite，保证路径映射的准确性。

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