My Layout

I’m connecting from VSCode running on Windows 10 Pro to the Linux host via SSH. The Linux Host has the project files and there is a docker container running on the Linux Host which provides the LAMP stack development environment.

This is how I got XDebug working

+---------------------------------------+
|  Windows 10 Pro with VSCode Installed |
+-------------10.19.80.115--------------+
                    |
                   SSH
                connection
                    |
   +----------10.97.30.108------------+
   |   Linux Host with project files  |
   |  /home/jm/onedrive/sites/100pbc  |
   |                |                 |
   |    +---------Docker---------+    |
   |    |       172.17.0.1       |    |
   |    |           |            |    |
   |    |     docker network     |    |
   |    |           |            |    |
   |    |       172.17.0.2       |    |
   |    |  [ Docker container ]  |    |
   |    |                        |    |
   |    +------------------------+    |
   +----------------------------------+

Project files on Linux host: /home/jm/onedrive/sites/100pbc
Path to project files in docker container: /var/www/100pbc

VSCode Extensions

• VScode instance running on Windows 10 Pro install the PHP Debug extension by Felix Becker ext install php-debug
• You also need "Visual Studio Code Remote Development Extension Pack" to allow for SSH to remote host

XDebug

In the docker container compile and install Xdebug 3

Use the install instructions that come in the php-debug extension in VSCode

Add the following to /etc/php/7.4/apache/php.ini and /etc/php/7.4/cli/php.ini in the Docker container. Adding the configuration to both the apache and cli areas allows you to debug your tests from the command line as well as get debbugging information when navigating your site via a browser.

Note: Make sure you restart the container when you make changes.

Set xdebug.client_host to the docker IP address of the Linux host

**Note: ** xdebug.remote_host didn’t seem to work perhaps it is an old version 2 setting. But xdebug.client_host did.

[xdebug]
xdebug.mode = debug
xdebug.remote_enable = 1
; xdebug.remote_connect_back = 1
; xdebug.remote_host = 172.17.0.1
; this 
xdebug.client_host=172.17.0.1
xdebug.idekey = "VSCODE"
xdebug.client_port = 9000
xdebug.remote_autostart = 1
xdebug.start_with_request = yes
xdebug.log=/tmp/xdebug-local.log

Check your setup by adding a file with phpinfo(); into somewhere accessible to your containers Webserver. You should see XDebug listed

Configure launch.json

/home/jm/onedrive/sites/100pbc/.vscode/launch.json on the remote linux host

hostname: is set so the XDebug client in VSCode will listen to the docker IPv4 Address of the Linux host

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "hostname": "172.17.0.1",
            "pathMappings": {
                "/var/www/100pbc/": "${workspaceRoot}/"
            },
           "log": true
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

Troubleshooting

If you have done the above and your break-points are not being hit

Check that the pathMappings settings map to real files in both the container and on the SSH’d host

Container Path

/var/www/100pbc/src/Controller/PagesController.php <= this needs to exist

SSH Host Path

The workspaceRoot is the folder you have open in VSCode

${workspaceRoot}/src/Controller/PagesController.php

/home/jmcd/dev/project1/src/Controller/PagesController.php <= this needs to exist

{  
   "configurations": [
        {
            // ... other settings
            "pathMappings": {
                "/var/www/100pbc/": "${workspaceRoot}/"
            },
        },
}