1

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
Khalid_Mh
  • 69
  • 7
  • Check https://stackoverflow.com/q/65218727/783119 for possible hints. – LazyOne Nov 19 '22 at 17:51
  • You say you see this in Xdebug log (*"Could not connect to debugging client. Tried: host.docker.internal:9000"*). But your xdebug.ini has `xdebug.client_port=9003` (BTW it's not needed as 9003 is the default port anyway). As you can see they are different. Please check where `9000` port comes from. Could be some Sail config .. or passed via one of the Xdebug env variables... – LazyOne Nov 19 '22 at 17:57
  • sorry, It was actually 9003 I just pasted a previous error. – Khalid_Mh Nov 19 '22 at 21:57
  • 1
    Thank You, I was able to make it work after I read through the GitHub discussion – Khalid_Mh Nov 19 '22 at 22:33

1 Answers1

3

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.

Khalid_Mh
  • 69
  • 7