Xdebug in WordPress Studio

Xdebug is a debugging extension for PHP that enables you to set breakpoints, inspect variables, and step through your code. WordPress Studio includes Xdebug support as a beta feature, powered by WordPress Playground’s WebAssembly version of PHP.

Enabling Xdebug

Xdebug must be enabled in two places: first in the Studio application settings, then for individual sites.

Enable Xdebug in Studio (Beta Feature)

1. Click Studio in the menu bar
2. Open “Beta Features” menu
3. Toggle “Xdebug Support” to enable the feature
4. The Xdebug option will now appear in the settings for each site

Enable Xdebug for a site

1. Select the site you want to debug
2. Navigate to the Settings tab
3. Click “Edit site“
4. Check the “Enable Xdebug” checkbox
5. Click Save

The site will restart automatically with Xdebug enabled.

Important limitations

• Only one site at a time: Xdebug can only be enabled for a single site at once. To enable it for a different site, you must first disable it on the current site.
• Performance impact: Xdebug may slow down site performance. Disable it when not actively debugging.

Using Xdebug with your IDE

Once Xdebug is enabled for a site, you can connect your IDE (code editor) to debug WordPress plugins, themes, and core code.

VS Code setup

1. Install the PHP Debug extension
2. Create a .vscode/launch.json file in your project with the following configuration:

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

3. Set breakpoints in your code
4. Start the debugging session in VS Code (Run → Start Debugging)
5. Navigate to your site in the browser to trigger the breakpoints

PhpStorm Setup

1. Go to Settings → PHP → Debug
2. Verify that the Xdebug port is set to 9003
3. Enable “Start listening for PHP Debug Connections” from the toolbar
4. Set breakpoints in your code
5. Navigate to your site in the browser to trigger the breakpoints

Learn more

For additional information about Xdebug integration, see the WordPress Playground Xdebug documentation.