Debug Yii 1.1 using VSCode and Docker

Question

I want to ask about debugging Yii 1.1 applications. I've tried implementing the answers on StackOverflow and other websites, but my VSCode still can't debug the application, the breakpoints that have been set are never read at all. I am using Docker to run Yii.

Here are the details of the file I used.

docker-compose.yml

version: '3'
services:
  web:
    container_name: php72
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8000:80"
    volumes:
      - ./:/var/www/html
      - ./xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
    networks:
      - app-network

  mysql:
    image: mysql:8.0.31-oracle
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: '123456'
      MYSQL_USER: 'admin'
      MYSQL_PASSWORD: '123456'
      MYSQL_DATABASE: 'test_db'
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - 3306:3306
    networks:
      - app-network

networks:
  app-network:

volumes:
  db_data:

Dockerfile

FROM php:7.2-apache

ADD https://github.com/mlocati/docker-php-extension-installer/releases/latest/download/install-php-extensions /usr/local/bin/

RUN chmod +x /usr/local/bin/install-php-extensions && \
    install-php-extensions gd xdebug pdo pdo_mysql pdo_pgsql mongodb mbstring zip


EXPOSE 80

xdebug.ini

zend_extension=xdebug

[xdebug]
xdebug.mode=debug
xdebug.discover_client_host=1
xdebug.idekey=VSCODE
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.remote_host="host.docker.internal"

launch.json

{
    // 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": 9003
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 0,
            "runtimeArgs": [
                "-dxdebug.start_with_request=yes"
            ],
            "env": {
                "XDEBUG_MODE": "debug,develop",
                "XDEBUG_CONFIG": "client_port=${port}"
            }
        },
        {
            "name": "Launch Built-in web server",
            "type": "php",
            "request": "launch",
            "runtimeArgs": [
                "-dxdebug.mode=debug",
                "-dxdebug.start_with_request=yes",
                "-S",
                "localhost:8001"
            ],
            "program": "",
            "cwd": "${workspaceRoot}/../../",
            "port": 9003,
            "serverReadyAction": {
                "pattern": "Development Server \\(http://localhost:([0-9]+)\\) started",
                "uriFormat": "http://localhost:%s",
                "action": "openExternally"
            }
        }
    ]
}

And here is my project structure:

I access my apps in a browser with localhost:8000, then I try to turn on the VSCode debugger, but this is the result:

Any help is very much appreciated.

Is there any missing configuration?

Answer 1

After watching several videos on how to setup Xdebug for an application running inside a docker container, I finally found the answer that works for my case.

I changed my docker-compose.yml to be like this:

version: '3'
services:
  web:
    container_name: php72
    build:
      context: .
      dockerfile: Dockerfile
    extra_hosts:
      - "host.docker.internal:host-gateway" // Add extra host for docker
    ports:
      - "8000:80"
    volumes:
      - ./:/var/www/html // this is the remote path where my apps installed
      - ./xdebug.ini:/usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
    networks:
      - app-network

  mysql:
    image: mysql:8.0.31-oracle
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: '123456'
      MYSQL_USER: 'admin'
      MYSQL_PASSWORD: '123456'
      MYSQL_DATABASE: 'wms_test'
    volumes:
      - db_data:/var/lib/mysql
    ports:
      - 3306:3306
    networks:
      - app-network

networks:
  app-network:

volumes:
  db_data:

And as per as @LazyOne advise, since I am using Xdebug 3 I have change my xdebug.ini also to be like this:

zend_extension=xdebug

[xdebug]
xdebug.mode=develop,debug
xdebug.start_with_request=yes
xdebug.client_port=9003
xdebug.client_host=host.docker.internal
xdebug.idekey="VSCODE"
xdebug.log=/tmp/xdebug_remote.log

And the important part, after watching this YouTube video Setup Xdebug WITH DOCKER and debug in VSCode I've figured out what is missing in my previous setup, and that is the pathMapping. So I've changed my launch.json to be like this:

{
    // 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": 9003,
            "pathMappings": {
                "/var/www/html" : "${workspaceFolder}"
            }
        }
    
    ]
}

And voila that work like a charm: