Debug di temi e plugin WordPress con Eclipse e Xdebug

Il debug di PHP con un editor di testo e una combinazione di echo, print_r e exit call è sufficiente quando si tratta di codice semplice. Tuttavia, quando il tuo plugin WordPress killer cresce a diverse migliaia di righe che si estendono su più file, questo metodo diventerà rapidamente noioso e soggetto a errori. Quando raggiungi questo punto, sarà il momento di passare a un debugger remoto in modo da poter scorrere rapidamente e facilmente ogni linea di codice per individuare i problemi.


Un debugger remoto è un programma installato sul lato server che intercetta tutto il codice PHP in esecuzione. Tra le altre caratteristiche, ha la capacità di interrompere l'esecuzione del codice a metà dell'esecuzione e passare le informazioni a un client esterno, come un ambiente di sviluppo integrato (IDE). Questo tutorial spiegherà come utilizzare il debugger remoto di xdebug e l'IDE di Eclipse open source per passare attraverso il codice di WordPress per la risoluzione di errori.


Passaggio 1 Configurare l'ambiente di sviluppo

Presumo che tu abbia già Apache / PHP / MySQL e un'installazione funzionante di WordPress in esecuzione sulla tua workstation locale. In caso contrario, leggi il nostro tutorial su come configurare un ambiente di sviluppo WordPress per Windows.

Installa Xdebug

Le istruzioni più aggiornate possono essere trovate sul sito Web di xdebug.

Se usi Windows XAMPP per lo sviluppo, il binario xdebug è già incluso e puoi passare alla configurazione di PHP.

Se utilizzi Mac OS X, ti consiglio di compilare dal sorgente o utilizzare PECL per l'installazione.

Se sei su Linux, potresti essere in grado di installare utilizzando il gestore di pacchetti della tua distribuzione, oppure puoi compilare da PECL sorgente / uso.

Configura PHP per caricare Xdebug

Dovrai aggiungere queste due linee al tuo file php.ini (che potrebbe vivere a /etc/php.ini o c: \ xampp \ php \ php.ini o da qualche altra parte in base alla tua piattaforma):

 zend_extension = "/ absolute / path / to / xdebug.so" xdebug.remote_enable = 1

Una volta fatto, riavvia il tuo server Apache. Ci sono molte altre opzioni che puoi configurare in seguito che sono spiegate nella documentazione di xdebug, ma questo dovrebbe essere sufficiente per iniziare.

Verifica Xdebug

Creare una pagina denominata test.php nella cartella radice Web e aggiungere una chiamata alla funzione phpinfo ():

Cerca xdebug e dovresti trovare una sezione in fondo alla pagina che assomigli a questa:

Installa Eclipse e PDT

Scarica Eclipse Classic dalla pagina di download di Eclipse, scompattalo, copialo nella directory delle applicazioni, quindi esegui il lancio.

Fare clic sul menu?, Quindi Installa software. Sotto l'opzione "Lavora con", seleziona il sito "Indigo". Seleziona una delle funzionalità di "Funzionalità di sviluppo PHP (PDT)", quindi fai clic su "Avanti".

Fare clic sui passaggi rimanenti della procedura guidata per completare l'installazione, quindi riavviare Eclipse quando richiesto.

Imposta Eclipse per ascoltare Xdebug

Abilita la prospettiva PHP facendo clic sul pulsante Apri prospettiva nell'angolo in alto a destra:

Quindi selezionare l'opzione "Altro", selezionare PHP, quindi fare clic su "OK":

Fai clic sul pulsante PHP per andare alla prospettiva PHP:

Quindi vai su "File -> Nuovo -> Progetto PHP." Questo farà apparire la finestra "Nuovo progetto PHP". Puoi inserire "wordpress" o quello che vuoi per il nome del tuo progetto. È necessario selezionare l'opzione "Crea progetto nell'ubicazione esistente (dall'origine esistente)" in "Contenuti" e accedere alla directory principale di WordPress. Lasciare i valori predefiniti per le altre sezioni, quindi fare clic sul pulsante "Fine".

Vai su "Finestra -> Preferenze -> PHP -> Debug" e modifica l'impostazione "PHP Debugger" da Zend a XDebug.

Quindi vai su "Finestra -> Preferenze -> PHP -> Debug -> Debugger installati" e fai doppio clic su XDebug. Modificare l'opzione "Accetta sessione remota (JIT)" da "off" a "localhost" e fare clic su "OK".

Passaggio 2 Eseguire il debug del codice

Imposta punti di interruzione

Un punto di interruzione è un indicatore che indica al debugger di mettere in pausa l'esecuzione di un programma su una determinata riga di codice in modo da poter controllare cosa sta succedendo.

Questo è facile. Basta aprire il file contenente il codice che si desidera ispezionare (come il file index.php in un tema che si sta sviluppando). Quindi, sul lato sinistro della finestra del file, fai doppio clic sull'area grigia a sinistra della linea. Un puntino blu dovrebbe apparire come nella riga 20 nell'esempio seguente (l'index.php dal tema twentlyeleven).

Avvia una sessione Xdebug

Dopo aver impostato un punto di interruzione, apri un browser e vai al tuo sito WordPress locale, aggiungendo la stringa di query XDEBUG_SESSION_START = wordpress come questo:

 http: // localhost / path / to / wordpress / XDEBUG_SESSION_START = wordpress

Questo dirà a xdebug di impostare un cookie che cercherà nei caricamenti successivi della pagina. Se tutto è configurato correttamente, si dovrebbe vedere una notifica che Eclipse ha ricevuto una sessione in entrata. Fai clic su "OK" per accettare, quindi la vista Debug dovrebbe aprirsi sulla prima riga di index.php.

È possibile controllare le variabili attualmente in ambito utilizzando la finestra di ispezione "Variabili" sul lato destro. Nell'esempio sopra, non ci sono variabili locali da guardare, solo le variabili globali $ _COOKIE, $ _ENV, $ _FILES, $ _GET, $ _POST, $ _REQUEST, $ _SERVER e $ GLOBALS.

Passaggio attraverso il codice

Per vedere un esempio di informazioni più utili, è necessario scorrere alcune righe di codice per arrivare a The Loop. La finestra "Debug" di Eclipse ha diversi controlli che dovresti capire:

  1. Rimuovi tutti i lanci terminati - Cancella le sessioni precedenti
  2. Curriculum vitae - Riprende l'esecuzione del codice. Se non hai impostato nessun altro punto di interruzione, il programma terminerà il caricamento normalmente.
  3. Sospendere - Non si applica al debug di PHP.
  4. Terminare - Interrompere l'esecuzione del programma e il debug.
  5. Disconnect - Arresta il debug, ma continua a eseguire il programma.
  6. Entra - Segui il codice mentre viene eseguito riga per riga, incluse le chiamate di funzione. Questo è utile per eseguire il debug di una particolare funzione.
  7. Scavalcare - Salto che mostra l'esecuzione di una particolare chiamata di funzione. L'esecuzione riprenderà alla riga successiva.
  8. Passo ritorno - Se all'interno di una funzione, salta a dove ritorna.
  9. Drop To Frame - Non si applica al debug di PHP.
  10. Usa i filtri Step - Non supportato in Eclipse PDT

Fai clic sul pulsante "Riprendi" una volta. Il client di debug di Eclipse dovrebbe fare una pausa nel punto di interruzione impostato nel file index.php del tema.

Fai clic sul pulsante "Esegui passaggio". Questo ti porterà nella funzione "have_posts" di WordPress. Fai di nuovo clic su "Esegui passaggio" e vedrai la variabile globale $ wp_query visualizzata nella finestra "Variabili".

Fai clic su "Step Return" per uscire dalla funzione "have_posts" e tornerai nel file index.php. Nell'esempio, questo ti lascerà ad una chiamata alla funzione "twentyeleven_content_nav". Puoi intervenire per vedere cosa sta succedendo se sei interessato, oppure scavalcarlo se non lo sei.

Facendo clic su "Passaggio" ti porterà alla chiamata a The Loop. Entrando in "the_post" ti insegneremo molto su come WordPress recupera i dati e li scrive sulla pagina durante The Loop. Tieni d'occhio la finestra "Variabili" per monitorare come cambiano le variabili locali e globali mentre la funzione viene eseguita.

Puoi anche scorrere il tuo codice nello stesso modo per vedere come le variabili vengono manipolate mentre il codice viene eseguito.

Quando hai visto tutto ciò che vuoi vedere, fai clic sul pulsante "Riprendi" e il tuo blog terminerà il caricamento come al solito.

Se si fa clic su un collegamento a un'altra pagina del browser, si noti che il debugger verrà caricato nuovamente anche se la stringa di query XDEBUG_SESSION_START non viene aggiunta alla fine dell'URL.

Chiusura della sessione di debug

Quando non desideri più che Eclipse entri in modalità di debug quando una pagina viene caricata sul tuo blog locale, inserisci una chiamata URL simile a quella nel tuo browser:

 http: // localhost / path / to / wordpress / XDEBUG_SESSION_STOP

Questo cancellerà il cookie xdebug e le tue pagine verranno caricate normalmente fino a quando non apri un'altra sessione xdebug.

Usi Eclipse e Xdebug per lo sviluppo hardcore di WordPress? Se sì, hai qualche consiglio in più? Altrimenti, cosa ti impedisce di immergerti?