In this tutorial we installed wordpress using docker. So if you haven’t yet set up a dev environment you can start from here.

Xdebug plugin for vscode
You need first to install the xdebug plugin for vscode.

Xdebug Chrome Extension

If you haven’t yet installed the xdebug extension for chrome you need to do it first before you continue.

Initialize launch.json

In the left bar find Run and debug section and then click on create a launch.json file

Select Docker: Debug in container

Apply configurations

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Listen for XDebug",
        "type": "php",
        "request": "launch",
        "port": 9003,
        "pathMappings": {
          "/var/www/html": "${workspaceRoot}/www",
        }
      }
    ]
  }

You need to apply these configurations.
Pay attention to “port” parameter and choose whatever your xdebug.ini use
and to “pathMappings”. Key is the absolute path on the server and the value is the location of your project locally.

Enable xdebug in chrome

Click on debug and vscode will start listening for connections.

Breakpoints

Put a breakpoint in your index.php file by clicking on the left of the line number.

Listen for xdebug connections
In the left bar find “Run and debug” section and then click on Listen for xdebug

Start debugging

Visit your website homepage and hot refresh
Your vscode editor now should have paused the execution