Quando si sviluppa un plugin per WordPress (WP) può essere utile avere la possibilità di debuggare il codice inserendo dei breakpoint per fermare l’esecuzione del codice in punto preciso, eseguendo le istruzioni del codice una alla volta, ispezionando il valore delle variabili e verificando lo stato degli oggetti in un certo momento. In questo post si vede come è possibile farlo su Window, con l’editor Visual Studio Code (VSC) e l’ambiente di sviluppo Xammp.
Ingredienti:
- Sistema operativo: Windows 10 (versione Home o Professional)
- Editor: Visual Studio Code (v. 1.61.2)
- Ambiente di sviluppo: XAMMP (v. 3.3.0)
- Plugin per il debug: Xdebug (v. 3.1.1)
- WordPress (v. 5.8.1)
Preparazione:
- Installare XAMPP: Basta scaricarlo e lanciare l’eseguibile. Alla fine si avrà a dipsosizione un Pannello di Controllo (PdC) per configurare e lanciare in locale sia Mysql che Apache. Cliccando sul pulsante Explorer ndel PdC, se non si è cambiato il path di installazione, si dovrebbe aprire la cartella C:\xampp.
- Installare Visual Studio Code: Basta scaricarlo e lanciare l’eseguibile.
- Installare WordPress: Dopo averlo scaricato, per installarlo, si posso seguire queste istruzioni [3]. Chiamare per esempio testdb il database del sito e testsite (C:\xampp\htdocs\testsite) la cartella contenente il sito WP. Creare un utente admin che abbia i permessi di scrittura sul database testdb.
Esecuzione:
- In base alla versione di PHP utilizzata e alla versione del sistema operativo scaricare dalla sezione Windows binaries del sito Xdebug il file dll corrispondente, nel mio caso il file è php_xdebug-3.1.1-7.4-vc15-x86_64.dll. Se non si sa quale scaricare seguire queste indicazioni per capirlo.
- Copiare il file scaricato nel passo precedente, nel mio caso il file php_xdebug-3.1.1-7.4-vc15-x86_64.dll in C:\xampp\php\ext.
- Modificare il file C:\xampp\php\php.ini (lo si può aprire dal PdC) aggiungendo, infondo al file, le righe:
[Xdebug]
zend_extension = C:\xampp\php\ext\php_xdebug-3.1.1-7.4-vc15-x86_64.dll
xdebug.mode = debug
xdebug.start_with_request = yes - Dal PdC di Xampp riavviare Apache cliccando prima su Stop e poi su Start.
- Aprire VSC e installare [1] il plugin PHP Debug [2] di Felix Becker.
- Su VSC premere F5 e scegliere l’ambiente PHP.
- Se esiste cancellare il file .vscode\launch.json presente nel workspace (C:\xampp\htdocs\testsite\launch.json).
- Su VSC cliccare nel menu a sinistra l’icona corrispondente a “Run e debug” e poi sul link “create a launch.json file“.
- Cliccare su Listen for Xdebug.
- Si apre l’ambiente di debug con la barra per la gestione del debug.
- Su VSC aprire la cartella testsite: File->Open folder.
- Su VSC aprire il file wp-blog-header.php (C:\xampp\htdocs\testsite\wp-blog-header.php) e inserire un breakpoint nella riga (in questa versione di WP la riga 8) con il codice: “if ( ! isset( $wp_did_header )“.
- A questo punto da un browser aprire la pagina: http://localhost/testsite
- Il flusso di esecuzione del codice si ferma nel punto in cui si è inserito l breakpoint ed è possibile eseguire le linee di codice successive una alla volta, visualizzando il valore delle variabili e lo stato degli oggetti instanziati.
hurrà !!
Come scegliere la versione giusta di Xdebug?
Sul sito di Xdebug esiste un Wizard che aiuta a scegliere la versione giusta della libreria da scaricare.
Per poterlo utilizzare si può seguire questa procedura:
- creare in htdocs un a cartella chiamata testversion (C:\xampp\htdocs\testversion).
- In questa cartella creare un file chiamato index.php.
- Nel file index.php scrivere questa linea di codice con un qualsiasi editor di testo (per esempio VSC) e salvare:
<?php phpinfo(); ?>
- Da browser, visitare la pagina http://localhost/testversion .
- Copiare tutto il contenuto di questa pagina (ctrl+ A).
- Da browser, aprire la pagina https://xdebug.org/wizard e incollare nell’area di testo il testo copiato nel passo precedente.
- Cliccare sul bottone “Analyse my phpinfo() output“.
- Il sistema elabora il file e indica qual è lo stato dell’installazione, quale file scaricare, dove copiarlo e come modificare il file php.ini.
Come effettuare il debug di un semplice programma PHP?
Nel caso si volesse effettuare il debug di semplice programma in PHP (senza WordPress). Allora la procedura è la seguente.
- Creare in htdocs una cartella testapp (C:\xampp\htdocs\testapp).
- In questa cartella creare un file myapp.php.
- Aprire il file myapp.php con VSC ed inserire il codice seguente:
<?php$name = 'Claudio';$output = 'Hello '.$name;echo $output;?> - Seguire i passi 1-10 della procedura precedente valida per WordPress.
- Inserire un breakpoint in una riga qualsiasi del file, per esempio quella con il primo assegnamento.
- Con un browser visitare la pagina http://localhost/testapp/myapp.php
- Il flusso di esecuzione del codice si ferma nel punto in cui si è inserito l breakpoint ed è possibile eseguire le linee di codice successive una alla volta, visualizzando il valore delle variabili e lo stato degli oggetti instanziati.
Fonti e riferimenti
- [1] Come installare una estensione su Visual Studio Code.
- [2] PHP Debug di Felix Becker.
- [3] How to Install XAMPP and WordPress Locally on Windows PC di Colin.
- [4] Debugging WordPress with Visual Studio Code di Seth Reid.
- [5] Wizard di Xdebug.
- [6] Set Up Visual Studio Code and xDebug as the Ultimate Editor for WordPress Development di Matt Show.
- [7] Visual Studio Code – PHP Debug Using XAMPP di SkillBakery Studio.