On the previous post we created an Apache/PHP Docker Container with the Xdebug extension.
Now we are going to use that container to demonstrate how to debug a PHP file using VSCode.

First let's create a folder for the Dockerfile and a sample PHP file. Change the current directory to this newly created folder.

Project runs on few docker containers (below config for nginx and php) What is missing or broke with my configuration? Steps To Reproduce. Install xdebug-3.0.0beta1via PECL and enable it (on php 7.4 fpm container) write xdebug config: xdebug.mode=debug. The first -v option is copying a local xdebug.ini file inside the docker, at a location it will be read by PHP. From my image inherited from FROM php:7.4-cli, I know the folder /usr/local/etc/php/conf.d/xdebug.ini will do. This is a flexible way to play with parameters in your docker PHP config. Expect this will not work from the first time.

With your preferred editor create two files 'Dockerfile' and 'index.php', and then copy into these files the following content:

Dockerfile

index.php

You can download the above files, as a zip file here.

You should have the following folder and files structure.

Let's create the Docker Image, and the Container.

At this point our Container should be running and ready to receive requests at the port 4000.

We can proceed now to open VSCode.

On VSCode make sure to have installed the PHP Debug extension.

Next, click on Open folder... and locate the folder we just created above and select it.

You should see the two files 'Dockerfile' and 'index.php'
Open the 'index.php' file.

On the Line 6 of the index.php file, add a Breakpoint by clicking on the area at the left of the line numbers. A 'red' dot will appear indicating that the breakpoing has been set.
On the left navigation toolbar, click on the Run (Debugger) icon.
Then click on the create a launch.json file link.

A drop down will show up. Click on the PHP option.

A new file named launch.json will be created on the main area, with the content shown on the screenshot below.

The launch.json contains two debugging configurations. We are going to use the one named 'Listen for Debug'
But, before we start debugging, we need to add a new item to that configuration.
We need to add the following code, which 'maps' the folder on the Server (left), with the folder on our Local machine (right)

On the top left section, click on the 'Play' icon (green triangle)
This will 'start' a debugging session on VSCode. You can see that a new toolbar appears at the top center area of the editor. This toolbar contains the 'controls' that allow us to debug our code.
You will notice too that the bottom status bar color has changed to orange.

Now, open your preferred Browser, and go to the http://localhost:4000/index.php url.

Phpstorm Xdebug Docker Cli

VSCode will regain the focus, and will highlight the line with the breakpoint on the index.php file.
The debugging session will be on 'pause'. You can start debugging by clicking on the icons on the top toolbar.

Php Xdebug Remote

Docker Php Fpm Xdebug