Instalando o Xdebug, Parte 2: O IDE

Agora que o Xdebug está instalado com sua instalação local do PHP, é hora de conectá-lo ao IDE. Isso nos fornece todas as vantagens que o Xdebug tem a oferecer.

Ou seja, permite-nos:

• definir pontos de interrupção,
• passo pelo nosso código,
• e observe as variáveis

O tempo todo o programa está em execução. Isso significa que enquanto uma página está sendo renderizada, podemos definir pontos em nossa base de código onde podemos ver o que o servidor está fazendo com nosso código.

Então, com certeza, embora seja chamado de depuração para remover bugs, também pode fornecer informações sobre como um aplicativo, tema ou plug-in baseado em WordPress está sendo executado e pode nos ajudar a obter uma melhor compreensão do núcleo do WordPress.

Instalando o Xdebug no Visual Studio Code

Neste ponto, você deve ter o seguinte ambiente configurado em sua máquina local:

• Valet (que inclui Nginx e MySQL e ferramentas relacionadas )
• WordPress
• Código do Visual Studio
• XdebugGenericName

As tarefas restantes para todos os itens acima envolvem vincular o Xdebug ao Visual Studio Code para obter uma representação literal de como o WordPress (e, portanto, nosso trabalho) está sendo executado, o que está fazendo e assim por diante sempre que estiver sendo executado no navegador.

Dito isso, vamos começar.

1 Instalando as Extensões Necessárias

Primeiro, vamos verificar se a extensão de depuração do PHP está instalada no Visual Studio Code. No menu Extensions na barra lateral do IDE, procure por PHP Debug e você deverá ver uma tela como a seguinte.

Se a extensão ainda não estiver instalada, vá em frente e instale-a. Talvez seja necessário reiniciar o Visual Studio Code para que a nova extensão entre em vigor.

A partir daqui, existem algumas configurações adicionais que precisamos verificar antes de tentar depurar qualquer código.

2 Configurando o Xdebug (ainda mais!)

Lembre-se do post anterior que precisávamos incluir o Xdebug em nosso arquivo php.ini. Especificamente, tivemos que adicionar a seguinte linha de código para habilitar o Xdebug:

zend_extension="/usr/local/lib/php/pecl/20160303/xdebug.so"

Agora precisamos trabalhar um pouco mais.

1. vamos precisar adicionar uma linha de configuração ao arquivo php.ini referenciado no último post ,
2. precisaremos configurar um script de demonstração para garantir que haja uma seção Xdebug adequada,
3. precisaremos configurar o Visual Studio Code

Felizmente, todos os itens acima são tarefas relativamente rápidas. Primeiro, a linha de configuração que você deseja adicionar ao seu arquivo é a seguinte:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Em seguida, configure um script de demonstração e conecte-o com o Valet. Você pode fazer isso facilmente criando um diretório em sua área de trabalho, criando algo como test.php e adicionando phpinfo(); ao arquivo.

Depois disso, vincule o diretório e reinicie o Valet. Aconteceu de eu nomear meu diretório example e soltar um arquivo test.php no diretório.

Permitindo que tudo esteja configurado corretamente, você deve conseguir carregar o arquivo no seu navegador e ver algo como o seguinte:

E agora precisamos configurar o Xdebug. Portanto, supondo que todos os itens acima tenham corrido bem e que as extensões estejam instaladas e funcionando corretamente, trabalhar com o Visual Studio Code deve ser fácil.

Naturalmente, precisaremos de um script de demonstração que possamos testar, então escrevi algo trivial, mas que lhe dará uma ideia do que esperar ao definir pontos de interrupção e quais não.

<?php

// First, set a sample name.
$exampleName = 'alice';
echo $exampleName;

// Next, change the name and display it.
if ('alice' === $exampleName) {
    $exampleName = 'bob';
}
echo $exampleName;

Agora vamos voltar nossa atenção para o IDE. No Visual Studio Code, clique no ícone Debug logo acima do ícone Extensions e logo abaixo do ícone Source Control.

Na barra lateral no topo, você notará que há um botão de reprodução. Ao lado disso, há uma lista suspensa. Pode ler "Sem configuração". Se for esse o caso, e presumo que seja, há algumas etapas muito específicas que você precisará seguir para garantir que a depuração esteja funcionando corretamente.

1 Abra o Diretório do Script

Você precisará verificar se está no diretório do script no Visual Studio Code.

Ou seja, não basta garantir que você tenha apenas um arquivo aberto. O Visual Studio Code precisa saber de qual diretório você está trabalhando (porque cria um diretório .vscode oculto dentro do diretório pai).

2 Crie a configuração de inicialização

A configuração de inicialização padrão deve funcionar imediatamente, mas é baseada na etapa anterior.

Depois de abrir um diretório (no meu caso, aquele que contém test.php) no Visual Studio Code, inicie a paleta de comandos (você pode fazer isso por meio de um atalho que varia de sistema operacional para sistema operacional ou usando o menu Ajuda e em seguida, escolha Paleta de Comandos).

Assim que aparecer, digite > launch.json e você terá a opção de visualizar o arquivo launch.json. Fora da caixa, deve ficar assim :

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Listen for XDebug",
            "type": "php",
            "request": "launch",
            "port": 9000
        },
        {
            "name": "Launch currently open script",
            "type": "php",
            "request": "launch",
            "program": "${file}",
            "cwd": "${fileDirname}",
            "port": 9000
        }
    ]
}

Neste ponto, o menu Debug deve ter algo como Iniciar script aberto no momento ao lado do ícone de reprodução. Se isso não acontecer, ele lhe dará a opção de selecionar algo como PHP (já que temos a extensão instalada).

Em caso afirmativo, selecione essa opção.

3 Defina alguns pontos de interrupção

Agora é hora de ver o depurador em ação. Neste ponto, vá em frente e inicie uma janela do navegador com seu script de teste.

O meu é simples:

Depois disso, espere no seu IDE e clique no painel esquerdo à esquerda do número da linha. Isso definirá alguns pontos de interrupção.

Aqui está um exemplo:

Agora clique no botão Reproduzir para o depurador. Imediatamente, você deve notar que a barra de status fica laranja e alguns controles de depuração (para Continuar, Entrar, Sair, Reiniciar e Parar). Não estamos interessados ​​nisso no momento, pois vamos dar uma olhada mais profunda nisso no próximo post.

Observe também que o painel esquerdo tem algumas informações sobre variáveis, relógios e assim por diante. Se você definiu pontos de interrupção em suas variáveis ​​locais, notará que $exampleName está destacado, mas provavelmente não inicializado.

Clique no botão Reproduzir nos novos controles que apareceram e ele deve ser executado até o próximo ponto de interrupção.

A linha agora será destacada e, no painel de depuração, o $exampleName receberá um valor. No meu caso, é Alice.

Você pode continuar a brincar com isso o quanto quiser para ter uma ideia de como o depurador funciona.

Da próxima vez, screencasts

A depuração é poderosa, mas pode ser assustadora de várias maneiras. A partir da próxima postagem, começarei a compartilhar alguns screencasts que explicam como:

• depurar funções e variáveis,
• alterar valores em tempo real,
• trabalhar com o console de depuração,
• e mais.

Isso levará um pouco mais de tempo porque serão vídeos descrevendo como fazer isso, mas o benefício deve ser grande.

Se você ainda não teve a chance de acompanhar todo o conteúdo desta série, eu recomendo.

📣 Uma nota para vantagens de membros

Observe, no entanto, antes do próximo post sobre screencasts e da próxima parte desta série, tenho alguns anúncios a fazer especificamente para membros do site que incluem descontos em software baseado em WordPress.

Vou cobrir mais sobre isso na próxima semana.