Debug in locale (da Flywheel): una guida per principianti

Avere problemi su un sito Web o anche all'interno dell'installazione locale di un sito Web può essere snervante. Dopotutto, problemi di prestazioni o bug del sito possono causare tempi di inattività del sito. E i tempi di inattività del sito possono significare perdita di traffico, opportunità perse e persino entrate perse.

Per fortuna, esistono numerose soluzioni di debug per identificare e riparare i problemi del sito. Ma come puoi sapere cosa funzionerà meglio per la tua situazione?

In Local è disponibile un approccio su più fronti per il debug. In questa sezione verranno discusse le opzioni di debug predefinite incluse in Local, nonché i modi per identificare gli errori e i componenti aggiuntivi aggiuntivi che è possibile utilizzare per individuare e risolvere i problemi in modo più rapido ed efficiente.

Che cos'è Xdebug in locale?

Prima di poter discutere come eseguire il debug in Local, dobbiamo prima parlare di Xdebug, lo strumento di debug presente in Local e di alcune delle sue caratteristiche più degne di nota.

Xdebug è in realtà un'estensione PHP che semplifica il processo di debug. In primo luogo, rende più pulita la formattazione per la funzione var_dump () e aggiunge ulteriori avvisi e avvisi su errori specifici. In questo modo, rende l'esperienza utente più intuitiva.

Nel caso non lo sapessi, var_dump() è un utile bit di PHP che rivela rapidamente cosa c'è che non va nel tuo codice. Ma la distinzione qui è che se non avevi Xdebug a portata di mano, il codice prodotto quando chiami var_dump() sarebbe molto più difficile da leggere. Inoltre, dovresti formattare il tuo PHP in un modo molto particolare anche quando chiami var_dump() innanzitutto.

Xdebug è disponibile in Local perché offre una maggiore profondità di informazioni sugli errori quando si verificano. Viene inoltre fornito con un debugger a fasi che semplifica il processo di debug, soprattutto per problemi più grandi. Il debugger passo funziona consentendoti di valutare il codice passo dopo passo in punti di interruzione specifici. Ciò consente di valutare il codice in sezioni più piccole e di individuare i problemi più facilmente.

E la parte migliore è che Xdebug è abilitato in Local per impostazione predefinita, quindi non devi nemmeno modificare le impostazioni per iniziare. Basta aprire Local e andare.

Come eseguire il debug di un sito Web in locale

Puoi eseguire il debug di un sito Web in Local in alcuni modi chiave. Ecco i passaggi principali di cui parleremo:

1. Identificazione degli errori della console del browser
2. Utilizzo di Query Monitor
3. Tramite Xdebug e VS Code
4. Con Xdebug e PhpStorm
5. Utilizzo di Xdebug per il debug dei passaggi

Immergiamoci.

1. Identifica gli errori della console del browser

Il primo passaggio per il debug è l'utilizzo della console del browser, che fa parte di tutti gli strumenti di sviluppo del browser. Ciò ti consente di individuare gli errori sulle pagine Web senza strumenti speciali. Avvia semplicemente Local, accedi alla pagina in questione con il browser che preferisci e usa la console per individuare gli errori. Quella che segue è una ripartizione di come accedere alla console del browser su più browser.

Se stai usando Chrome...

1. Apri DevTools andando su Altri strumenti > Strumenti per sviluppatori nel menu del browser Chrome. In alternativa, premi Ctrl/Cmd+Shift+I .
2. Fare clic sulla scheda Console .
3. Se sono presenti errori, dovrebbero essere visibili ora. In caso contrario, ricaricare la pagina Web per generarli.
4. Prendi nota del tipo di errore, della posizione in cui si trova e del numero di riga nella console del browser.

Se stai usando Firefox...

1. Apri gli strumenti per sviluppatori del browser andando su Altri strumenti > Strumenti per sviluppatori Web nel menu Firefox. Ctrl/Cmd+Shift+I funziona anche qui.
2. Fare clic su Console scheda. In alternativa, puoi anche accedere alla console direttamente tramite Altri strumenti > Console browser .
3. Tutti gli errori dovrebbero ora essere visibili. In caso contrario, ricarica la pagina.

Se stai usando Safari...

1. Attiva Strumenti per sviluppatori andando su Preferenze > Avanzate nel menu Safari. Opzione+Cmd+I è tuo amico qui.
2. Seleziona la casella accanto a Mostra menu Sviluppo nella barra dei menu. Quindi, chiudere la finestra di dialogo.
3. Fare clic su Sviluppo > Mostra console errori . Stesso affare come sopra.

Armati di queste informazioni, puoi tornare al file system impostato in Local e trovare il bit specifico di codice che causa i problemi e quindi implementare una correzione. Utilizzare il pulsante Vai alla cartella del sito per accedere alla posizione dei siti Web locali.

2. Utilizzare Query Monitor per risolvere i problemi di prestazioni del sito

Puoi anche identificare e riparare i problemi del sito Web direttamente in WordPress. In effetti, il plug-in Query Monitor è una scelta fantastica per il debug e per identificare i problemi di prestazioni, in particolare. Ciò costituisce un'utile coppia con gli strumenti di debug locali integrati ed è particolarmente utile per individuare problemi di plugin e temi di terze parti.

Puoi installare il plugin come qualsiasi altro. Basta andare su Plugin > Aggiungi nuovo e cercarlo per nome. Trovalo nell'elenco e fai clic su Installa ora , quindi su Attiva una volta scaricato.

Cosa può dirti Query Monitor

Dopo aver installato il plug-in, dovresti vedere una nuova opzione di menu nella parte superiore della dashboard di WordPress.

Passandoci sopra verrà visualizzato un elenco a discesa di strumenti e opzioni di Query Monitor. Selezionando uno di essi si aprirà un menu in basso in cui puoi conoscere maggiori dettagli sulla pagina corrente.

Tra le altre cose, Query Monitor ti fornirà una panoramica delle prestazioni della tua pagina, tra cui:

• Picco di utilizzo della memoria. Questo strumento mostra quanta memoria viene utilizzata per generare una pagina in un dato momento.
• Tempo di generazione della pagina. Mostra la quantità di tempo necessaria per la generazione di una pagina.
• Tempo di interrogazione del database. Infine, questo strumento mostra quanto tempo ha impiegato il database per rispondere alle richieste di temi o plugin.

Oltre ai problemi di prestazioni, questo plugin può anche identificare errori e avvisi PHP, proprio come fa Xdebug. Tuttavia, i suoi sforzi si concentrano su temi e plug-in di terze parti. Ciò che è conveniente qui è che se sono presenti errori, verrà visualizzata una nuova scheda all'interno dello strumento correttamente chiamato Errori PHP che elencherà ogni errore con la sua minaccia alla sicurezza. Ti dirà anche la riga di codice in cui appare l'errore e anche il codice di errore o l'avviso specifico.

Ora questo è davvero utile per i siti Web già attivi o in fase di test in fase avanzata. Tuttavia, se sei ancora nella fase di sviluppo locale, usare Xdebug in Local sarà la soluzione migliore.

3. Configurazione di Xdebug e VS Code per il debug

Di nuovo in Local, puoi utilizzare Xdebug in vari modi per eseguire il debug del sito locale. Per ottenere più soldi per i tuoi soldi, per così dire, puoi aggiungere la potenza di VS Code all'equazione.

VS Code è un editor di codice open source con strumenti estesi e un'interfaccia utente più intuitiva. Rende il processo di debug riga per riga molto più intuitivo e facile da vedere.

Puoi effettivamente connettere VS Code a Xdebug Step Debugger con grande efficacia. Ecco come configurarlo per l'uso all'interno di Local:

1. Scarica VS Code e installalo secondo le istruzioni dello sviluppatore.
2. Scarica e installa un'estensione del debugger PHP. La documentazione di Local consiglia l'estensione PHP Debug per questa attività.
3. In Locale, fai clic su Componenti aggiuntivi > Xdebug + VS Code .
4. Fare clic su Installa componente aggiuntivo .
5. Una volta terminato, premi Abilita e riavvia .
6. Apri un sito in Local e quindi fai clic sulla scheda Utilità .
7. Fare clic su Aggiungi configurazione di esecuzione a VS Code .
8. Verrà avviato VS Code e potrai quindi avviare il processo di debug.

Se non preferisci VS Code, puoi utilizzare un altro strumento di modifica per l'attività.

4. Configurazione di Xdebug e PhpStorm per il debug

Un'altra opzione è usare PhpStorm con Xdebug. Puoi aggiungerlo a Local tramite il componente aggiuntivo e funzionerà insieme a Xdebug Step Debugger. L'installazione e la configurazione sono molto simili al processo descritto per VS Code sopra. Per utilizzarlo, eseguire i seguenti passaggi:

1. Scarica e installa PhpStorm.
2. In Local, fai clic su Componenti aggiuntivi > Xdebug + PhpStorm .
3. Fare clic su Installa componente aggiuntivo .
4. Ancora una volta, Abilita e riavvia al termine.
5. Apri qualsiasi sito in Local e fai clic su Utilità scheda.
6. Fare clic su Aggiungi configurazione di esecuzione a PhpStorm .
7. Con PhpStorm attivo, imposta i punti di interruzione facendo clic sulla riga di interruzione nella riga di codice specifica in cui desideri che si verifichi il punto di interruzione.
8. Fare clic su Riproduci per avviare il processo di debug.

Se desideri ulteriori indicazioni durante il processo di debug, Step Debugging è sempre un'opzione.

5. Utilizzo di Xdebug per il debug dei passaggi

Step Debugging è uno strumento super utile e parte di Xdebug che essenzialmente ti tiene per mano durante il processo di debug. Funziona con VS Code e PhpStorm (così come molti altri IDE ed editor di testo) per fornire strumenti, passaggi e protocolli di debug dettagliati ma facili da seguire.

In Local, non devi fare nulla per configurare Xdebug: è abilitato automaticamente per impostazione predefinita. Sebbene ci siano istruzioni di configurazione più complesse se si dispone di un ambiente di test complicato (con più sistemi che contribuiscono contemporaneamente), assumeremo che sia solo necessario eseguire il debug, su un sistema, in un'installazione di Local per ora.

Per utilizzare il debug dei passaggi, tutto ciò che devi fare è seguire i passaggi descritti nelle due sezioni precedenti. La funzione funziona sia con VS Code che con PhpStorm. Una volta che tutto è impostato, imposterà automaticamente i punti di interruzione e riprodurrà il codice uno per uno. Ciò offre un modo intuitivo per eseguire il codice, visualizzare gli errori e correggerli non appena si presentano.

Debug in Local Made Easy

Come puoi vedere, il debug in Local è in realtà un processo abbastanza semplice che richiede una configurazione minima per iniziare. Lo strumento di debug principale è già presente per impostazione predefinita. Tutto quello che devi fare è configurare il tuo editor di testo o IDE preferito, configurare uno o due componenti aggiuntivi e sei pronto. Ovviamente, dovrai eseguire le correzioni di bug effettive per ottenere il tuo sito Web in perfetta forma. Ma almeno, il processo di debug stesso può essere eseguito con facilità e con il minimo sforzo.

Quali sono i tuoi strumenti preferiti per eseguire il debug in Local? Ci piacerebbe sentire il tuo feedback nei commenti qui sotto.