How to configure Docker wpdiaries/wordpress-xdebug:latest with VS Code PHP Debug?

I want to configure VS Code Xdebug plugin to work with Xdebug inside a WordPress Docker container.

I have an issue with the ports.

If I specify on the WP-with-Xdebug container in the "ports" section of the docker-compose.yml file:

- "9009:9000"

And in the environment variable XDEBUG_CONFIG on the same container:

XDEBUG_CONFIG: remote_host=172.17.0.1 mode=debug start_with_request=true client_port=9000

Then in the launch.json file of the VS Code plugin config I put this line:

"port": 9009

Then, when I run docker-compose down and then docker-compose up, I see that the docker-compose up log is good, no errors are in it. Then I click on the green Play icon before the option "Listen for Xdebug" I get the message box with:

listen EADDRINUSE: address already in use :::9009

I think that both the WP container with Xdebug in it and the VS Code plugin want to use the same port on the host 9009 to do the same think, send information to one another, but I do not understand why they do not succeed.

I did not put here the output of phpinfo() because it contains sensible information.

I use:

1. https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug
2. https://github.com/xdebug/vscode-php-debug
3. wpdiaries/wordpress-xdebug:latest Docker image (https://hub.docker.com/r/wpdiaries/wordpress-xdebug or https://github.com/wpdiaries/wordpress-xdebug)
4. Xdebug v3
5. latest stable version of WordPress and PHP v8.0.3

I did not try a lot but a little of this: https://github.com/mac-cain13/xdebug-helper-for-chrome and I don't think it helps me in this issue.

This is a filtered version of my docker-compose.yml:

version: '3.3'
 
services:
  db:
    container_name: "db_1"
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: "no"
    environment:
      MYSQL_DATABASE: "wordpress"
      MYSQL_USER: "root"
      MYSQL_ROOT_PASSWORD: "9821379"

  wordpress:
    container_name: "wordpress_1"
    depends_on:
      - db
    image: wpdiaries/wordpress-xdebug:latest
    ports:
      - "80:80"
      - "9009:9000"
    volumes:
      - type: bind
        source: ./html
        target: /var/www/html
        volume:
          nocopy: true
    restart: "no"
    environment:
      WORDPRESS_DB_NAME: "wordpress"
      WORDPRESS_DB_USER: "root"
      WORDPRESS_DB_PASSWORD: "9821379"
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_TABLE_PREFIX: 'wp_'
      XDEBUG_CONFIG: remote_host=172.17.0.1 mode=debug start_with_request=true client_port=9000

  phpmyadmin:
    container_name: "phpmyadmin_1"
    depends_on:
      - db
    restart: "no"
    ports:
      - "8080:80"
    image: phpmyadmin/phpmyadmin
    environment:
      PMA_HOST: db:3306
      PMA_USER: "root"
      PMA_PORT: 3306
      PMA_PASSWORD: "9821379"

volumes:
  db_data: {}

This is my launch.json file:

{
  // 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": 9009,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}/html"
      }
    },
    // the following is not used and not updated:
    {
      "name": "Launch currently open script",
      "type": "php",
      "request": "launch",
      "program": "${file}",
      "cwd": "${fileDirname}",
      "port": 9003
    }
  ]
}

Articles I've tried more or less:

1. https://dev.to/natterstefan/docker-tip-how-to-get-host-s-ip-address-inside-a-docker-container-5anh
2. https://dzone.com/articles/setup-wordpress-debug-environment-with-docker-and
3. https://www.wpdiaries.com/wordpress-with-xdebug-for-docker/#using-a-ready-made-image

I've rebooted my laptop and the same issue appears again.

Until I get a reaction to this post I think I will read the docs here: https://xdebug.org/docs/step_debug.