Debug con PhpStorm e Symfony in una immagine Docker

Configurazione PHP/Docker

Se stai sviluppando con Symfony, installato in un docker compose e non stai ancora utilizzando il debugger, allora quest'articolo è per te. Ti mostreremo come preparare il tuo ambiente così da non dover più usare dd() o var_dump. Una volta provate le gioie del debug, non potrai più farne a meno, poiché migliorerà notevolmente il tuo comfort.

Per questo articolo è necessario disporre di un'app Symfony supportata da apache/php (o nginx e fpm, non importa) con un file docker-compose.yml

Il primo passo è installare xdebug e configurare il tuo ambiente PHP. Se non lo hai già fatto, ecco gli elementi che devi aver installato nel tuo Dockerfile.

RUN pecl install xdebug-3.1.6 && docker-php-ext-enable  xdebug;

Nota che se stai utilizzando PHP 8.1 dovrai installare la versione 3.2.0

RUN pecl install xdebug-3.2.0 && docker-php-ext-enable  xdebug;

Personalmente, configuro il mio php.ini direttamente copiando il file dalla build del Dockerfile.

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

Ecco il suo contenuto, sentiti libero di installarlo come preferisci.

; conf/php.ini
date.timezone = Europe/Paris

opcache.enable = 1
opcache.enable_cli = 1
opcache.memory_consumption = 256
opcache.max_accelerated_files=20000
opcache.revalidate_freq = 0

upload_max_filesize = 16M
post_max_size = 16M

realpath_cache_size = 4096k
realpath_cache_ttl=600

display_errors = Off
display_startup_errors = Off
max_execution_time=5000
memory_limit = -1

xdebug.mode=debug,develop,trace
xdebug.idekey=docker
xdebug.start_with_request=yes
xdebug.log=/dev/stdout
xdebug.log_level=0
xdebug.client_port=9003
xdebug.client_host=host.docker.internal

Nota tutta la parte xdebug del file. Questo è importante per il corretto funzionamento del resto di questo articolo. La modalità ci permette di dire ad xdebug le opzioni di cui abbiamo bisogno.

develop: Questo ti darà un var_dump migliorato nella tua applicazione ma anche informazioni aggiuntive su avvisi, notifiche. Maggiori informazioni qui: https://xdebug.org/docs/develop

debug: Questo ti permetterà di usare il step debug, impostare i breakpoint e seguire il codice passo dopo passo.

trace: Registra tutte le chiamate di funzioni, assegnazioni di variabili... tutto! È impegnativo ma non importa.

idekey: È la chiave inviata da xdebug per dire a PhpStorm 'ehi, sto eseguendo il debug di questa applicazione, usami!'

client_port: La porta alla quale viene inviata la socket di connessione della sessione di debug.

client_host: Questo è l'IP al quale inviamo la nostra connessione per l'inizializzazione della nostra sessione di debug. Stiamo utilizzando Docker quindi specificheremo come uscire dal nostro ambiente docker per attaccare l'host sulla nostra macchina Linux.

Una volta che il tuo docker è a posto dovresti avere questo nel tuo ambiente PHP:

image-36
image-37

Ecco un esempio di docker-compose:

version: "3.8"
services:
  php-7.3:
    image: 'devpartitech/php:7.3-apache'
    ports:
      - "80:80"
    volumes:
      - "./:/var/www/"
    extra_hosts:
      - host.docker.internal:host-gateway

Non passare al passaggio successivo finché non hai validato questo passaggio.

Configurazione di PhpStorm

Bene! Abbiamo impostato il nostro ambiente Docker con una pagina Symfony. Ora configureremo PhpStorm per poter ricevere la sessione di debug.

Apri le impostazioni di PhpStorm.

image-38

Se non è già stato fatto, installa il plugin Symfony.

Sotto il menu PHP ci sono i menu Debug.

image-39

Nel primo menu specifica al tuo IDE che deve ascoltare sulla porta 9003. Puoi cambiare la porta se lo desideri, ma dovrà anche essere specificata nel php.ini.

image-40

Sotto il menu Templates inserisci il collegamento alla directory var/cache di Symfony. Non inserire il percorso che è nel tuo container. Si tratta del percorso sul tuo disco (la tua macchina, per quanto mi riguarda Ubuntu). Senza questo l'IDE non sarà in grado di utilizzare i breakpoint nei tuoi template TWIG.

Sotto il menu DBGp Proxy:

image-43

Ricorda l'ide key, e la porta di prima.

Sotto il menu Servers, crea un nuovo server cliccando sul "+".

image-44
image-45

Una volta specificato il tuo web server possiamo finalmente testare il debugger di PhpStorm!

Per testare puoi andare in qualsiasi Controller e template e mettere dei breakpoint. Per farlo clicca nel margine (dove hai i numeri delle linee).

image-46

Clicca sul piccolo "bug" in alto nel tuo IDE

image-47

Dovrebbe passare alla modalità "listening"

image-48

Aggiorna la tua pagina web e dovresti avere accesso alle opzioni di debug 😊

image-49
image-51

Ed ecco fatto!