Installazione di Xdebug, Parte 2: L’IDE

Ora che Xdebug è installato con la tua installazione locale di PHP, è il momento di collegarlo all’IDE. Questo ci fornisce tutti i vantaggi che Xdebug ha da offrire.

Cioè, ci permette di:

• impostare punti di interruzione,
• scorrere il nostro codice,
• e guarda le variabili

Per tutto il tempo il programma è in esecuzione. Ciò significa che durante il rendering di una pagina, siamo in grado di impostare punti nella nostra base di codice in cui possiamo vedere cosa sta facendo il server con il nostro codice.

Quindi, certo, anche se si chiama debug per rimuovere i bug, può anche fornire informazioni su come viene eseguita un’applicazione, un tema o un plug-in basato su WordPress e può aiutarci a comprendere meglio il core di WordPress.

Installazione di Xdebug in Visual Studio Code

A questo punto, dovresti avere il seguente ambiente configurato sul tuo computer locale:

• Valet (che include Nginx e MySQL e strumenti correlati )
• WordPress
• Codice di Visual Studio
• Xdebug

Le attività rimanenti per tutto quanto sopra riguardano il collegamento di Xdebug in Visual Studio Code in modo da ottenere una rappresentazione letterale delle prestazioni di WordPress (e quindi del nostro lavoro), di cosa sta facendo e così via ogni volta che è in esecuzione nel browser.

Detto questo, iniziamo.

1 Installazione delle estensioni necessarie

Innanzitutto, assicuriamoci che l’estensione di debug PHP sia installata in Visual Studio Code. Dal menu Estensioni nella barra laterale dell’IDE, cerca PHP Debug e dovresti vedere una schermata come la seguente.

Se l’estensione non è già installata, vai avanti e installala. Potrebbe essere necessario riavviare Visual Studio Code per rendere effettiva la nuova estensione.

Da qui, ci sono alcune impostazioni di configurazione aggiuntive che dobbiamo verificare prima di tentare di eseguire il debug di qualsiasi codice.

2 Configurazione di Xdebug (ancora di più!)

Ricordiamo dal post precedente che dovevamo includere Xdebug nel nostro file php.ini. Nello specifico, abbiamo dovuto aggiungere la seguente riga di codice per abilitare Xdebug:

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Ora dobbiamo fare un po’ più di lavoro.

1. dovremo aggiungere una riga di configurazione al file php.ini a cui si fa riferimento nell’ultimo post ,
2. dovremo impostare uno script demo per assicurarci che ci sia una sezione Xdebug adeguata,
3. dovremo configurare Visual Studio Code

Fortunatamente, tutto quanto sopra sono attività relativamente veloci. Innanzitutto, la riga di configurazione che vorrai aggiungere al tuo file è la seguente:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Quindi, imposta uno script demo e collegalo a Valet. Puoi farlo facilmente creando una directory sul desktop, creando qualcosa come test.php e quindi aggiungendo phpinfo(); al file.

Successivamente, collega la directory e riavvia Valet. Mi è capitato di nominare la mia directory di esempio e ho rilasciato un file test.php nella directory.

Consentendo che tutto sia configurato correttamente, dovresti essere in grado di caricare il file nel tuo browser e vedere qualcosa di simile al seguente:

E ora dobbiamo configurare Xdebug. Quindi, supponendo che tutto quanto sopra sia andato bene e che le estensioni siano installate e funzionanti correttamente, lavorare con Visual Studio Code dovrebbe essere facile.

Naturalmente, avremo bisogno di uno script demo che possiamo testare, quindi ho scritto qualcosa che è banale ma che ti darà un’idea di cosa aspettarti quando si impostano i punti di interruzione e cosa no.

<?php

// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;

// Next, change the name and display it.
if ('alice' === $exampleName) {
    $exampleName = 'bob';
}
echo $exampleName;

Ora rivolgiamo la nostra attenzione all’IDE. In Visual Studio Code, fai clic sull’icona Debug che si trova appena sopra l’ icona Estensioni e appena sotto l’ icona del controllo del codice sorgente.

Nella barra laterale in alto, noterai che c’è un pulsante di riproduzione. Accanto a questo c’è un elenco a discesa. Potrebbe leggere "Nessuna configurazione". Se è così, e suppongo che lo sia, ci sono alcuni passaggi molto specifici che dovrai seguire per assicurarti che il debug funzioni correttamente.

1 Aprire la directory dello script

Dovrai assicurarti di trovarti nella directory dello script in Visual Studio Code.

Cioè, non è sufficiente assicurarsi di avere solo un file aperto. Visual Studio Code deve sapere da quale directory stai lavorando (perché crea una directory .vscode nascosta all’interno della directory padre).

2 Creare la configurazione di avvio

La configurazione di avvio predefinita dovrebbe funzionare immediatamente, ma è basata sul passaggio precedente.

Dopo aver aperto una directory (nel mio caso, quella che contiene test.php) in Visual Studio Code, avvia la tavolozza dei comandi (puoi farlo tramite una scorciatoia che varia da sistema operativo a sistema operativo o utilizzando il menu Aiuto e quindi scegli Tavolozza comandi).

Una volta visualizzato, inserisci > launch.json e ti darà la possibilità di visualizzare il file launch.json. Fuori dagli schemi, dovrebbe apparire così :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

A questo punto, il menu Debug dovrebbe avere qualcosa come Avvia script attualmente aperto accanto all’icona di riproduzione. In caso contrario, ti darà la possibilità di selezionare qualcosa come PHP (dal momento che abbiamo installato l’estensione).

In tal caso, seleziona quell’opzione.

3 Imposta alcuni punti di interruzione

Ora è il momento di vedere il debugger in azione. A questo punto, vai avanti e avvia una finestra del browser con il tuo script di test.

Il mio è semplice:

Successivamente, spera nel tuo IDE e quindi fai clic sul riquadro sinistro a sinistra del numero di riga. Questo imposterà alcuni punti di interruzione.

Ecco un esempio:

Ora fai clic sul pulsante Riproduci per il debugger. Immediatamente, dovresti notare che la barra di stato diventa arancione e alcuni controlli di debug (per Continua, Entra, Esci, Riavvia e Interrompi). Non siamo interessati a questi al momento poiché daremo uno sguardo più approfondito a questi nel prossimo post.

Si noti inoltre che il riquadro di sinistra contiene alcune informazioni su variabili, orologi e così via. Se hai impostato punti di interruzione sulle variabili locali, noterai che $exampleName è evidenziato ma probabilmente non inizializzato.

Fai clic sul pulsante Riproduci nei nuovi controlli che sono apparsi e dovrebbe essere eseguito fino al punto di interruzione successivo.

La riga verrà ora evidenziata e, nel riquadro di debug, verrà assegnato un valore a $exampleName . Nel mio caso, questa è Alice.

Puoi continuare a giocare con questo quanto vuoi per avere un’idea di come funziona il debugger.

La prossima volta, Screencast

Il debug è potente, ma può essere scoraggiante in molti modi. A partire dal prossimo post, inizierò a condividere alcuni screencast che spiegano come:

• funzioni di debug e variabili,
• cambiare i valori al volo,
• lavorare con la console di debug,
• e altro ancora.

Questi richiederanno un po’ più di tempo perché saranno dei video che descrivono come farlo, ma il vantaggio dovrebbe essere grande.

Se non hai ancora avuto la possibilità di recuperare il ritardo con tutti i contenuti di questa serie, lo consiglio vivamente.

📣 Una nota per i vantaggi dei membri

Nota, tuttavia, prima del prossimo post sugli screencast e sulla prossima puntata di questa serie, ho alcuni annunci da fare specificamente per i membri del sito che includono sconti sul software basato su WordPress.

Ne parlerò di più la prossima settimana.