Debugging with Xdebug & Visual Studio Code

In no way is this meant to be a tutorial, more of a resource of how I managed to set this up. If it’s useful to others then that makes me happy 🙂

This setup assumes you are running Valet and have PHP running with Xdebug on a Mac. There are smarter people than I out there who have written easy ways to get them working together, I used Gabor Javorszky article to help me set mine up… https://javorszky.co.uk/2018/05/03/getting-xdebug-working-on-php-7-2-and-homebrew/

One thing you will need to ensure you have set in your Xdebug settings is the following, which will either be in your php.ini file or a separate Xdebug.ini depending on where your Xdebug settings are stored, just make sure this is set…

xdebug.remote_enable = 1

If you make any changes to your php.ini or other settings you probably need to restart your server, in my case and for Valet users it’s…

$ valet restart

You’ll need to install/enable Felix Becker’s PHP Debug extension for Visual Studio Code as well, simply click the Extensions icon and search for ‘PHP Debug Felix Becker’

Open your WordPress working directory in Visual Studio Code by dragging the root folder on to VSC

Click the debug icon…

Then add a PHP configuration to the launch.json file that gets dropped into your root folder…

Add this snippet into the first setting block named “Listen for XDebug” making sure you change the root directory to reflect the path to your locally hosted files…

"pathMappings": {
    "/Users/elliottrichmond/valet-sites/wptest": "${workspaceRoot}"
}

You can use the built-in terminal to find that if you’ve dragged the whole folder on to VSC as mentioned earlier, if not you can simply ‘cd’ in to the root of your local files and use the ‘pwd’ command to reveal the path of your root folder, in my case I did the following but remember your path will be different…

$ pwd
/Users/elliottrichmond/valet-sites/wptest

The full snippet for the setting will look something like this…

{
    "name": "Listen for XDebug",
    "type": "php",
    "request": "launch",
    "port": 9000,
    "pathMappings": {
        "/Users/elliottrichmond/valet-sites/wptest": "${workspaceRoot}"
    }
},

Set a breakpoint in one of your WordPress theme files or plugin files, shown as a red marker to the left of code line count…

Click the Debug icon…

Then click the green play icon next to ‘Listen for XDebug’

This should change the colour of VSC status bar at the bottom of the window, in my theme it goes from blue to orange…

Now load the site in a browser and VSC should break at your breakpoint showing you all the stored variables to that point, you can then debug further by stepping into and over functions or whatever you need to do.

Here is a screen recording of all the steps I made…

You will need to take the exact same steps per individual site as the launch.json isn’t created by default.

Happy debugging!

Leave a comment

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