WordPress debugging with XDebug and Visual Studio Code on Windows

wpdebug.md

Xdebug Setup for WordPress and VS Code on Windows

Step 1: Install Xdebug

1. Copy phpinfo() output and paste it into Xdebug Wizard.
2. Download xdebug.dll.
3. Copy the DLL to your PHP ext folder.
4. Add the following configuration to your php.ini:

[xdebug]
zend_extension = xdebug
xdebug.mode = develop,debug
xdebug.start_with_request = yes
xdebug.client_host = 127.0.0.1
xdebug.client_port = 9003
xdebug.var_display_max_depth = 5
xdebug.var_display_max_children = 256
xdebug.var_display_max_data = 1024
xdebug.cli_color = 1
xdebug.overload_var_dump = 1

Step 2: Install VS Code Extensions

• PHP Intelephense
• PHP Debug (Xdebug)
• EditorConfig
• DotENV

Step 3: Configure VS Code for WordPress

In your WordPress root folder, create a .vscode folder with the following files:

1. launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for Xdebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "C:/laragon/www/wp": "${workspaceFolder}"
      }
    }
  ]
}

2. settings.json

{
  "intelephense.environment.includePaths": [
    "wp-includes", 
    "wp-admin"
  ],
  "intelephense.phpVersion": "8.1",
  "intelephense.diagnostics.undefinedTypes": false
}