xDebug not working using docker, vscode and WSL 2

Question

I am not sure what the issue is, it just doesn't work.

The routing seems to work, I have a server name in my nginx conf file. e.g. test.com. that works.

My project is in the root of ubuntu and not in the mount folders.

I am not sure what else to try.

xdebug.ini

[XDebug]
zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20190902/xdebug.so

xdebug.default_enable=1
xdebug.remote_enable=1
xdebug.remote_port=9002
xdebug.remote_handler=dbgp
xdebug.remote_connect_back=0
xdebug.remote_host=soapboxtest.com
xdebug.idekey=VSCODE
xdebug.remote_autostart=1
xdebug.remote_log=/usr/local/etc/php/xdebug.log

launch.json

{
  "name": "Listen for XDebug",
  "type": "php",
  "request": "launch",
  "port": 9002,
  "log": true,
  "externalConsole": false,
  "pathMappings": {
    "/var/www": "${workspaceRoot}"
  },
  "ignore": [
    "**/vendor/**/*.php"
    ]
  },

Request cookies

"XDEBUG_SESSION" => "VSCODE"

Dockerfile

FROM php:fpm-alpine3.11
...
RUN pecl install xdebug
RUN docker-php-ext-enable xdebug
...

Answer 1

This happened to me also and found that XDEBUG is not looking for the Docker Daemon Host. Got it fixed by adding:

"hostname": "0.0.0.0"

As part of the general options of the launch.json on VS Code.

Answer 2

After had a colleague helping me to configure Xdebug to listen out of WSL Remote environment from VSCode, I´ve looked up for an option that is opened when you click on the WSL Remote icon on the lower left side of the IDE:

Remote-WSL: Show Log

It opens a WSL terminal, which shows (between several infos) the IP Address that WSL is using. Adding this WSL IP to the xdebug.remote_host value, the only thing left to get Xdebug running correctly from your Docker container, inside your WSL2 environment (from WSL Remote VSCode extension), is adjusting your application path inside the launch.json file.

For that, clicking with the right-button mouse at the launch.json file tab, search and click on the "Copy path" option, and then paste it inside the pathMappings setting, like this sample (don´t forget to adjust the path removing the info relative to launch.json itself, it's for your application path!):

"pathMappings": {
      "/application": "paste here the path you've copied"
 }

Try it, for me worked like a charm. And if it work for you too, vote for my answer!