{"id":231039,"date":"2022-12-06T16:31:00","date_gmt":"2022-12-06T13:31:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231039"},"modified":"2022-12-07T12:17:09","modified_gmt":"2022-12-07T09:17:09","slug":"installazione-di-xdebug-parte-2-lide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/installazione-di-xdebug-parte-2-lide\/","title":{"rendered":"Installazione di Xdebug, Parte 2: L&#8217;IDE"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/it\/installazione-di-xdebug-parte-1-il-modulo-xdebug\/\" title=\"Ora che Xdebug \u00e8 installato con la tua installazione locale di PHP\">Ora che Xdebug \u00e8 installato con la tua installazione locale di PHP<\/a><\/strong>, \u00e8 il momento di collegarlo all&#8217;IDE. Questo ci fornisce tutti i vantaggi che Xdebug ha da offrire.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7414e9e342.png\" alt=\"Installazione di Xdebug, Parte 2: L&#039;IDE\"><\/a><\/p>\n<p>Cio\u00e8, ci permette di:<\/p>\n<ul>\n<li>impostare punti di interruzione,<\/li>\n<li>scorrere il nostro codice,<\/li>\n<li>e guarda le variabili<\/li>\n<\/ul>\n<p>Per tutto il tempo il programma \u00e8 in esecuzione. Ci\u00f2 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.<\/p>\n<p>Quindi, certo, anche se si chiama debug per rimuovere i bug, pu\u00f2 anche fornire informazioni su come viene eseguita un&#8217;applicazione, un tema o un plug-in basato su WordPress e pu\u00f2 aiutarci a comprendere meglio il core di WordPress.<\/p>\n<h2>Installazione di Xdebug in Visual Studio Code<\/h2>\n<p>A questo punto, dovresti avere il seguente ambiente configurato sul tuo computer locale:<\/p>\n<ul>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/local-development-for-the-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Valet<\/a><\/strong> (che include Nginx e MySQL e <strong><a href=\"https:\/\/tommcfarlin.com\/databases-and-tools-indie-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">strumenti correlati<\/a><\/strong> )<\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/it\/installazione-di-wordpress-per-lo-sviluppo-locale\/\" title=\"WordPress\">WordPress<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/tommcfarlin.com\/the-independent-wordpress-developer\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Codice di Visual Studio<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/it\/installazione-di-xdebug-parte-1-il-modulo-xdebug\/\" title=\"Xdebug\">Xdebug<\/a><\/strong><\/li>\n<\/ul>\n<p>Le attivit\u00e0 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\u00ec via ogni volta che \u00e8 in esecuzione nel browser.<\/p>\n<p>Detto questo, iniziamo.<\/p>\n<h3>1 Installazione delle estensioni necessarie<\/h3>\n<p>Innanzitutto, assicuriamoci che l&#8217;estensione di debug PHP sia installata in Visual Studio Code. Dal menu Estensioni nella barra laterale dell&#8217;IDE, cerca PHP Debug e dovresti vedere una schermata come la seguente.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74153b170c.png\" alt=\"Installazione di Xdebug, Parte 2: L&#039;IDE\"><\/a><\/p>\n<p>Se l&#8217;estensione non \u00e8 gi\u00e0 installata, vai avanti e installala. Potrebbe essere necessario riavviare Visual Studio Code per rendere effettiva la nuova estensione.<\/p>\n<p>Da qui, ci sono alcune impostazioni di configurazione aggiuntive che dobbiamo verificare prima di tentare di eseguire il debug di qualsiasi codice.<\/p>\n<h3>2 Configurazione di Xdebug (ancora di pi\u00f9!)<\/h3>\n<p>Ricordiamo dal <strong><a href=\"https:\/\/wordpress.mediadoma.com\/it\/installazione-di-xdebug-parte-1-il-modulo-xdebug\/\" title=\"post precedente\">post precedente<\/a><\/strong> che dovevamo includere Xdebug nel nostro file <strong>php.ini<\/strong>. Nello specifico, abbiamo dovuto aggiungere <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-18-reference-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">la seguente riga di codice<\/a><\/strong> per abilitare Xdebug:<\/p>\n<pre><code>zend_extension=\"\/usr\/local\/lib\/php\/pecl\/20160303\/xdebug.so\"<\/code><\/pre>\n<p>Ora dobbiamo fare un po&#8217; pi\u00f9 di lavoro.<\/p>\n<ol>\n<li>dovremo aggiungere una riga di configurazione al file <strong>php.ini<\/strong> a cui si fa riferimento <strong><a href=\"https:\/\/wordpress.mediadoma.com\/it\/installazione-di-xdebug-parte-1-il-modulo-xdebug\/\" title=\"nell&#039;ultimo post\">nell&#8217;ultimo post<\/a><\/strong> ,<\/li>\n<li>dovremo impostare uno script demo per assicurarci che ci sia una sezione Xdebug adeguata,<\/li>\n<li>dovremo configurare Visual Studio Code<\/li>\n<\/ol>\n<p>Fortunatamente, tutto quanto sopra sono attivit\u00e0 relativamente veloci. Innanzitutto, la riga di configurazione che vorrai aggiungere al tuo file <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-20-set-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e8 la seguente:<\/a><\/strong><\/p>\n<pre><code>[XDebug]\nxdebug.remote_enable = 1\nxdebug.remote_autostart = 1<\/code><\/pre>\n<p>Quindi, imposta uno script demo e collegalo a Valet. Puoi farlo facilmente creando una directory sul desktop, creando qualcosa come <strong>test.php<\/strong> e quindi aggiungendo <strong>phpinfo();<\/strong> al file.<\/p>\n<p>Successivamente, <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#the-link-command\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">collega<\/a><\/strong> la directory e <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#other-valet-commands\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">riavvia<\/a><\/strong> Valet. Mi \u00e8 capitato di nominare la mia directory di esempio e ho rilasciato un file <strong>test.php<\/strong> nella directory.<\/p>\n<p>Consentendo che tutto sia configurato correttamente, dovresti essere in grado di caricare il file nel tuo browser e vedere qualcosa di simile al seguente:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e74157a25f2.png\" alt=\"Installazione di Xdebug, Parte 2: L&#039;IDE\"><\/a><\/p>\n<p>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.<\/p>\n<p>Naturalmente, avremo bisogno di uno script demo che possiamo testare, quindi <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-21-test-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ho scritto qualcosa che \u00e8 banale<\/a><\/strong> ma che ti dar\u00e0 un&#8217;idea di cosa aspettarti quando si impostano i punti di interruzione e cosa no.<\/p>\n<pre><code>&lt;?php\n\n\/\/ First, set a sample name.\n$exampleName = 'alice';\necho $exampleName;\n\n\/\/ Next, change the name and display it.\nif ('alice' === $exampleName) {\n    $exampleName = 'bob';\n}\necho $exampleName;\n<\/code><\/pre>\n<p>Ora rivolgiamo la nostra attenzione all&#8217;IDE. In Visual Studio Code, fai clic sull&#8217;icona <strong>Debug<\/strong> che si trova appena sopra l&#8217; icona <strong>Estensioni<\/strong> e appena sotto l&#8217; icona del <strong>controllo del codice sorgente<\/strong>.<\/p>\n<p>Nella barra laterale in alto, noterai che c&#8217;\u00e8 un pulsante di riproduzione. Accanto a questo c&#8217;\u00e8 un elenco a discesa. Potrebbe leggere &quot;Nessuna configurazione&quot;. Se \u00e8 cos\u00ec, e suppongo che lo sia, ci sono alcuni passaggi molto specifici che dovrai seguire per assicurarti che il debug funzioni correttamente.<\/p>\n<h4>1 Aprire la directory dello script<\/h4>\n<p>Dovrai assicurarti di trovarti nella directory dello script in Visual Studio Code.<\/p>\n<p>Cio\u00e8, non \u00e8 sufficiente assicurarsi di avere solo un file aperto. Visual Studio Code deve sapere da quale directory stai lavorando (perch\u00e9 crea una directory <strong>.vscode<\/strong> nascosta all&#8217;interno della directory padre).<\/p>\n<h4>2 Creare la configurazione di avvio<\/h4>\n<p>La configurazione di avvio predefinita dovrebbe funzionare immediatamente, ma \u00e8 basata sul passaggio precedente.<\/p>\n<p>Dopo aver aperto una directory (nel mio caso, quella che contiene <strong>test.php<\/strong>) 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 <strong>Aiuto<\/strong> e quindi scegli Tavolozza comandi).<\/p>\n<p>Una volta visualizzato, inserisci <strong>&gt; launch.json<\/strong> e ti dar\u00e0 la possibilit\u00e0 di visualizzare il file <strong>launch.json<\/strong>. Fuori dagli schemi, dovrebbe <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-22-launch-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">apparire cos\u00ec<\/a><\/strong> :<\/p>\n<pre><code>{\n    \/\/ Use IntelliSense to learn about possible attributes.\n    \/\/ Hover to view descriptions of existing attributes.\n    \/\/ For more information, visit: https:\/\/go.microsoft.com\/fwlink\/?linkid=830387\n    \"version\": \"0.2.0\",\n    \"configurations\": [\n        {\n            \"name\": \"Listen for XDebug\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"port\": 9000\n        },\n        {\n            \"name\": \"Launch currently open script\",\n            \"type\": \"php\",\n            \"request\": \"launch\",\n            \"program\": \"${file}\",\n            \"cwd\": \"${fileDirname}\",\n            \"port\": 9000\n        }\n    ]\n}<\/code><\/pre>\n<p>A questo punto, il menu <strong>Debug<\/strong> dovrebbe avere qualcosa come Avvia script attualmente aperto accanto all&#8217;icona di riproduzione. In caso contrario, ti dar\u00e0 la possibilit\u00e0 di selezionare qualcosa come PHP (dal momento che abbiamo installato l&#8217;estensione).<\/p>\n<p>In tal caso, seleziona quell&#8217;opzione.<\/p>\n<h3>3 Imposta alcuni punti di interruzione<\/h3>\n<p>Ora \u00e8 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.<\/p>\n<p>Il mio \u00e8 semplice:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415b5ced0.png\" alt=\"Installazione di Xdebug, Parte 2: L&#039;IDE\"><\/a><\/p>\n<p>Successivamente, spera nel tuo IDE e quindi fai clic sul riquadro sinistro a sinistra del numero di riga. Questo imposter\u00e0 alcuni punti di interruzione.<\/p>\n<p>Ecco un esempio:<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7415f30251.png\" alt=\"Installazione di Xdebug, Parte 2: L&#039;IDE\"><\/a><\/p>\n<p>Ora fai clic sul pulsante <strong>Riproduci<\/strong> 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\u00e9 daremo uno sguardo pi\u00f9 approfondito a questi nel prossimo post.<\/p>\n<p>Si noti inoltre che il riquadro di sinistra contiene alcune informazioni su variabili, orologi e cos\u00ec via. Se hai impostato punti di interruzione sulle variabili locali, noterai che <strong>$exampleName<\/strong> \u00e8 evidenziato ma probabilmente non inizializzato.<\/p>\n<p>Fai clic sul pulsante <strong>Riproduci nei nuovi controlli che sono apparsi e dovrebbe essere eseguito fino al punto di interruzione successivo.<\/strong><\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-162583-61e7416248504.png\" alt=\"Installazione di Xdebug, Parte 2: L&#039;IDE\"><\/a><\/p>\n<p>La riga verr\u00e0 ora evidenziata e, nel riquadro di debug, verr\u00e0 assegnato un valore a <strong>$exampleName .<\/strong> Nel mio caso, questa \u00e8 Alice.<\/p>\n<p>Puoi continuare a giocare con questo quanto vuoi per avere un&#8217;idea di come funziona il debugger.<\/p>\n<h2>La prossima volta, Screencast<\/h2>\n<p>Il debug \u00e8 potente, ma pu\u00f2 essere scoraggiante in molti modi. A partire dal prossimo post, inizier\u00f2 a condividere alcuni screencast che spiegano come:<\/p>\n<ul>\n<li>funzioni di debug e variabili,<\/li>\n<li>cambiare i valori al volo,<\/li>\n<li>lavorare con la console di debug,<\/li>\n<li>e altro ancora.<\/li>\n<\/ul>\n<p>Questi richiederanno un po&#8217; pi\u00f9 di tempo perch\u00e9 saranno dei video che descrivono come farlo, ma il vantaggio dovrebbe essere grande.<\/p>\n<p>Se non hai ancora avuto la possibilit\u00e0 di recuperare il ritardo con tutti i contenuti di questa serie, lo consiglio vivamente.<\/p>\n<h3>\ud83d\udce3 Una nota per i vantaggi dei membri<\/h3>\n<p>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.<\/p>\n<p>Ne parler\u00f2 di pi\u00f9 la prossima settimana.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dopo aver installato Xdebug, ecco come collegarlo al tuo IDE e ottenere informazioni dettagliate sulle variabili, sulle funzioni e sull&#8217;ordine in cui esegue l&#8217;intero programma del codice.<\/p>\n","protected":false},"author":1,"featured_media":236530,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[720],"tags":[1168],"class_list":["post-231039","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppatore","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=231039"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/231039\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/236530"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=231039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=231039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=231039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}