Revision history [back]

To debug WordPress utilizing a Virtual Host on WAMP in Visual Studio Code, the following steps can be taken:

1. Open the WordPress project in Visual Studio Code.

2. Open the "launch.json" configuration file by going to the "Debug" tab on the sidebar and clicking on the gear icon next to "No Configurations."

3. In the "launch.json" file, create a new configuration by copying the existing configuration and pasting it below.

4. Rename the new configuration to something like "Debug WordPress on WAMP."

5. Under the "configurations" object, locate the "program" property and change the value to the path of the WordPress index.php file.

Example:

"program": "${workspaceFolder}/public_html/index.php",

1. Next, add the following properties to the configuration:

"serverReadyAction": {
    "pattern": "development server started at",
    "uriFormat": "http://%hostname%:8080"
},
"runtimeExecutable": "C:/wamp/bin/php/php7.3.12/php.exe",
"runtimeArgs": [
    "-dzend_extension=xdebug.so",
    "-dxdebug.mode=debug",
    "-dxdebug.start_with_request=yes",
    "-dxdebug.client_port=9000",
    "-dxdebug.log=/tmp/xdebug.log",
    "-dxdebug.idekey=VSCode"
],
"env": {
    "DB_HOST": "localhost",
    "DB_NAME": "wordpress",
    "DB_USER": "root",
    "DB_PASSWORD": "",
    "WP_DEBUG": "true",
    "WP_HOME": "http://myvhost.local",
    "WP_SITEURL": "http://myvhost.local/wp"
}

The "serverReadyAction" property is used to configure how Visual Studio Code detects when the server is ready to start debugging.

The "runtimeExecutable" property points to the PHP executable installed by WAMP. Change the path to match the version of PHP you're using.

The "runtimeArgs" property contains the configuration for Xdebug, which is what Visual Studio Code uses to debug PHP.

The "env" property is used to set environment variables for WordPress.

1. Save the "launch.json" file.

2. Start the WAMP server and make sure the Virtual Host is setup correctly.

3. In the "Run" tab of Visual Studio Code, select "Debug WordPress on WAMP" and click the "Start Debugging" button.

4. Visual Studio Code should open a new Chrome window and load the WordPress website. If everything was configured correctly, you should now be able to set breakpoints, step through code, and inspect variables while debugging WordPress.