How do I configure Xdebug for browser usage in Laravel Sail? - laravel

Question

I created a new Laravel project with Laravel Sail using WSL + Docker Desktop; everything is working smoothly.
I wanted to set up Xdebug for browser usage but I can't get it to work.
How can I configure Xdebug inside Laravel Sail for Browser Usage? I tried some of the solutions but nothing worked for me.
Here are the steps I took:
I added this line as mentioned in the docs to my .env file :
SAIL_XDEBUG_MODE=develop,debug,coverage
then I published the docker files to my project root and added this line on the dockerfile file inside ./docker/8.1/
COPY ext-xdebug.ini /etc/php/8.1/cli/conf.d/ext-xdebug.ini
then created the file in the same directory with the following :
[xdebug]
xdebug.start_with_request=yes
xdebug.discover_client_host=true
xdebug.max_nesting_level=256
xdebug.remote_handler=dbgp
xdebug.client_port=9003
xdebug.idekey=VSCODE
xdebug.mode=debug
xdebug.client_host=host.docker.internal
then Rebuild everything in the container with:
sail build --no-cache
I installed the PHP Debug extension in VS Code and created a launch.json file with the following:
{
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003,
"pathMappings": {
"/var/www/html": "${workspaceFolder}"
}
}
]
}
Now when I try to debug a file by setting a breakpoint and running the debugger nothing is happening, the browser is not triggering VSCode.
The output of the PHP container :
Xdebug: [Step Debug] Could not connect to debugging client. Tried: host.docker.internal:9003 (through xdebug.client_host/xdebug.client_port)
The docker-compose file :
version: '3'
services:
laravel.test:
build:
context: ./docker/8.1
dockerfile: Dockerfile
args:
WWWGROUP: '${WWWGROUP}'
image: sail-8.1/app
extra_hosts:
- 'host.docker.internal:host-gateway'
ports:
- '${APP_PORT:-80}:80'
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
environment:
WWWUSER: '${WWWUSER}'
LARAVEL_SAIL: 1
XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
volumes:
- '.:/var/www/html'
networks:
- sail
depends_on:
- mariadb
- redis
- mailhog
mariadb:
image: 'mariadb:10'
ports:
- '${FORWARD_DB_PORT:-3306}:3306'
environment:
MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
MYSQL_ROOT_HOST: "%"
MYSQL_DATABASE: '${DB_DATABASE}'
MYSQL_USER: '${DB_USERNAME}'
MYSQL_PASSWORD: '${DB_PASSWORD}'
MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
volumes:
- 'sail-mariadb:/var/lib/mysql'
- './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
networks:
- sail
healthcheck:
test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
retries: 3
timeout: 5s
redis:
image: 'redis:alpine'
ports:
- '${FORWARD_REDIS_PORT:-6379}:6379'
volumes:
- 'sail-redis:/data'
networks:
- sail
healthcheck:
test: ["CMD", "redis-cli", "ping"]
retries: 3
timeout: 5s
mailhog:
image: 'mailhog/mailhog:latest'
ports:
- '${FORWARD_MAILHOG_PORT:-1025}:1025'
- '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
networks:
- sail
networks:
sail:
driver: bridge
volumes:
sail-mariadb:
driver: local
sail-redis:
driver: local

Answer 1

Thanks to #LazyOne I was able to make it work after a long day.
Here is how :
for Laravel 9.40.1 (which I currently use ) you don't need to edit any dockerfile or publishing the configuration of Sail.
just install the php debug vscode extension and create a launch.json file.
add the following configuration :
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"port": 9003,
"pathMappings": {
"/var/www/html": "${workspaceFolder}"
},
"hostname": "localhost"
}
the add two lines to your .env file :
SAIL_XDEBUG_MODE=develop,debug
SAIL_XDEBUG_CONFIG="client_host=host.docker.internal idekey=VSCODE"
Restart the containers sail restart.
Now just set your breakpoints and run the debugger and everything should be working.