Come Può Xdebug Aiutarti a Diventare Un Migliore Sviluppatore WordPress

Come ogni developer può testimoniare, il codice non è mai pronto per la produzione dopo la prima bozza. Una parte fondamentale del processo di sviluppo è il debug, ovvero la rimozione o la modifica di tutte le parti del codice che non funzionano.

L’estensione Xdebug per PHP è un modo molto diffuso per scovare e distruggere tutti i bug del vostro codice.

Uno degli aspetti più interessanti di Xdebug è la sua flessibilità. Indipendentemente dal framework o dall’ambiente di sviluppo che preferite, potrete trovare una versione di Xdebug adatta al vostro flusso di lavoro. Da lì a prendere confidenza con lo strumento non ci vorrà molto.

In questo tutorial vedremo Xdebug in modo approfondito, compreso il processo di installazione, l’integrazione nella vostra configurazione e l’utilizzo generale.

Per prima cosa, vediamo di capire meglio cos’è e cosa fa Xdebug.

Presentazione di Xdebug

Xdebug è una delle estensioni più popolari per il debug del codice PHP. Si installa dall’ambiente che avete scelto e agisce come un “debugger a passi”.

In breve, questo vi permette di lavorare sul vostro codice riga per riga, in modo da poter esaminare il modo in cui il codice agisce e interagisce all’interno del programma, oltre a studiare il suo output. Da lì potrete apportare le modifiche che ritenete opportune.

Xdebug può fare molto di più, però:

• Potete analizzare le prestazioni del vostro codice usando una serie di metriche e visualizzazioni.
• Quando eseguite i test unitari di PHP, potete vedere quali suite di codice vengono eseguite.
• Xdebug include funzionalità di “tracing” che scrivono su disco ogni chiamata di funzione. Questo include argomenti, assegnazioni di variabili e valori di ritorno.
• Xdebug apporta anche dei miglioramenti alla segnalazione degli errori standard di PHP. Ne parleremo più avanti.

Date le sue caratteristiche, ci sono molti modi per usare Xdebug (e qualsiasi altro debugger simile) all’interno del vostro flusso di lavoro. Li illustreremo nella prossima sezione.

Perché Usare Xdebug

Molti developer non hanno un flusso di lavoro dedicato al debug che utilizza strumenti ed estensioni di terze parti. Questo perché PHP include un proprio rudimentale sistema di registrazione degli errori. Userete comandi come error_log, var_dump e print per vedere i risultati delle variabili e delle chiamate di funzione.

Per esempio, ci sono molti snippet che potete riutilizzare per lo sviluppo di WordPress: Stack Overflow ne è pieno:

function log_me($message) {
  if ( WP_DEBUG === true ) {
      if ( is_array($message) || is_object($message) ) {
          error_log( print_r($message, true) );
      } else {
           error_log( $message );
      }
  }
}

Tuttavia, questo approccio presenta alcuni importanti svantaggi:

• Per prima cosa dovete assicurarvi di aver abilitato i log degli errori per la piattaforma con cui state lavorando. In questo caso, dovrete abilitare WP_DEBUG (ne parleremo più avanti).
• Questo esempio di debug “dump” offre meno possibilità di indagine rispetto al debug a passi. In questo caso, potete produrre solo ciò che definite.

L’ultimo punto richiede un grande sforzo manuale, soprattutto se il vostro lavoro quotidiano non è quello di sysadmin. Per esempio, se volete eseguire il debug di un blocco di codice, potreste aggiungere il vostro snippet in base a una variabile che definite. Tuttavia, potrebbe non essere la fonte del problema e nemmeno indicare cosa sta succedendo.

Invece, uno strumento come Xdebug può fare la sua magia per fornire una portata maggiore:

• Potete “rompere” il vostro codice in vari punti durante l’esecuzione per vedere cosa succede in tempo reale.
• Ci sono una miriade di metriche, visualizzazioni, rami e altro ancora che vi aiutano a capire cosa sta facendo il vostro codice e come risponde.
• A volte potete anche modificare i valori al volo durante il processo di debug. Questo offre un valore immenso, anche per le suite di codice che funzionano bene. In sostanza, potete eseguire test unitari manuali in qualsiasi momento.
• Poiché si usano i breakpoint per contrassegnare le aree da sottoporre a debug, non avrete bisogno di lavorare con gli snippet all’interno del codice. Questo mantiene il codice più pulito e riduce il numero di problemi futuri.

In generale, l’utilizzo di uno strumento come Xdebug è una decisione proattiva piuttosto che responsive. Potete utilizzare il debug a tappe come parte integrante del processo di sviluppo, proprio come l’implementazione dei test unitari come parte dello sviluppo guidato dai test (TDD).

Come Attivare la Registrazione degli Errori in PHP

Anche se potete eseguire il debug del vostro codice senza un errore specifico, spesso è utile sapere se un problema si verifica senza avere Xdebug aperto. Questo vi dà un punto di partenza per l’esplorazione. Non è strettamente necessario, ma può essere una parte utile della vostra catena.

Per segnalare ogni errore che si verifica, dovrete aggiungere una riga all’inizio del file PHP corrispondente:

error_reporting(E_ALL);

Si tratta di un comando di tipo catch-all e potete ottenere lo stesso risultato utilizzando la funzione ini_set:

ini_set('error_reporting', E_ALL);

Questo vi permette di modificare le impostazioni all’interno del vostro file php.ini, progetto per progetto. Sebbene possiate entrare in questo file e fare una modifica manuale, spesso è meglio lavorare con ini_set per modificare un parametro specifico:

ini_set('display_errors', '1');

Una volta impostata la segnalazione degli errori attivi secondo i vostri gusti, potete iniziare a lavorare con Xdebug.

Come Usare Xdebug

Nelle prossime sezioni vi mostreremo come usare Xdebug, compresi i passaggi necessari per configurarlo. Anche se non possiamo occuparci di tutti gli aspetti dello strumento, questa guida rapida vi permetterà di iniziare subito a lavorare.

Per prima cosa, però, dovete installare Xdebug. Scopriamo come fare.

1. Installare Xdebug per il Vostro Sistema Operativo (OS)

Poiché Xdebug è adattabile a qualsiasi tipo di configurazione, il processo esatto per ciascuno di essi sarà leggermente diverso. A livello di sistema operativo, ci sono alcune differenze:

• Windows: Si tratta di un processo di installazione un po’ complicato che prevede l’utilizzo di un file PHP esistente e di una procedura guidata di installazione, per poi scaricare la versione adatta al vostro sistema.
• Linux: Il metodo è probabilmente il più semplice: Potete utilizzare un gestore di pacchetti per installare Xdebug o la PHP Extension Community Library (PECL).
• Mac: Anche questo metodo è semplice: Una volta installato PECL, potete eseguire pecl install xdebug da un’istanza del Terminale. Dovrete inoltre avere gli strumenti da riga di comando XCode e PHP installati sul vostro sistema.

Tuttavia, la maggior parte degli utenti non vorrà attenersi a un’istanza di Xdebug a livello di sistema. Al contrario, vi conviene integrarlo nel vostro ambiente di sviluppo.

2. Integrare Xdebug nel Vostro Ambiente di Sviluppo

Una volta installato Xdebug per il vostro sistema operativo, dovete collegarlo al vostro ambiente.

I sistemi e gli strumenti supportati sono talmente tanti che non è possibile esaminarli tutti. Più avanti vi forniremo le istruzioni per DevKinsta e PhpStorm. Tuttavia, ci sono molti altri ambienti popolari tra cui scegliere. Di seguito vi elenchiamo alcuni dei nostri migliori consigli.

Varying Vagrant Vagrants (VVV)

VVV è uno degli ambienti nominati sul sito web di Make WordPress:

La buona notizia è che VVVV include già una versione di Xdebug, ma dovete attivarla. Potete farlo usando Secure Shell (SSH) all’interno di una finestra del Terminale:

vagrant ssh -c "switch_php_debugmod xdebug"

Tuttavia, le prestazioni ne risentono un po’ e dovrete riattivare questa opzione se fate il provisioning dei vostri siti.

Laravel Valet

Per alcuni utenti, Laravel Valet rappresenta un ambiente di sviluppo web quasi perfetto. Ancora meglio, potete integrare Xdebug con esso.

Per farlo, dovrete creare un file di configurazione per il debugger. Potete trovare il vostro percorso utilizzando php --ini alla riga di comando, che vi restituirà diversi percorsi di file:

Successivamente, create un nuovo file xdebug.ini nel percorso dei file .ini aggiuntivi. Nel nostro esempio, si trova in /opt/homebrew/etc/php/7.4/conf.d.

Una volta aperto questo nuovo file, aprite anche il percorso del file di configurazione caricato (il vostro file php.ini principale). Con entrambi aperti, aggiungete il seguente testo in fondo:

• php.ini: zend_extension="xdebug.so"
• xdebug.ini: xdebug.mode=debug

Una volta salvate le modifiche, eseguite valet restart dal Terminal, quindi aggiungete phpinfo(); exit; a uno dei file del vostro sito. Dovrete verificare se questo funziona attraverso un rapido caricamento della pagina nel browser.

Tenete presente che potrebbe essere necessario riavviare PHP usando sudo brew services restart php e verificare che l’installazione di Xdebug nel sistema sia corretta utilizzando php --info | grep xdebug. Noterete le linee specifiche di Xdebug all’interno dell’output:

Da qui potete cercare di incorporare Xdebug nel vostro editor di codice preferito.

XAMPP

Come per Valet, anche per XAMPP ci sono alcune parti del processo. Tuttavia, le versioni per Windows e macOS hanno due processi diversi.

Iniziate installando XAMPP, poi eseguite un rapido controllo per verificare se il file php_xdebug.dll (Windows) o xdebug.so (macOS) esiste sul vostro sistema:

Se il file esiste, potete passare alla configurazione. In caso contrario, dovrete prima scaricare il binario giusto per Windows – un file a 64 bit per la versione di PHP che preferisci – oppure installare qualche altra dipendenza se usate un Mac.

Per Windows, rinominate il file DLL php_xdebug.dll e spostatelo nel percorso del file xamppphpext. Quindi, aprite il file xamppphpphp.ini nel vostro editor di codice preferito e aggiungete quanto segue:

output_buffering = Off

Nella sezione [XDebug], aggiungete le tre righe seguenti:

zend_extension=xdebug
xdebug.mode=debug
xdebug.start_with_request=trigger

Una volta salvate le modifiche, riavviate Apache e verificate la presenza di Xdebug.

Per Mac, dovete assicurarvi di installare gli strumenti da linea di comando di Xcode usando xcode-select --install in un’istanza del Terminale. Successivamente, dovrete installare tre pacchetti utilizzando Homebrew:

brew install autoconf automake libtool

In alcuni casi, dovrete anche reinstallare XAMPP per ottenere sia il programma principale che i “File per developer”. Dovreste essere in grado di reinstallare solo questi file, ma prima dovrete eseguire un backup della configurazione esistente.

Successivamente, andate al download della cartella sorgente di Xdebug sul vostro sistema e decomprimete il file TGZ. All’interno di una finestra del Terminal, navigate in questa cartella ed eseguite il seguente comando:

phpize
pecl install xdebug

Notate che potrebbe essere necessario usare sudo anche in questo caso. Da qui potrete modificare il file php.ini di XAMPP. Per la maggior parte delle installazioni macOS, lo troverete in /Applications/XAMPP/xamppfiles/etc/php.ini. All’interno di questa directory troverete anche il percorso del vostro file xdebug.so: annotatelo e usatelo al posto del percorso del file per questo frammento:

[xdebug]
zend_extension=/path/to/xdebug.so
xdebug.mode=develop,degug
xdebug.start_with_request=yes

Per verificare se funziona, create un nuovo file xdebug_info.php all’interno della cartella principale htdocs di XAMPP. All’interno, aggiungete quanto segue:

<?php
xdebug_info();

… poi aggiornate Apache e provate Xdebug nel browser.

Usare PhpStorm con Xdebug

Una volta installato Xdebug attraverso il sistema operativo e l’ambiente di sviluppo, dovrete visualizzare il debugger stesso. Potrete farlo attraverso l’editor di codice o l’ambiente di sviluppo integrato (IDE) che avete scelto. Come per l’ambiente, ce ne sono molti tra cui scegliere e ognuno di essi può avere un approccio diverso.

Detto questo, molti developer scelgono di usare PhpStorm di JetBrains. Infatti, PhpStorm offre “assistenza consapevole di WordPress” ed è una scelta popolare anche per molte altre ragioni.

Il sito web di JetBrains contiene le istruzioni complete per collegare Xdebug e PhpStorm, ma le esamineremo qui.

Per prima cosa, andate alla pagina Languages & Frameworks > PHP all’interno del pannello Preferences. Qui, aprite il menu More Items accanto al campo a tendina CLI Interpreter:

In questo modo verranno mostrati ulteriori dettagli sulla versione di PHP e sull’interprete. Se fate clic sul pulsante More items accanto all’opzione Configuration file, vedrete il percorso completo del vostro file php.ini:

Lavorerete su questo file PHP per continuare il processo di configurazione.

Lavorare nel File php.ini

Il primo compito da svolgere è quello di modificare tutte le righe che influiscono sul funzionamento di Xdebug con PhpStorm.

All’interno del file php.ini, cercate le seguenti righe e rimuovetele o commentatele:

zend_extension=<path_to_zend_debugger>
zend_extension=<path_to_zend_optimizer>

Queste linee non saranno presenti in tutti i casi, quindi non allarmatevi se non le vedete.

Successivamente, aggiungete al file quanto segue:

[xdebug]
zend_extension="xdebug.so"
xdebug.mode=debug
xdebug.client_host=127.0.0.1
xdebug.client_port="<the port (9003 by default) to which Xdebug connects>"

Ci sono alcune cose da notare su questa suite di codice:

• È possibile che abbiate già una sezione [xdebug], nel qual caso potete omettere la prima denominazione.
• La voce zend_extension potrebbe richiedere l’aggiunta del percorso completo di xdebug.so per la connessione.
• Anche se può sembrare un segnaposto, il parametro xdebug.client_port è il modo in cui lo imposterete nel vostro codice.

Una volta aggiunti questi elementi, salvate e chiudete l file, quindi verificate la versione di PHP dalla linea di comando (utilizzando php --version):

Se avete una versione funzionante di Xdebug, verrà visualizzata come una delle estensioni PHP. Potete anche aggiungere phpinfo(); a un nuovo file e testarlo nel browser.

Questo è tutto ciò che dovete fare per far funzionare Xdebug come debugger predefinito con PhpStorm. L’ultimo passo prima di utilizzarlo è l’installazione di un’estensione di aiuto al browser.

Installare un’Estensione Browser Helper

L’ultima connessione chiave che dovrete stabilire è quella tra il vostro browser e PhpStorm, ottenuta attivando il debug a passi sul server. Sebbene possiate farlo dalla linea di comando utilizzando i valori speciali GET o POST, è più semplice utilizzare un’estensione.

Vi consigliamo di utilizzare l’estensione dedicata Xdebug Helper. Potete installarla sul vostro browser preferito:

• Aiuto Xdebug per Chrome/Chromium/Brave
• Xdebug Helper per Firefox

Se volete esplorare altre estensioni, il sito web di JetBrains offre alcune opzioni aggiuntive per i browser più diffusi.

Una volta installata l’estensione del browser che avete scelto, non dovreste dover modificare altre impostazioni di configurazione. Da qui, potete iniziare a usare Xdebug con PhpStorm.

Usare Xdebug

Anche se in questo caso useremo PhpStorm, vedrete un layout e un’interfaccia simili tra i diversi IDE, anche se ci saranno alcune differenze evidenti.

Ci sono alcuni concetti che si combinano per formare l’intera esperienza di debug:

• Breakpoints: Questi sono i punti in cui Xdebug si ferma per permettervi di ispezionare l’output. Potete impostarne quanti ne volete.
• Listening for connections: Potete attivare o disattivare questa funzione, anche se la maggior parte degli sviluppatori la lascerà sempre attiva.
• The debugging screen: La maggior parte del tempo verrà trascorsa all’interno dell’interfaccia di debug: è qui che lavorerete con le varie linee di codice, le variabili e i parametri.

Il primo passo è attivare l’ascolto (listening): senza di esso non potrete eseguire il debug. Per farlo, fate clic sull’opzione Run > Start Listening for PHP Debug Connections nella barra degli strumenti:

In alternativa, potete fare clic sull’icona “telefono” nella barra degli strumenti di PhpStorm:

Entrambe le opzioni avviano l’ascolto delle connessioni.

Da qui, potete iniziare a impostare i punti di interruzione all’interno dell’editor di codice. Un punto rosso indica un punto di interruzione su cui potete fare clic per attivarlo:

Quando volete eseguire il debug del codice, il modo più semplice è quello di iniziare l’ascolto, impostare i punti di interruzione e poi andare alla pagina specifica nel vostro browser. Individuate l’icona della vostra estensione all’interno del browser, poi fateci clic sopra e selezionate l’opzione “Debug”:

In questo modo si aprirà il debugger di PhpStorm e si riceveranno le buone o le cattive notizie:

Se fate clic con il tasto destro del mouse sui vari valori, attributi, parametri e variabili, potrete accedere a un ulteriore menu contestuale. In questo modo avrete a disposizione un ampio margine di manovra per testare ed eseguire il debug del vostro codice:

Per esempio, potete impostare valori diversi per le variabili lungo il percorso. Questo potrebbe essere un tentativo deliberato di rompere il vostro codice e vedere cosa succede, oppure un modo per testare il codice che ha già bisogno di una correzione. In ogni caso, questo vi offre un metodo fantastico per eseguire il debug del vostro codice senza doverlo prima modificare.

Come Kinsta Vi Aiuta a Eseguire il Debug del Vostro Sito WordPress

WordPress dispone di una serie di opzioni di debug attraverso WP_DEBUG e altri strumenti, come Query Monitor. Questi strumenti consentono di visualizzare messaggi di errore precedentemente nascosti in tutto il sito e nella bacheca. Da lì potrete iniziare a capire qual è il problema.

Potete anche salvare i messaggi di errore usando WP_DEBUG_LOG, che vi offre un modo per documentare i problemi del vostro sito. Abbiamo spiegato come configurarlo in un altro articolo del blog. La configurazione è semplice attraverso il cruscotto di MyKinsta (e la schermata Siti > Strumenti ):

Se lo abbinate allo strumento gratuito DevKinsta per l’ambiente locale, avrete anche un modo per abilitare e disabilitare WP_DEBUG con un solo clic per ogni sito che create:

In questo modo potete individuare gli errori sul vostro sito durante lo sviluppo e assicurarvi che non vengano trasmessi al sito live. Queste modalità sono anche facili da disattivare, il che è fondamentale per la sicurezza del sito e degli utenti.

Tutti i piani Kinsta includono anche lo strumento Kinsta APM, il nostro strumento di monitoraggio delle prestazioni per i siti WordPress.

Scheda Informativa sui Comandi

Prima di concludere questo articolo, dobbiamo parlare delle scorciatoie.

Come per molti altri software, ci sono vari modi per navigare in Xdebug (e PhpStorm) usando solo la tastiera. In effetti, potete anche usare la riga di comando per eseguire il debug degli script PHP.

Una volta che Xdebug è attivo e funzionante, potete usare i seguenti comandi per muovervi:

Anche se il vostro editor di codice specifico avrà le sue scorciatoie dedicate, qui l’attenzione è rivolta a PhpStorm. Date un’occhiata a questa tabella di scorciatoie da tastiera per usare Xdebug con PhpStorm:

Per fortuna non c’è molto da memorizzare. Dovete aprire il debugger, impostare i punti di interruzione per linea, ascoltare le connessioni ed eseguire gli script.

Tuttavia, se avete bisogno di una scorciatoia per un compito particolare, potete usare il comando PhpStorm Find Action:

Quando iniziate a digitare in questo spazio, vi verrà mostrato un elenco dinamico di comandi e relative scorciatoie. Potete anche trovare una versione PDF di tutte le scorciatoie da tastiera nel menu Help > Keyboard Shortcuts PDF.

Se volete dare un’occhiata in tempo reale alle scorciatoie mentre lavorate con il mouse, JetBrains mette a disposizione il plugin Key Promoter X:

Questo pratico strumento mostra le notifiche dell’ultima azione eseguita, insieme alla relativa scorciatoia da tastiera. Una volta che avrete imparato a usare le scorciatoie, potrete eliminare questo plugin e restituire al vostro schermo un po’ di spazio prezioso.

Riepilogo

La pratica del debug ha fatto molta strada dai suoi umili inizi; oggi comprende un campo di applicazione molto più ampio di quello che i suoi progenitori avrebbero potuto immaginare. Per svolgere un lavoro accurato quando si tratta di correggere il vostro codice PHP, dovete usare uno strumento efficace. Ci sono molte estensioni e strumenti eccellenti tra cui scegliere, ma Xdebug è senza dubbio il primo in classifica.

Come abbiamo visto, Xdebug è in grado di adattarsi anche ai gusti più eclettici in fatto di editor di codice ed è particolarmente indicato se abbinato a PhpStorm. Tuttavia, a prescindere dalla vostra configurazione, spesso esiste una versione di Xdebug adatta alle vostre esigenze. Nel complesso, è uno strumento potente, flessibile e intuitivo da usare.

Pensate che Xdebug meriti le sue lodi o preferite un altro strumento di debug? Fatecelo sapere nella sezione commenti qui sotto!