Come eseguire in PHP (wordpress) un debug visuale step to step
da Massimo Della Rovere · pubblicato il 21 Giugno, 2017 · modificato il 21 Giugno, 2017

Per chi lavora in WordPress o semplicemente programma in PHP sa benissimo che le operazioni di debug sono state sempre un punto debole, non perché non sia possibile farlo ma sicuramente un pochino più complicato di altri linguaggi, infatti non è un caso che molte volte si usano i comandi manuali di var_dump() o echo() inseriti nel codice per controllare cosa succede in un determinato punto del programma.

Introduzione

In questo articolo cercheremo di vedere un modo migliore per mettere sotto debug i nostri programmi e scovare parti di programma non funzionanti anche se complesse. Useremo diversi strumenti, un editor tipo Atom, un add-on browser e il modulo PHP Xdebug. Il fatto che dobbiamo usare diversi strumenti dipende dalla natura delle applicazioni WEB , infatti non possiamo attivare il debug e lanciare il programma da linea di comandi per poi vedere l’esecuzione step to step, come succede in altri linguaggi di programmazione.

Questo per il motivo che gli script in esecuzione molte volte sono in remoto, ma anche se avessimo una installazione LAMP in locale il processo non verrebbe eseguito direttamente da noi ma da un web server che non ha nessun collegamento sincrono con le operazioni che facciamo sulla nostra postazione di lavoro. Quindi per risolvere il problema ci serve un editor che ci faccia vedere i sorgenti originali e che nello stesso tempo riceva dal server (in cui bisogna installare Xdebug) le informazioni di debugging in tempo reale.

Come potete vedere da questo schermata i passi da eseguire sono i seguenti: da una parte abbiamo il nostro editor in attesa su una porta (9000) e dall’altra avviamo la richiesta da mettere sotto debug con un browser come Chrome o Firefox. La richiesta viene elaborata da un server web che esegue il processo PHP che a sua volta richiama il modulo Xdebug che provvede a spedire le informazioni sulla porta in cui è in ascolto il nostro editor.

Chrome e/o Firefox

La richiesta che dobbiamo fare al nostro server non è una richiesta standard ma bisogna aggiungere un cookie che faccia capire a PHP che deve eseguire un debug, questo perché mentre lavoriamo noi ci sono anche altre richieste che possono arrivare al server e che devono essere elaborate in modo normale. Per fare questo bisogna installare un add-on, nel caso di Chrome è Xdebug helper, mentre in Firefox è The easiest Xdebug.

In questa schermata vi riporto il caso di Firefox dove una volta installato il componente è possibile specificare un nome per identificare il nostro debug.

Installazione Xdebug

Dopo che il nostro browser esegue la richiesta con il cookie attivato, il processo PHP che abbiamo messo sotto debug richiamerà il modulo Xdebug per eseguire il lavoro di raccolta informazioni e spedizione di quest’ultime alla porta indicata.

Ovviamente questo sarà possibile solo dopo aver installato il modulo sul nostro server. L’installazione è diversa in base al sistema operativo e alla distribuzione specifica, io vi riporto i passi di installazione su un sistema Ubuntu 16.04 LTS con Apache e PHP 7.0.

sudo apt-get install php-xdebug

// Editare il file di configurazione con vi
// ed inserire le linee riportate subito dopo

sudo vi /etc/php/7.0/apache2/conf.d/20-xdebug.ini

zend_extension=xdebug.so
xdebug.remote_enable = 1
xdebug.remote_port = 9000
xdebug.remote_server = indirizzo ip del computer

// Riavviare Apache e PHP anche se i comandi
// necessari dipendono che usate PHP-FPM o mod_PHP

sudo service apache2 restart
sudo service php7.0-fpm restart

Se volete attivare e disattivare il modulo Xdebug a vostro piacimento per una questione di sicurezza basta che usate i seguenti comandi:

sudo phpdismod xdebug // Disattivazione
sudo phpensmod xdebug // Attivazione

Se avete qualche dubbio o state usando degli ambienti diversi rispetto al mio esempio vi rimando alla documentazione ufficiale che trovate su Xdebug Documentation. Terminata l’installazione controllate con la schermata phpinfo() sul vostro server se il modulo risulta correttamente installato e se le opzioni di configurazioni corrispondono a quelle indicate.

Configurazione editor

Per questa funzionalità potete usare qualsiasi editor, l’importante che sia compatibile con Xdebug o nativamente o con l’installazione di moduli aggiuntivi. Io uso come editor Atom insieme al package aggiuntivo php-debug. In ogni caso, qualsiasi sia la vostra soluzione di editor ci dovrebbe essere comunque una parte per specificare la porta di ascolto.

In Atom possiamo configurare diverse cose per utilizzare Xdebug, vi riporto qui di seguito quelle che ritengo le più importanti e che utilizzo con più frequenza:

Server Port: La porta di ascolto su cui arrivano le informazioni di debug dal server, la porta di default è la numero 9000, se volete cambiarla ricordatevi che deve coincidere con il numero di porta specificato nel file di configurazione presente sul server.

Keybinding: È possibile associare diverse azioni ad una sequenza di tasti, in modo da non dover utilizzare sempre il mouse e risparmiare tempo durante l’invio delle richieste. Utile per aggiungere e rimuovere breakpoints molto velocemente.

Path Maps: Se state usando il debug su un server remoto con molta probabilità il path che contiene gli script PHP avrà un nome diverso rispetto a quello locale. Con questa opzione è possibile mappare la directory remota con quella locale in modo da associare alla nostra richiesta il file sorgente corretto. (opzionale se si lavora in locale)

Avviare il debug

Adesso che abbiamo tutto il necessario possiamo fare il nostro primo debug. Apriamo un file PHP (che verrà eseguito dalla richiesta) nel nostro editor, spostiamo il cursore sulla riga in cui vogliamo che il debug si fermi, premiamo Alt+F9 il quale accenderà il numero di riga con un pallino verde. Apriamo il debug view con ctrl+alt+d e avviamo dal nostro browser con l’icona di debug attivo la richiesta al nostro server. Se abbiamo eseguito tutto correttamente dovremmo vedere il nostro editor con la linea di debug accesa e su cui sarà possibile procedere all’esecuzione passo passo analizzando i valori delle variabili, etc.

Adesso che siete in modalità debug interattivo non vi resta che curiosare in tutte le opzioni che trovate nella parte inferiore di Atom con cui potete analizzare i valori della variabili e leggere le eccezioni emesse da WordPress come anche ad esempio i warning.

1 Commento

  1. Cose vecchie di elaborazione, per quante c'è ne siano, naturalmente è sempre meglio ripassare. ciao.

condividi