Let's be honest, most of the tutorials out there on the internet helping you install Xdebug on a PHP Docker with VSCode either don't work, or magically skip important steps you can't guess because you're not Merlin.
So, I'll try here to help you install XDebug without much difficulty.

Docker image choice

Choosing your Docker image is critical because in production, you must have an up-to-date PHP version, without any useless extension that could be a potential security issue later. So, I'll just use the official PHP image and install the xdebug extension with PECL.

Create the files

Create a xdebug.ini config file:

xdebug.start_with_request=yes
xdebug.mode=develop,coverage,debug,profile
xdebug.client_host=host.docker.internal
xdebug.log_level=0

So here's my Dockerfile:

FROM php:8.4-apache

RUN pecl install xdebug && \
    docker-php-ext-enable xdebug

COPY ./xdebug.ini /usr/local/etc/php/conf.d/xdebug.ini

The click on the debug tab:

In the opened json file, delete everything and paste 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}"
       }
    }
  ]
}

This is the same config but only with the listen for xdebug part. And I added the pathMappings to tell VSCode where the code is located in the container, because xdebug to work correctly needs to map the files' location in the container with the files on your computer.

Test and run

Save and close the file and then click on this icon:

I create a test PHP file:

<?php

echo 'test';

And set a breakpoint:

Then I build and start my container:

docker build . -t xdebug
docker run --rm -it -v $(pwd):/var/www/html -p 80:80 xdebug

In your browser, you need to install xdebug extension and enable it.

Chrome/Chromium: https://chromewebstore.google.com/detail/xdebug-helper-by-jetbrain/aoelhdemabeimdhedkidlnbkfhnhgnhm

Firefox: https://addons.mozilla.org/en-US/firefox/addon/xdebug-helper-by-jetbrains/

To enable it, click on the extension's icon, then on "Debug":

And then I hit http://localhost

And there it is, the debug works!