WordPress 调试 – Visual Studio Code

上一篇文章介绍了如何使用 PhpStorm 对 WordPress 做调试的方法，本篇文章介绍另一个常用的 IDE 工具 – Visual Studio Code，详细说明一下调试 WordPress 的配置方法。

系统调试环境和上一篇文章的配置一样，也是客户/服务器的方式。服务器端是 Linux系统，客户端是 Windows 系统。

服务器端 Xdebug 的配置请参考上一篇文章的相关内容，配置方法是一样的。下面着重介绍本地（客户端）Visual Studio Code 的配置。

首先要安装一个插件 Php Debug，该插件支持使用 Xdebug 调试 Php 代码。

左边菜单选择那个调试的图标（Run and Debug Ctrl+Shift+D），或者主菜单 View->Run，创建一个运行调试器的配置脚本，launch.json，内容如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "stopOnEntry": false,
            "pathMappings": {
                "server": "192.168.186.152",
                "/home/user/www/wordpress/": "${workspaceRoot}/",
            }
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 0,
            "runtimeArgs": [
                "-dxdebug.start_with_request=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        }
    ]
}

然后把 WordPress 代码拷贝到本地的一个目录下，Visual Studio Code 中打开这个目录，保存到工作空间中，主菜单 File->Save Workspace As…。

最后就可以设置断点开始调试了，主菜单 Run->Start Debugging，启动调试器。