{"id":229093,"date":"2022-10-24T14:11:00","date_gmt":"2022-10-24T11:11:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229093"},"modified":"2022-11-09T05:30:09","modified_gmt":"2022-11-09T02:30:09","slug":"depurador-de-codigo-do-visual-studio-uma-cartilha-e-um-screencast","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/depurador-de-codigo-do-visual-studio-uma-cartilha-e-um-screencast\/","title":{"rendered":"Depurador de c\u00f3digo do Visual Studio: uma cartilha e um screencast"},"content":{"rendered":"\n<p>Em posts anteriores, falei um pouco sobre por que usar um depurador adequado versus algumas das instru\u00e7\u00f5es internas do PHP s\u00e3o importantes. No <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/xdebug-visual-studio-code-e-mamp\/\" title=\"\u00faltimo post\" >\u00faltimo post<\/a>, inclusive, abordo como configurar o Xdebug com Visual Studio Code (e MAMP Pro, caso esteja usando).<\/p>\n<p>Mas se voc\u00ea nunca usou uma ferramenta como essa antes, nunca viu como ela funciona ou nunca viu por que ela \u00e9 t\u00e3o poderosa, quero abordar isso um pouco neste post.<\/p>\n<p>Ent\u00e3o, vou fazer um pouco de como fazer isso no contexto de algumas defini\u00e7\u00f5es e capturas de tela, bem como um breve screencast no final para que eu possa mostrar o depurador do Visual Studio Code funcionando em a\u00e7\u00e3o.<\/p>\n<h2>O depurador de c\u00f3digo do Visual Studio<\/h2>\n<p>Supondo que voc\u00ea tenha o depurador instalado; existem alguns termos que valem a pena aprender. Claro, existem mais, mas estes s\u00e3o os que considero fundamentais:<\/p>\n<ul>\n<li><strong>Pontos de interrup\u00e7\u00e3o<\/strong> s\u00e3o onde voc\u00ea est\u00e1 dizendo ao programa para interromper sua execu\u00e7\u00e3o. Uma vez que o c\u00f3digo tenha parado neste ponto, voc\u00ea pode examinar as vari\u00e1veis, ver quais valores est\u00e3o armazenados na mem\u00f3ria e assim por diante.<\/li>\n<li><strong>Os rel\u00f3gios<\/strong> s\u00e3o vari\u00e1veis \u200b\u200bno c\u00f3digo que voc\u00ea quer literalmente observar \u00e0 medida que mudam ao longo da execu\u00e7\u00e3o das vari\u00e1veis.<\/li>\n<li><strong>Iniciar<\/strong> coloca o depurador em movimento. Mesmo se voc\u00ea tiver pontos de interrup\u00e7\u00e3o e rel\u00f3gios definidos, o depurador n\u00e3o far\u00e1 nada at\u00e9 que voc\u00ea o inicie.<\/li>\n<li><strong>Step Into<\/strong> \u00e9 uma a\u00e7\u00e3o que, quando voc\u00ea atinge uma chamada de fun\u00e7\u00e3o, o levar\u00e1 para a fun\u00e7\u00e3o que est\u00e1 sendo invocada. \u00c0s vezes isso \u00e9 \u00fatil, como se voc\u00ea quiser ver o que a fun\u00e7\u00e3o est\u00e1 fazendo; outras vezes, \u00e9 desnecess\u00e1rio se voc\u00ea se preocupa apenas com a execu\u00e7\u00e3o da fun\u00e7\u00e3o ou apenas com o que ela retorna.<\/li>\n<li><strong>Step Over<\/strong> permitir\u00e1 que voc\u00ea passe por cima da execu\u00e7\u00e3o de uma fun\u00e7\u00e3o de forma que a execu\u00e7\u00e3o do programa pare imediatamente ap\u00f3s a conclus\u00e3o da fun\u00e7\u00e3o que voc\u00ea passou.<\/li>\n<li><strong>Step Out<\/strong> \u00e9 usado quando voc\u00ea entra em uma fun\u00e7\u00e3o, atinge um ponto em que terminou de avaliar o c\u00f3digo e, em seguida, est\u00e1 pronto para voltar para onde definiu um ponto de interrup\u00e7\u00e3o.<\/li>\n<li><strong>Stop<\/strong> encerrar\u00e1 a execu\u00e7\u00e3o do depurador.<\/li>\n<\/ul>\n<p>Parece relativamente claro, n\u00e3o \u00e9? Na minha opini\u00e3o, \u00e9 mais f\u00e1cil ver isso em a\u00e7\u00e3o.<\/p>\n<p>Al\u00e9m disso, para ver quais \u00edcones fazem o que, geralmente a melhor coisa a fazer \u00e9 passar o mouse sobre eles e ler as dicas de ferramentas; no entanto, depois de um tempo ou dois de us\u00e1-los, voc\u00ea estar\u00e1 familiarizado com o que cada um faz.<\/p>\n<p>Afinal, os \u00edcones s\u00e3o bastante descritivos.<\/p>\n<h3>Um exemplo<\/h3>\n<p>Com isso dito, supondo que voc\u00ea tenha seguido as etapas do artigo anterior, aqui est\u00e1 um pequeno exemplo de como voc\u00ea pode definir um ponto de interrup\u00e7\u00e3o e seguir sua execu\u00e7\u00e3o por meio de um plug-in.<\/p>\n<h4>1 ponto de interrup\u00e7\u00e3o<\/h4>\n<p>Observe na imagem abaixo que coloquei um ponto de interrup\u00e7\u00e3o ao lado de uma linha de c\u00f3digo (conforme indicado pelo ponto vermelho).<\/p>\n<p>\u00c9 aqui que a execu\u00e7\u00e3o vai parar quando eu iniciar o depurador e come\u00e7ar a executar o programa.<\/p>\n<h4>2 Defina um rel\u00f3gio<\/h4>\n<p>Em seguida, observar uma vari\u00e1vel significa que queremos ver o valor de uma vari\u00e1vel ao longo do ciclo de vida do programa. Abaixo, estou adicionando um rel\u00f3gio \u00e0 vari\u00e1vel $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=\"Depurador de c\u00f3digo do Visual Studio: uma cartilha e um screencast\" ><\/a><\/p>\n<p>Na pr\u00f3xima se\u00e7\u00e3o, voc\u00ea ver\u00e1 o valor do watch ap\u00f3s a execu\u00e7\u00e3o do programa passar por essa linha de c\u00f3digo.<\/p>\n<h4>3 Avalie o rel\u00f3gio<\/h4>\n<p>Depois que o c\u00f3digo tiver passado por essa linha, voc\u00ea poder\u00e1 ver o valor da vari\u00e1vel na\u00a0 se\u00e7\u00e3o <strong>Watch<\/strong> do painel de depura\u00e7\u00e3o.<\/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=\"Depurador de c\u00f3digo do Visual Studio: uma cartilha e um screencast\" ><\/a><\/p>\n<p>Observe na fun\u00e7\u00e3o, h\u00e1 uma chamada para woocommerce_wp_text_input. Usaremos essa fun\u00e7\u00e3o como exemplo para entrar em uma fun\u00e7\u00e3o, pois \u00e9 uma fun\u00e7\u00e3o que faz parte do n\u00facleo do WooCommerce.<\/p>\n<h4>4 Prepare-se para entrar<\/h4>\n<p>Antes de entrar em uma fun\u00e7\u00e3o, \u00e9 importante certificar-se de que o nome da fun\u00e7\u00e3o esteja destacado.<\/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=\"Depurador de c\u00f3digo do Visual Studio: uma cartilha e um screencast\" ><\/a><\/p>\n<p>Uma vez feito, voc\u00ea poder\u00e1 clicar no bot\u00e3o <strong>Step In<\/strong> para ver o que est\u00e1 acontecendo na fun\u00e7\u00e3o.<\/p>\n<h4>5 Passo em<\/h4>\n<p>Depois de entrar, voc\u00ea ver\u00e1 o c\u00f3digo que n\u00e3o escreveu. Em vez disso, \u00e9 o c\u00f3digo que faz parte do WooCommerce (pelo menos neste exemplo).<\/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=\"Depurador de c\u00f3digo do Visual Studio: uma cartilha e um screencast\" ><\/a><\/p>\n<p>Com base em sua experi\u00eancia, voc\u00ea ver\u00e1 o c\u00f3digo que talvez voc\u00ea escreveu ou que outra pessoa escreveu.<\/p>\n<h4>6 Sair<\/h4>\n<p>Depois de sair do c\u00f3digo, voc\u00ea retornar\u00e1 \u00e0 linha de c\u00f3digo imediatamente depois de entrar no c\u00f3digo.<\/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=\"Depurador de c\u00f3digo do Visual Studio: uma cartilha e um screencast\" ><\/a><\/p>\n<p>Faz sentido?<\/p>\n<h3>Um screencast<\/h3>\n<p>E, finalmente, aqui est\u00e1 um breve screencast que mostra tudo o que foi dito acima em a\u00e7\u00e3o:<\/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>Como mencionado no v\u00eddeo, isso n\u00e3o \u00e9 abrangente, mas deve ser suficiente para mostrar o qu\u00e3o poderosa a depura\u00e7\u00e3o pode ser.<\/p>\n<h2>Leva tempo e pr\u00e1tica<\/h2>\n<p>A depura\u00e7\u00e3o leva um pouco mais de tempo do que despejar vari\u00e1veis \u200b\u200bna tela.<\/p>\n<p>E n\u00e3o estou dizendo que fazer isso n\u00e3o tem seu lugar; no entanto, se voc\u00ea deseja obter uma compreens\u00e3o mais profunda do que est\u00e1 acontecendo sempre que est\u00e1 executando seu programa, ou deseja explorar, digamos, o n\u00facleo do WordPress, usar um depurador \u00e9 uma maneira muito boa de fazer isso.<\/p>\n<p>Al\u00e9m disso, eu diria que usar um depurador pode ajudar a entender melhor o que est\u00e1 errado (ou certo) no contexto do seu c\u00f3digo para que voc\u00ea possa criar a melhor solu\u00e7\u00e3o poss\u00edvel para ele.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eu vou passar por um breve screencast no final para que eu possa mostrar o depurador do Visual Studio Code em a\u00e7\u00e3o.<\/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":[722,920,846],"tags":[1170],"class_list":["post-229093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","category-outro","category-tutoriais","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=229093"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229093\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/223730"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}