Issues when Debugging PHP in VSCode using Docker and WSL2

Question

I've been working with VSCode + Docker in Windows for some years now, and managed to have a fully working dev environment without any issues.

Recently i setup a new development environment with WSL2. Moved all my projects, libraries, CLIs, etc, into WSL, using Docker Windows with WSL2 containers and VSCode on Windows with remote connection to WSL. Everything is working very smoothly and i like the fact i can have everything separated.

But recently i came across an issue that i'm unable to solve, i lost the ability to debug PHP files. I'm using VSCode Remote WSL extension to work on my projects inside WSL, but when i try to debug, nothing happens.

I have tree debugging settings in my VSCode for each dev environment that i use (Windows, MacOS and WSL). All work except for the WSL. When i try to debug with WSL, literally nothing happens, no output erros, no debug console information, nothing...

Here are my VSCode debug settings:

{
    "version": "0.2.0",
    "configurations": [{
            "name": "Listen for XDebug Win10",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "log": true,
            "externalConsole": false,
            "pathMappings": {
                "/var/www/project-a/api": "\\\\wsl$\\Ubuntu\\home\\ubuntu\\PROJECTS\\project-a\\api",
            },
            "ignore": [
                "**/vendor/**/*.php"
            ]
        },
        {
            "name": "Listen for XDebug MacOS",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "log": true,
            "externalConsole": false,
            "pathMappings": {
                "/var/www/project-a/api": "/Users/ricky/PROJECTS/project-a/api",
            },
            "ignore": [
                "**/vendor/**/*.php"
            ]
        },
        {
            "name": "Listen for XDebug WSL",
            "type": "php",
            "request": "launch",
            "port": 9000,
            "log": true,
            "externalConsole": false,
            "pathMappings": {
                "/var/www/project-a/api": "/home/ubuntu/PROJECTS/project-a/api",
            },
            "ignore": [
                "**/vendor/**/*.php"
            ]
        },
    ]
}

What am i doing wrong? Any ideas on how to solve this issue?

### UPDATE: I've changed the original right answer to a new one. Although @romain-prevost's solution worked, I think @dark's approach is wayyy much simpler :)

Answer 1

Forget about the other answers. They are working but too complicated in my opinion.

The problem is, that you can't connect to xdebug.

The solution is to tell xdebug to set remote_host to host.docker.internal. Everything from there is available to localhost. Now you only have to listen inside Visual Studio Code to localhost via hostname.

Et voilà. Now you can debug things invoked by your browser, inside your phpunit tests or within your commandline scripts.

Complete Example

launch.json

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

php.ini

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
xdebug.remote_host = host.docker.internal
xdebug.remote_port = 9000

Update for XDebug 3

launch.json

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

php.ini

[XDebug]
xdebug.mode = develop
xdebug.start_with_request = yes
xdebug.client_host = host.docker.internal
xdebug.client_port = 9003