XDebug + VVV + Visual Studio Code Setup For WordPress Development

This post explains how you can get xDebug to work with VVV and Visual Studio Code. There are essentially three main steps to get it to work:

  1. Install VVV and enable xDebug.
  2. Install the xDebug browser extension (available for Firefox and Chrome as far as I know).
  3. Add the correct config in Visual Studio Code (explained in this post).

Step 1

Once you install VVV, you will obviously cd into the vagrant-local directory and then run vagrant up to start the server.

At this point, you’ll need to SSH into vagrant by typing in the command vagrant ssh. And then turn xDebug on by running the command xdebug_on.

This only has to be done once and not every single time you run vagrant up.

Step 2

Install the xDebug browser extension. Links are included above. This is pretty straight-forward and there’s no special configuration needed other than installing the browser extension.

Step 3

Add the correct debug configuration in Visual Studio Code. My current configuration is as follows for the wordpress-one folder in VVV:

The important part there is pathMappings:

"pathMappings": {
    "/srv/www/wordpress-one/public_html": "${workspaceFolder}",

What does this mean? If I understand it correctly, it means: map this WordPress install /srv/www/wordpress-one/public_html to the currently open folder ${workspaceFolder} in Visual Studio Code.

This also means, in order for it to work, you have to open /srv/www/wordpress-one/public_html in Visual Studio Code when you wish to run xDebug. I hope that makes sense.

Step 4

Provided everything is setup correctly in Steps 1 to 3, you should now be able to add breakpoints in your code in VSCode, turn on xDebug (using F5) in VSCode and then finally load the web-page in your browser (running the xDebug extension) that triggers that particular code containing your break point.

Leave a Reply

Your email address will not be published. Required fields are marked *