XDebug not working with WordPress container when folder mapped

Question

I have a WordPress running on a docker-composer, and I would like to be able to debug it.

I used this repository as a basis Wordpress Docker xDebug Boilerplate and I have changed some things.

This is my docker-compose:

version: '3.9'

services:

  db:
    platform: linux/x86_64
    image: mysql:8.0
    container_name: db
    command: --default-authentication-plugin=mysql_native_password
    restart: always
    ports:
      - 3306:3306
    environment:
      MYSQL_USER: db_user
      MYSQL_PASSWORD: db_password
      MYSQL_DATABASE: db_name
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - db_data:/var/lib/mysql

  wordpress:
    depends_on:
      - db
    build: .
    image: wordpress:latest
    restart: always
    ports:
      - 8888:80
    env_file: .env
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: db_name
      WORDPRESS_DB_USER: db_user
      WORDPRESS_DB_PASSWORD: db_password
      PHP_EXTENSION_XDEBUG: wp_password
    volumes:
      - wp_data:/var/www/html
      - ./wp-content/:/var/www/html/wp-content/

volumes:
  db_data:
  wp_data:

My Dockerfile:

FROM wordpress:latest

RUN pecl install xdebug \
    && docker-php-ext-enable xdebug \
    && echo "xdebug.mode=debug" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini \
    && echo "xdebug.client_host = host.docker.internal" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

And I have some content inside a folder I called wp-content, that I have created at the root of the project:

• a folder plugins
  • a index.php file
• a folder themes
  • a folder default
    • a index.php file
    • a style.css file

My problem is: when mapping the folder wp-content, the debugger does not work. I have checked the port configuration and etc.

I am using VSCode, here is my launch.json file:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html": "${workspaceFolder}/cms"
      },
      "xdebugSettings": {
        "max_data": 65535,
        "show_hidden": 1,
        "max_children": 100,
        "max_depth": 5
      }
    }
  ]
}

However, if the content of /var/www/html is mapped entirely for another folder (for example cms), it works perfectly.

# wordpress service
    volumes:
      - './cms:/var/www/html'

How can I make the debugger work copying the wp-content to inside the WordPress container?

Answer 1

Well, the problem was that I had the wrong config at the launch.json file. My pathMapping was set to listen to cms folder.

I just had to change from $worspaceFolder}/cms to $worspaceFolder}/wp-content.

Here is the correct launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Listen for XDebug",
      "type": "php",
      "request": "launch",
      "port": 9003,
      "pathMappings": {
        "/var/www/html/wp-content": "${workspaceFolder}/wp-content"
      },
      "xdebugSettings": {
        "max_data": 65535,
        "show_hidden": 1,
        "max_children": 100,
        "max_depth": 5
      }
    }
  ]
}