文件夹映射时，XDebug 无法使用 WordPress 容器

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

I had to add loads of config before mine magically worked: after PECL install

# install xdebug
RUN echo "zend_extension=/usr/local/lib/php/extensions/no-debug-non-zts-20160303/xdebug.so" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "error_reporting = E_ALL" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "display_startup_errors = On" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "display_errors = On" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

RUN echo "xdebug.idekey=\"PHPSTORM\"" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_port=9000" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_enable=1" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_autostart=1" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo "xdebug.remote_host=docker.for.win.localhost" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
RUN echo 'xdebug.mode=debug' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.client_host=host.docker.internal' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.remote_autostart=0' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.remote_enable=1' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.default_enable=0' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.remote_host=host.docker.internal' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.remote_port=' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.remote_connect_back=0' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.profiler_enable=0' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.remote_log="/tmp/xdebug.log"' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.profiler_output_dir="/var/www/html/profiler"' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.profiler_output_name="cachegrind.out.%p"' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.cli_color=1' > /usr/local/etc/php/php.ini
RUN echo 'xdebug.profiler_append=1' > /usr/local/etc/php/php.ini

Answer 2

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
      }
    }
  ]
}