Youtube channel !

Be sure to visit my youtube channel

Friday, February 07, 2020

Docker, XDebug and VSCODE in Ubuntu

Installing XDebug under VSCode is not a very easy task, especially under the Docker environment. Here is my way of doing it. References: Docker for web developers course.



You can learn more about Docker for web development in the following course.

Here is the sample Dockerfile for creating an Apache/PHP host, enabling and then configuring xdebug:

FROM php:7.4.2-apache
RUN pecl install xdebug && docker-php-ext-enable xdebug \
# not yet in linux: xdebug.remote_host = host.docker.internal \n\
&& echo "\n\
xdebug.remote_host = 172.19.0.1 \n\
xdebug.default_enable = 1 \n\
xdebug.remote_autostart = 1 \n\
xdebug.remote_connect_back = 0 \n\
xdebug.remote_enable = 1 \n\
xdebug.remote_handler = "dbgp" \n\
xdebug.remote_port = 9000 \n\
xdebug.remote_log = /var/www/html/xdebug.log \n\
" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini

here is the service allowing port 8000 to be accesed outside:
docker-compose.yaml
version: "3.7"
services:
apache_with_php:
build: .
volumes:
- ./:/var/www/html/
ports:
- "8000:80"

and here is the configuration for debug (F5) inside of VSCode:
.vscode/launch.json
{
"version": "0.2.0",
"configurations": [

{
"name": "Listen for XDebug",
"type": "php",
"request": "launch",
"port": 9000,
"pathMappings": {
"/var/www/html/": "${workspaceFolder}"
},
}
]
}

Don't forget the most important thing, to enable reverse port 9000 on the host running xdebug, in order for the container to be able to connect to this port:

sudo ufw allow in from 172.19.0.0/16 to any port 9000 comment xdebug

Then we just build and run the container
/usr/bin/docker-compose up

For debugging purposes we can enter inside the container using bash shell:
docker exec -it php-debug_apache_with_php_1 /bin/bash
in the xdebug.log file we can find useful information for the initialization of xdebug: cat xdebug.log

then just browse: http://127.0.0.1:8000/index.php, place some breakpoint inside the index.php file, press F5 and refresh the web page to see the debugger (xdebug) running.

Congratulations and enjoy the course!

4 comments:

Rajendran Thunoli said...

Thanks for your post.

Should I install "PHP Xdebug" extension in vscode for this to work?

Thank you

Anonymous said...

Cusrrent version Xdebug > 3 does not work with this Dockerfile. You need older version like

RUN pecl install xdebug-2.9.8

vinser said...

With xdebug 3.0.1 this Dockerfile works for me
-------------------------------
FROM php:7-apache
RUN pecl install xdebug && docker-php-ext-enable xdebug \
&& echo "\n\
xdebug.mode = debug \n\
xdebug.start_with_request = yes \n\
xdebug.client_host = host.docker.internal \n\
xdebug.discover_client_host = false \n\
xdebug.client_port = 9003 \n\
xdebug.log = /var/www/html/xdebug.log \n\
" >> /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini
-------------------------
I use robberphex.php-debug extension as it works with vscode v1.52.0 - can set line breakpionts when felixbecker's does not support new dreakpoints settings.
Don't forget to change 9000 port to 9002 in launch.json

Nevyan Neykov said...

@vinser
did you understand why does felixbecker's extension is not supporting setting up breakpoints ?

Subscribe To My Channel for updates

Integrating AI code helpers into Visual Studio Code

In this guide, we’ll walk through setting up a local AI-powered coding assistant within Visual Studio Code (VS Code). By leveraging tools s...