{"id":229351,"date":"2022-10-24T14:20:00","date_gmt":"2022-10-24T11:20:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229351"},"modified":"2022-11-09T06:37:51","modified_gmt":"2022-11-09T03:37:51","slug":"visual-studio-code-debugger-primer-e-screencast","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/visual-studio-code-debugger-primer-e-screencast\/","title":{"rendered":"Visual Studio Code Debugger: Primer e Screencast"},"content":{"rendered":"\n<p>Nei post precedenti, ho parlato un po&#8217; del motivo per cui l&#8217;utilizzo di un debugger adeguato rispetto ad alcune delle istruzioni integrate di PHP \u00e8 importante. Nell&#8217;ultimo <a href=\"https:\/\/wordpress.mediadoma.com\/it\/xdebug-codice-di-visual-studio-e-mamp\/\" title=\"post\" >post<\/a>, inoltre, spiego come configurare Xdebug con Visual Studio Code (e MAMP Pro, se stai utilizzando).<\/p>\n<p>Ma se non hai mai usato uno strumento come questo prima, non hai mai visto come funziona, o non hai mai visto perch\u00e9 \u00e8 cos\u00ec potente, voglio parlarne un po&#8217; in questo post.<\/p>\n<p>Quindi esaminer\u00f2 un po&#8217; questa operazione nel contesto di alcune definizioni e schermate, nonch\u00e9 un breve screencast alla fine in modo da poter mostrare il debugger di Visual Studio Code che funziona in azione.<\/p>\n<h2>Il debugger di codice di Visual Studio<\/h2>\n<p>Supponendo che tu abbia installato il debugger; ci sono alcuni termini che vale la pena imparare. Certo, ce ne sono altri, ma questi sono quelli che considero fondamentali:<\/p>\n<ul>\n<li><strong>I punti di interruzione<\/strong> sono dove stai dicendo al programma di interrompere la sua esecuzione. Una volta che il codice si \u00e8 fermato a questo punto, puoi esaminare le variabili, vedere quali valori sono archiviati in memoria e cos\u00ec via.<\/li>\n<li><strong>Gli orologi<\/strong> sono variabili nel codice che vuoi letteralmente guardare mentre cambiano durante l&#8217;esecuzione delle variabili.<\/li>\n<li><strong>Start<\/strong> mette in moto il debugger. Anche se hai impostato punti di interruzione e controlli, il debugger non far\u00e0 nulla finch\u00e9 non lo avvii.<\/li>\n<li><strong>Step Into<\/strong> \u00e8 un&#8217;azione che, quando si esegue una chiamata di funzione, ti porter\u00e0 nella funzione che viene invocata. A volte questo \u00e8 utile, ad esempio se vuoi vedere cosa sta facendo la funzione; altre volte, non \u00e8 necessario se ti interessa solo la funzione in esecuzione o ti interessa solo ci\u00f2 che restituisce.<\/li>\n<li><strong>Step Over<\/strong> ti consentir\u00e0 di scavalcare l&#8217;esecuzione di una funzione in modo tale che l&#8217;esecuzione del programma si interrompa immediatamente dopo che la funzione che hai scavalcato \u00e8 terminata.<\/li>\n<li><strong>Esci<\/strong> viene utilizzato quando sei entrato in una funzione, raggiungi un punto in cui hai finito di valutare il codice e quindi sei pronto per tornare al punto in cui avevi impostato un punto di interruzione.<\/li>\n<li><strong>Stop<\/strong> interromper\u00e0 l&#8217;esecuzione del debugger.<\/li>\n<\/ul>\n<p>Suona relativamente chiaro, vero? Secondo me, \u00e8 pi\u00f9 facile vederlo in azione.<\/p>\n<p>Inoltre, per vedere quali icone fanno cosa, di solito la cosa migliore da fare \u00e8 passare il mouse sopra di esse e poi leggere i suggerimenti; tuttavia, dopo un tempo o due di utilizzo, acquisirai familiarit\u00e0 con ci\u00f2 che ciascuno fa.<\/p>\n<p>Dopotutto, le icone sono piuttosto descrittive.<\/p>\n<h3>Un esempio<\/h3>\n<p>Detto questo, supponendo che tu abbia seguito i passaggi nell&#8217;articolo precedente, ecco un breve esempio su come impostare un punto di interruzione e seguirne l&#8217;esecuzione tramite un plug-in.<\/p>\n<h4>1 punto di interruzione<\/h4>\n<p>Nota nell&#8217;immagine qui sotto, ho posizionato un punto di interruzione accanto a una riga di codice (come indicato dal punto rosso).<\/p>\n<p>\u00c8 qui che l&#8217;esecuzione si fermer\u00e0 una volta avviato il debugger e iniziato l&#8217;esecuzione del programma.<\/p>\n<h4>2 Impostare un orologio<\/h4>\n<p>Quindi, guardare una variabile significa che vogliamo vedere il valore di una variabile durante tutto il ciclo di vita del programma. Di seguito, aggiungo un orologio alla variabile $ description.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa6c2dd2b.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-167911-61e7aa6c2dd2b.png\" alt=\"Visual Studio Code Debugger: Primer e Screencast\" ><\/a><\/p>\n<p>Nella sezione successiva, vedrai il valore dell&#8217;orologio dopo che l&#8217;esecuzione del programma ha superato quella riga di codice.<\/p>\n<h4>3 Valuta l&#8217;orologio<\/h4>\n<p>Una volta che il codice ha superato quella riga, puoi vedere il valore della variabile nella\u00a0 sezione <strong>Watch<\/strong> del riquadro di debug.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa7036c8e.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-167911-61e7aa7036c8e.png\" alt=\"Visual Studio Code Debugger: Primer e Screencast\" ><\/a><\/p>\n<p>Avviso nella funzione, c&#8217;\u00e8 una chiamata a woocommerce_wp_text_input. Useremo questa funzione come esempio per entrare in una funzione poich\u00e9 \u00e8 una funzione che fa parte del core di WooCommerce.<\/p>\n<h4>4 Preparati a intervenire<\/h4>\n<p>Prima di entrare in una funzione, \u00e8 importante assicurarsi che il nome della funzione sia evidenziato.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa750310e.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-167911-61e7aa750310e.png\" alt=\"Visual Studio Code Debugger: Primer e Screencast\" ><\/a><\/p>\n<p>Una volta terminato, potrai fare clic sul pulsante <strong>Entra<\/strong> per vedere cosa sta succedendo nella funzione.<\/p>\n<h4>5 Entra<\/h4>\n<p>Dopo essere entrato, vedrai il codice che non hai scritto. Invece, \u00e8 il codice che fa parte di WooCommerce (almeno in questo esempio).<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa79897c0.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-167911-61e7aa79897c0.png\" alt=\"Visual Studio Code Debugger: Primer e Screencast\" ><\/a><\/p>\n<p>In base alla tua esperienza, vedrai il codice che forse hai scritto tu o che qualcun altro ha scritto.<\/p>\n<h4>6 Esci<\/h4>\n<p>Una volta uscito dal codice, tornerai alla riga di codice immediatamente dopo essere entrato nel codice.<\/p>\n<p><a href=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-167911-61e7aa7d94629.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-167911-61e7aa7d94629.png\" alt=\"Visual Studio Code Debugger: Primer e Screencast\" ><\/a><\/p>\n<p>Ha senso?<\/p>\n<h3>Uno Screencast<\/h3>\n<p>E infine, ecco un brevissimo screencast che illustra come appare tutto quanto sopra in azione:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/lzJZB5rqxlA\" frameborder=\"0\"><\/iframe><\/div>\n<p>Come accennato nel video, questo non \u00e8 affatto completo, ma dovrebbe essere sufficiente per mostrare quanto pu\u00f2 essere potente il debug.<\/p>\n<h2>Ci vuole tempo e pratica<\/h2>\n<p>Il debug richiede un po&#8217; pi\u00f9 di tempo rispetto al dump delle variabili sullo schermo.<\/p>\n<p>E non sto dicendo che fare questo non abbia il suo posto; tuttavia, se vuoi ottenere una comprensione pi\u00f9 profonda di cosa sta succedendo ogni volta che esegui il tuo programma, o se vuoi esplorare, ad esempio, il core di WordPress, usare un debugger \u00e8 davvero un buon modo per farlo.<\/p>\n<p>Inoltre, direi che l&#8217;utilizzo di un debugger pu\u00f2 aiutare a comprendere meglio cosa sta andando storto (o giusto) nel contesto del codice in modo da poter creare la migliore soluzione possibile per esso.<\/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>Alla fine illustrer\u00f2 un breve screencast in modo da poter mostrare il debugger di Visual Studio Code in azione.<\/p>\n","protected":false},"author":1,"featured_media":223730,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,720,844],"tags":[1168],"class_list":["post-229351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-sviluppatore","category-tutorial","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229351","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=229351"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229351\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}