Why can't I debug my PHP code on docker with VS Code using Xdebug v3?

Question

I am trying to build a small environment to test PHP debugging in docker with Visual Studio Code. My idea is to create a model that I can use for the several PHP systems we have here at the company. However, I haven’t been able to debug or use breakpoints… It’s like VSCode is disconnected from Xdebug.

This is my Dokerfile

FROM php:7.4-apache

RUN apt-get update && apt upgrade -y
RUN docker-php-ext-install pdo mysqli pdo_mysql \
&& docker-php-ext-enable mysqli 
RUN pecl install xdebug-3.1.5 \
&& docker-php-ext-enable xdebug
ADD ./app /var/www/html
COPY ./app/test-form.conf /etc/apache2/sites-available/test-form.conf

# Copy php.ini
COPY ./php.ini /usr/local/etc/php

RUN echo 'SetEnv MYSQL_DB_CONNECTION ${MYSQL_DB_CONNECTION}' >> /etc/apache2/conf-enabled/environment.conf
RUN echo 'SetEnv MYSQL_DB_NAME ${MYSQL_DB_NAME}' >> /etc/apache2/conf-enabled/environment.conf
RUN echo 'SetEnv MYSQL_USER ${MYSQL_USER}' >> /etc/apache2/conf-enabled/environment.conf
RUN echo 'SetEnv MYSQL_PASSWORD ${MYSQL_PASSWORD}' >> /etc/apache2/conf-enabled/environment.conf
RUN echo 'SetEnv SITE_URL ${SITE_URL}' >> /etc/apache2/conf-enabled/environment.conf
RUN echo "ServerName localhost" >> /etc/apache2/apache2.conf &&\
    a2enmod rewrite &&\
    a2enmod headers &&\
    a2enmod rewrite &&\
    a2dissite 000-default &&\
    a2ensite test-form &&\
    service apache2 restart

This is my docker-compose.yml

version: "1"
services:
  webserver:
    image: form-test
    ports:
      - "80:80"
      # - "443:443"
    volumes:
      - ./app:/var/www/html
    extra_hosts:
      - "host.docker.internal:host-gateway"
    environment:
      MYSQL_DB_CONNECTION: test
      MYSQL_DB_NAME: test
      MYSQL_USER: test
      MYSQL_PASSWORD: test
      SITE_URL: http://localhost
      XDEBUG_MODE: develop,debug
      XDEBUG_CONFIG:
        client_host=host.docker.internal
        start_with_request=yes
networks:
  internal:
    driver: bridge

This is my xdebug_info.php

<?php

// xdebug_info();

phpinfo();

This is my php.ini

[xdebug]
zend_extension=xdebug
xdebug.mode=develop,debug
xdebug.start_with_request=yes
xdebug.remote_port=9003
xdebug.client_port=9003
xdebug.remote_host=host.docker.internal

This is my launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen on Docker for Xdebug",
            "type": "php",
            "request": "launch",
            "port": 9003,
            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            },
            "hostname": "0.0.0.0"
        },    
    ]
}

Now this is weird… seems that Xdebug is successfully connecting to VSCode because when I launch my xdebug_info.php it shows this message:

When I start listening on VSCode, the message disappear:

I also noticed that the blue bottom bar in VS Code doesn't turn orange like it should. After building up my environment and not being able to make it work.

Answer 1

It seems Xdebug is alreday connecting to vscode and starts a debugging session. So the comment by zobo is probably right: it is just a path mapping issue.

And indeed, in your docker-compose.yml you are bind mounting

    volumes:
      - ./app:/var/www/html

but in your launch.json config you have

            "pathMappings": {
                "/var/www/html": "${workspaceFolder}"
            },

So - assuming docker-compose.yml is in the root folder, which is also the workspace folder for vscode - you actually need to map

            "pathMappings": {
                "/var/www/html": "${workspaceFolder}/app"
            },