{"id":230853,"date":"2022-12-06T16:34:00","date_gmt":"2022-12-06T13:34:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230853"},"modified":"2022-12-07T12:17:13","modified_gmt":"2022-12-07T09:17:13","slug":"instalando-o-xdebug-parte-2-o-ide","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/instalando-o-xdebug-parte-2-o-ide\/","title":{"rendered":"Instalando o Xdebug, Parte 2: O IDE"},"content":{"rendered":"\n<p><strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/instalando-o-xdebug-parte-1-o-modulo-xdebug\/\" title=\"Agora que o Xdebug est\u00e1 instalado com sua instala\u00e7\u00e3o local do PHP\">Agora que o Xdebug est\u00e1 instalado com sua instala\u00e7\u00e3o local do PHP<\/a><\/strong>, \u00e9 hora de conect\u00e1-lo ao IDE. Isso nos fornece todas as vantagens que o Xdebug tem a oferecer.<\/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=\"Instalando o Xdebug, Parte 2: O IDE\"><\/a><\/p>\n<p>Ou seja, permite-nos:<\/p>\n<ul>\n<li>definir pontos de interrup\u00e7\u00e3o,<\/li>\n<li>passo pelo nosso c\u00f3digo,<\/li>\n<li>e observe as vari\u00e1veis<\/li>\n<\/ul>\n<p>O tempo todo o programa est\u00e1 em execu\u00e7\u00e3o. Isso significa que enquanto uma p\u00e1gina est\u00e1 sendo renderizada, podemos definir pontos em nossa base de c\u00f3digo onde podemos ver o que o servidor est\u00e1 fazendo com nosso c\u00f3digo.<\/p>\n<p>Ent\u00e3o, com certeza, embora seja chamado de depura\u00e7\u00e3o para remover bugs, tamb\u00e9m pode fornecer informa\u00e7\u00f5es sobre como um aplicativo, tema ou plug-in baseado em WordPress est\u00e1 sendo executado e pode nos ajudar a obter uma melhor compreens\u00e3o do n\u00facleo do WordPress.<\/p>\n<h2>Instalando o Xdebug no Visual Studio Code<\/h2>\n<p>Neste ponto, voc\u00ea deve ter o seguinte ambiente configurado em sua m\u00e1quina local:<\/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> (que inclui 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\">ferramentas relacionadas<\/a><\/strong> )<\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/instalando-o-wordpress-para-desenvolvimento-local\/\" 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\">C\u00f3digo do Visual Studio<\/a><\/strong><\/li>\n<li><strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/instalando-o-xdebug-parte-1-o-modulo-xdebug\/\" title=\"XdebugGenericName\">XdebugGenericName<\/a><\/strong><\/li>\n<\/ul>\n<p>As tarefas restantes para todos os itens acima envolvem vincular o Xdebug ao Visual Studio Code para obter uma representa\u00e7\u00e3o literal de como o WordPress (e, portanto, nosso trabalho) est\u00e1 sendo executado, o que est\u00e1 fazendo e assim por diante sempre que estiver sendo executado no navegador.<\/p>\n<p>Dito isso, vamos come\u00e7ar.<\/p>\n<h3>1 Instalando as Extens\u00f5es Necess\u00e1rias<\/h3>\n<p>Primeiro, vamos verificar se a extens\u00e3o de depura\u00e7\u00e3o do PHP est\u00e1 instalada no Visual Studio Code. No menu Extensions na barra lateral do IDE, procure por PHP Debug e voc\u00ea dever\u00e1 ver uma tela como a seguinte.<\/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=\"Instalando o Xdebug, Parte 2: O IDE\"><\/a><\/p>\n<p>Se a extens\u00e3o ainda n\u00e3o estiver instalada, v\u00e1 em frente e instale-a. Talvez seja necess\u00e1rio reiniciar o Visual Studio Code para que a nova extens\u00e3o entre em vigor.<\/p>\n<p>A partir daqui, existem algumas configura\u00e7\u00f5es adicionais que precisamos verificar antes de tentar depurar qualquer c\u00f3digo.<\/p>\n<h3>2 Configurando o Xdebug (ainda mais!)<\/h3>\n<p>Lembre-se <strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/instalando-o-xdebug-parte-1-o-modulo-xdebug\/\" title=\"do post anterior\">do post anterior<\/a><\/strong> que precis\u00e1vamos incluir o Xdebug em nosso arquivo <strong>php.ini<\/strong>. Especificamente, tivemos que adicionar <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-18-reference-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">a seguinte linha de c\u00f3digo<\/a><\/strong> para habilitar o Xdebug:<\/p>\n<pre><code>zend_extension=\"\/usr\/local\/lib\/php\/pecl\/20160303\/xdebug.so\"<\/code><\/pre>\n<p>Agora precisamos trabalhar um pouco mais.<\/p>\n<ol>\n<li>vamos precisar adicionar uma linha de configura\u00e7\u00e3o ao arquivo <strong>php.ini<\/strong> referenciado <strong><a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/instalando-o-xdebug-parte-1-o-modulo-xdebug\/\" title=\"no \u00faltimo post\">no \u00faltimo post<\/a><\/strong> ,<\/li>\n<li>precisaremos configurar um script de demonstra\u00e7\u00e3o para garantir que haja uma se\u00e7\u00e3o Xdebug adequada,<\/li>\n<li>precisaremos configurar o Visual Studio Code<\/li>\n<\/ol>\n<p>Felizmente, todos os itens acima s\u00e3o tarefas relativamente r\u00e1pidas. Primeiro, a linha de configura\u00e7\u00e3o que voc\u00ea deseja adicionar ao seu arquivo <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-20-set-xdebug-txt\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">\u00e9 a seguinte:<\/a><\/strong><\/p>\n<pre><code>[XDebug]\nxdebug.remote_enable = 1\nxdebug.remote_autostart = 1<\/code><\/pre>\n<p>Em seguida, configure um script de demonstra\u00e7\u00e3o e conecte-o com o Valet. Voc\u00ea pode fazer isso facilmente criando um diret\u00f3rio em sua \u00e1rea de trabalho, criando algo como <strong>test.php<\/strong> e adicionando <strong>phpinfo();<\/strong> ao arquivo.<\/p>\n<p>Depois disso, <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#the-link-command\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">vincule<\/a><\/strong> o diret\u00f3rio e <strong><a href=\"https:\/\/laravel.com\/docs\/5.6\/valet#other-valet-commands\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">reinicie<\/a><\/strong> o Valet. Aconteceu de eu nomear meu diret\u00f3rio example e soltar um arquivo <strong>test.php<\/strong> no diret\u00f3rio.<\/p>\n<p>Permitindo que tudo esteja configurado corretamente, voc\u00ea deve conseguir carregar o arquivo no seu navegador e ver algo como o seguinte:<\/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=\"Instalando o Xdebug, Parte 2: O IDE\"><\/a><\/p>\n<p>E agora precisamos configurar o Xdebug. Portanto, supondo que todos os itens acima tenham corrido bem e que as extens\u00f5es estejam instaladas e funcionando corretamente, trabalhar com o Visual Studio Code deve ser f\u00e1cil.<\/p>\n<p>Naturalmente, precisaremos de um script de demonstra\u00e7\u00e3o que possamos testar, ent\u00e3o <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-21-test-php\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">escrevi algo trivial,<\/a><\/strong> mas que lhe dar\u00e1 uma ideia do que esperar ao definir pontos de interrup\u00e7\u00e3o e quais n\u00e3o.<\/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>Agora vamos voltar nossa aten\u00e7\u00e3o para o IDE. No Visual Studio Code, clique no \u00edcone <strong>Debug<\/strong> logo acima do \u00edcone <strong>Extensions<\/strong> e logo abaixo do \u00edcone <strong>Source Control<\/strong>.<\/p>\n<p>Na barra lateral no topo, voc\u00ea notar\u00e1 que h\u00e1 um bot\u00e3o de reprodu\u00e7\u00e3o. Ao lado disso, h\u00e1 uma lista suspensa. Pode ler &quot;Sem configura\u00e7\u00e3o&quot;. Se for esse o caso, e presumo que seja, h\u00e1 algumas etapas muito espec\u00edficas que voc\u00ea precisar\u00e1 seguir para garantir que a depura\u00e7\u00e3o esteja funcionando corretamente.<\/p>\n<h4>1 Abra o Diret\u00f3rio do Script<\/h4>\n<p>Voc\u00ea precisar\u00e1 verificar se est\u00e1 no diret\u00f3rio do script no Visual Studio Code.<\/p>\n<p>Ou seja, n\u00e3o basta garantir que voc\u00ea tenha apenas um arquivo aberto. O Visual Studio Code precisa saber de qual diret\u00f3rio voc\u00ea est\u00e1 trabalhando (porque cria um diret\u00f3rio <strong>.vscode<\/strong> oculto dentro do diret\u00f3rio pai).<\/p>\n<h4>2 Crie a configura\u00e7\u00e3o de inicializa\u00e7\u00e3o<\/h4>\n<p>A configura\u00e7\u00e3o de inicializa\u00e7\u00e3o padr\u00e3o deve funcionar imediatamente, mas \u00e9 baseada na etapa anterior.<\/p>\n<p>Depois de abrir um diret\u00f3rio (no meu caso, aquele que cont\u00e9m <strong>test.php<\/strong>) no Visual Studio Code, inicie a paleta de comandos (voc\u00ea pode fazer isso por meio de um atalho que varia de sistema operacional para sistema operacional ou usando o menu <strong>Ajuda<\/strong> e em seguida, escolha Paleta de Comandos).<\/p>\n<p>Assim que aparecer, digite <strong>&gt; launch.json<\/strong> e voc\u00ea ter\u00e1 a op\u00e7\u00e3o de visualizar o arquivo <strong>launch.json<\/strong>. Fora da caixa, deve <strong><a href=\"https:\/\/gist.github.com\/tommcfarlin\/426e02bcfc411d43be6715b3e84ead7e#file-22-launch-json\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ficar assim<\/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>Neste ponto, o menu <strong>Debug<\/strong> deve ter algo como Iniciar script aberto no momento ao lado do \u00edcone de reprodu\u00e7\u00e3o. Se isso n\u00e3o acontecer, ele lhe dar\u00e1 a op\u00e7\u00e3o de selecionar algo como PHP (j\u00e1 que temos a extens\u00e3o instalada).<\/p>\n<p>Em caso afirmativo, selecione essa op\u00e7\u00e3o.<\/p>\n<h3>3 Defina alguns pontos de interrup\u00e7\u00e3o<\/h3>\n<p>Agora \u00e9 hora de ver o depurador em a\u00e7\u00e3o. Neste ponto, v\u00e1 em frente e inicie uma janela do navegador com seu script de teste.<\/p>\n<p>O meu \u00e9 simples:<\/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=\"Instalando o Xdebug, Parte 2: O IDE\"><\/a><\/p>\n<p>Depois disso, espere no seu IDE e clique no painel esquerdo \u00e0 esquerda do n\u00famero da linha. Isso definir\u00e1 alguns pontos de interrup\u00e7\u00e3o.<\/p>\n<p>Aqui est\u00e1 um exemplo:<\/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=\"Instalando o Xdebug, Parte 2: O IDE\"><\/a><\/p>\n<p>Agora clique no bot\u00e3o <strong>Reproduzir<\/strong> para o depurador. Imediatamente, voc\u00ea deve notar que a barra de status fica laranja e alguns controles de depura\u00e7\u00e3o (para Continuar, Entrar, Sair, Reiniciar e Parar). N\u00e3o estamos interessados \u200b\u200bnisso no momento, pois vamos dar uma olhada mais profunda nisso no pr\u00f3ximo post.<\/p>\n<p>Observe tamb\u00e9m que o painel esquerdo tem algumas informa\u00e7\u00f5es sobre vari\u00e1veis, rel\u00f3gios e assim por diante. Se voc\u00ea definiu pontos de interrup\u00e7\u00e3o em suas vari\u00e1veis \u200b\u200blocais, notar\u00e1 que <strong>$exampleName<\/strong> est\u00e1 destacado, mas provavelmente n\u00e3o inicializado.<\/p>\n<p>Clique no bot\u00e3o <strong>Reproduzir nos novos controles que apareceram e ele deve ser executado at\u00e9 o pr\u00f3ximo ponto de interrup\u00e7\u00e3o.<\/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=\"Instalando o Xdebug, Parte 2: O IDE\"><\/a><\/p>\n<p>A linha agora ser\u00e1 destacada e, no painel de depura\u00e7\u00e3o, o <strong>$exampleName<\/strong> receber\u00e1 um valor. No meu caso, \u00e9 Alice.<\/p>\n<p>Voc\u00ea pode continuar a brincar com isso o quanto quiser para ter uma ideia de como o depurador funciona.<\/p>\n<h2>Da pr\u00f3xima vez, screencasts<\/h2>\n<p>A depura\u00e7\u00e3o \u00e9 poderosa, mas pode ser assustadora de v\u00e1rias maneiras. A partir da pr\u00f3xima postagem, come\u00e7arei a compartilhar alguns screencasts que explicam como:<\/p>\n<ul>\n<li>depurar fun\u00e7\u00f5es e vari\u00e1veis,<\/li>\n<li>alterar valores em tempo real,<\/li>\n<li>trabalhar com o console de depura\u00e7\u00e3o,<\/li>\n<li>e mais.<\/li>\n<\/ul>\n<p>Isso levar\u00e1 um pouco mais de tempo porque ser\u00e3o v\u00eddeos descrevendo como fazer isso, mas o benef\u00edcio deve ser grande.<\/p>\n<p>Se voc\u00ea ainda n\u00e3o teve a chance de acompanhar todo o conte\u00fado desta s\u00e9rie, eu recomendo.<\/p>\n<h3>\ud83d\udce3 Uma nota para vantagens de membros<\/h3>\n<p>Observe, no entanto, antes do pr\u00f3ximo post sobre screencasts e da pr\u00f3xima parte desta s\u00e9rie, tenho alguns an\u00fancios a fazer especificamente para membros do site que incluem descontos em software baseado em WordPress.<\/p>\n<p>Vou cobrir mais sobre isso na pr\u00f3xima semana.<\/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>Depois de instalar o Xdebug, veja como conect\u00e1-lo ao seu IDE e obter informa\u00e7\u00f5es sobre as vari\u00e1veis \u200b\u200be fun\u00e7\u00f5es do seu c\u00f3digo e a ordem em que ele executa o programa inteiro.<\/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":[722],"tags":[1170],"class_list":["post-230853","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvedor","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230853","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=230853"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/230853\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/236530"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=230853"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=230853"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=230853"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}