Como o Xdebug pode ajudá-lo a se tornar um desenvolvedor WordPress melhor

Como qualquer desenvolvedor pode atestar, o código nunca está pronto para produção após o primeiro rascunho. Uma parte importante do processo de desenvolvimento é a depuração — removendo ou alterando todas as partes do seu código que não funcionam.

A extensão Xdebug para PHP é uma maneira popular de erradicar e destruir todos os bugs em seu código.

Um dos grandes aspectos do Xdebug é o quão flexível ele é. Independentemente de sua estrutura ou ambiente de desenvolvimento preferido, você poderá encontrar uma versão do Xdebug que se encaixe em seu fluxo de trabalho. A partir daí, começar a usar a ferramenta não demorará muito.

Este tutorial examinará o Xdebug em profundidade, incluindo o processo de instalação, integrando-o à sua configuração e uso geral.

Primeiro, vamos dar mais contexto sobre o que é o Xdebug e o que ele faz.

Apresentando o Xdebug

Xdebug é uma das extensões mais populares para depurar seu código PHP. Você irá instalá-lo de dentro do ambiente escolhido e ele atua como um “depurador de etapas”.

Em resumo, isso permite que você trabalhe em seu código linha por linha para que você possa percorrer e ver como o código age e interage em seu programa, bem como investigar sua saída. A partir daí, você pode fazer as alterações que achar melhor.

O Xdebug pode fazer muito mais, no entanto:

• Você pode analisar o desempenho do seu código usando um conjunto de métricas e visualizações.
• Ao executar testes de unidade PHP, você pode ver quais conjuntos de código você executa e executa.
• O Xdebug inclui recursos de “rastreamento”, que gravarão todas as chamadas de função no disco. Isso incluirá argumentos, atribuições de variáveis ​​e valores de retorno.
• O Xdebug também faz melhorias no relatório de erros padrão do PHP. Abordaremos mais sobre isso mais tarde.

Dado o conjunto de recursos, há muitas maneiras de usar o Xdebug (e qualquer depurador semelhante) em seu fluxo de trabalho. Abordaremos isso na próxima seção.

Por que você gostaria de usar o Xdebug

Muitos desenvolvedores não terão um fluxo de trabalho de depuração dedicado que use ferramentas e extensões de terceiros. Isso ocorre porque o PHP inclui seu próprio registro de erros rudimentar. Você usará comandos como error_log , var_dump e print para ver os resultados de variáveis ​​e chamadas de função.

Por exemplo, existem muitos snippets que você pode redirecionar para o desenvolvimento do WordPress – o Stack Overflow está repleto deles:

 function log_me($message) { if ( WP_DEBUG === true ) { if ( is_array($message) || is_object($message) ) { error_log( print_r($message, true) ); } else { error_log( $message ); } } }

No entanto, existem algumas desvantagens importantes nessa abordagem:

• Primeiro você deve garantir que habilite os logs de erros para a plataforma com a qual está trabalhando. Nesse caso, você desejará habilitar WP_DEBUG (mais sobre isso em breve).
• Este exemplo de depuração “dump” oferece menos escopo para investigação do que a depuração por etapas. Aqui, você só pode produzir o que definir.

O último ponto requer muito esforço manual, especialmente se seu trabalho diário não for como administrador de sistema. Por exemplo, se você quiser depurar um bloco de código, poderá adicionar seu snippet com base em uma variável que você definir. No entanto, pode não ser a fonte do problema ou mesmo indicar o que está acontecendo.

Em vez disso, uma ferramenta como o Xdebug pode fazer sua mágica para fornecer maior escopo:

• Você pode “quebrar” seu código em vários pontos durante a execução para ver o que está acontecendo em tempo real.
• Existem inúmeras métricas, visualizações, ramificações e muito mais para ajudá-lo a verificar o que seu código está fazendo e como ele responde.
• Às vezes, você pode até alterar os valores rapidamente durante o processo de depuração. Isso oferece imenso valor, mesmo para conjuntos de código que funcionam bem. Você pode realizar testes unitários manuais a qualquer momento.
• Como você usa pontos de interrupção para marcar áreas para depuração, não precisa trabalhar com snippets em seu código. Isso mantém seu código mais limpo e reduz o número de problemas futuros.

No geral, usar uma ferramenta como o Xdebug é uma decisão proativa e não reativa. Você pode usar a depuração em etapas como parte do processo de desenvolvimento principal, assim como a implementação de testes de unidade como parte do desenvolvimento orientado a testes (TDD).

Como ativar o log de erros do PHP

Embora você possa depurar seu código sem um erro específico, geralmente é bom saber se ocorre um problema sem que o Xdebug esteja aberto. Isso lhe dá um ponto de partida para a exploração. Não é estritamente necessário, mas pode ser uma parte útil da sua cadeia.

Para relatar todos os erros que surgirem, você precisará adicionar uma linha ao topo do arquivo PHP relevante:

 error_reporting(E_ALL);

Este é um comando abrangente e você pode obter o mesmo usando a função ini_set :

 ini_set('error_reporting', E_ALL);

Isso permite que você altere as configurações dentro do seu arquivo php.ini projeto por projeto. Embora você possa entrar neste arquivo e fazer uma alteração manual, geralmente é melhor trabalhar com ini_set para alterar o parâmetro específico:

 ini_set('display_errors', '1');

Uma vez que você tenha definido o relatório de erros ativo ao seu gosto, você pode começar a trabalhar com o Xdebug.

Como usar o Xdebug

Nas próximas seções, mostraremos como usar o Xdebug, incluindo as etapas necessárias para configurar as coisas. Embora não possamos cobrir todos os aspectos da ferramenta, este guia de início rápido fará com que você vá rápido.

Primeiro, porém, você precisa instalar o Xdebug. Vamos descobrir como fazê-lo.

1. Instale o Xdebug para seu sistema operacional (SO)

Como o Xdebug é adaptável a qualquer número de configurações, o processo exato para cada uma será ligeiramente diferente. No nível do sistema operacional, existem algumas diferenças:

• Windows: Este é um processo de configuração um tanto complicado que envolve o uso de um arquivo PHP existente e um assistente de instalação e, em seguida, o download da versão correta para o seu sistema.
• Linux: O método aqui é sem dúvida o mais direto: você pode usar um gerenciador de pacotes para instalar o Xdebug, ou a biblioteca comunitária de extensão PHP (PECL).
• Mac: Este método também é simples: depois de instalar o PECL, você pode executar pecl install xdebug a partir de uma instância do Terminal. Você também precisará ter as ferramentas de linha de comando do XCode e o PHP instalados em seu sistema.

No entanto, a maioria dos usuários não vai querer ficar com uma instância de nível de sistema do Xdebug. Em vez disso, você desejará integrá-lo ao seu próprio ambiente de desenvolvimento.

2. Integre o Xdebug ao seu ambiente de desenvolvimento

Depois de instalar o Xdebug para o seu sistema operacional, você deve conectá-lo ao seu ambiente.

Existem tantos sistemas e ferramentas suportados aqui que não podemos entrar em todos eles. Mais tarde, ofereceremos instruções para DevKinsta e PhpStorm. Mesmo assim, existem muitos outros ambientes populares para escolher. Abaixo estão algumas de nossas principais recomendações.

Vagantes Vagantes Variados (VVV)

VVV é um dos ambientes nomeados no site Make WordPress:

A boa notícia é que o VVV já inclui uma versão do Xdebug, mas você precisa ativá-lo. Você pode fazer isso usando o Secure Shell (SSH) em uma janela do Terminal:

 vagrant ssh -c "switch_php_debugmod xdebug"

No entanto, há um pequeno impacto no desempenho e você precisará ativar essa opção novamente se provisionar seus sites.

Laravel Valet

Para alguns usuários, o Valet do Laravel representa um ambiente de desenvolvimento web quase perfeito. Melhor ainda, você pode integrar o Xdebug com ele.

Para fazer isso, você precisará criar um arquivo de configuração para o depurador. Você pode encontrar seu próprio caminho usando php --ini na linha de comando, que retornará alguns caminhos de arquivo diferentes:

Em seguida, crie um novo arquivo xdebug.ini no caminho para arquivos .ini adicionais. Em nosso exemplo, está em /opt/homebrew/etc/php/7.4/conf.d .

Depois de abrir este novo arquivo, abra também o caminho para o Loaded Configuration File (seu arquivo php.ini principal). Com ambos abertos, adicione o seguinte à parte inferior:

• php.ini: zend_extension="xdebug.so"
• xdebug.ini: xdebug.mode=debug

Depois de salvar suas alterações, execute o valet restart no Terminal e adicione phpinfo(); exit; phpinfo(); exit; para um dos arquivos do seu site. Você deve verificar se isso funciona por meio de um carregamento rápido de página no navegador.

Observe que você pode precisar reiniciar o PHP usando sudo brew services restart php , bem como verificar se a instalação do Xdebug no seu sistema está correta usando php --info | grep xdebug php --info | grep xdebug . Você notará as linhas específicas do Xdebug na saída:

A partir daqui, você pode incorporar o Xdebug em seu editor de codificação de escolha.

XAMPP

Assim como o Valet, existem algumas partes do processo para o XAMPP. No entanto, as versões do Windows e do macOS têm dois processos diferentes.

Comece instalando o XAMPP e, em seguida, execute uma verificação rápida para ver se o arquivo php_xdebug.dll (Windows) ou xdebug.so (macOS) existe em seu sistema:

Se o arquivo existir, você pode passar para a configuração. Caso contrário, primeiro você precisará baixar o binário correto para Windows - um arquivo de 64 bits para sua versão preferida do PHP - ou instalar mais algumas dependências se estiver em um Mac.

Para Windows, renomeie o arquivo DLL php_xdebug.dll e mova-o para o caminho do arquivo \xampp\php\ext . Em seguida, abra o arquivo \xampp\php\php.ini em seu editor de código preferido e adicione o seguinte:

 output_buffering = Off

Na seção [XDebug] , adicione as próximas três linhas:

 zend_extension=xdebug xdebug.mode=debug xdebug.start_with_request=trigger

Depois de salvar suas alterações, reinicie o Apache e teste o Xdebug.

Para Mac, você deve certificar-se de instalar as ferramentas de linha de comando do Xcode usando xcode-select --install em uma instância do Terminal. Depois disso, existem três pacotes que você deseja instalar usando o Homebrew:

 brew install autoconf automake libtool

Em alguns casos, você também precisará reinstalar o XAMPP para obter o programa principal e os “Arquivos do desenvolvedor”. Você deve poder reinstalar apenas esses arquivos, mas primeiro faça um backup de sua configuração existente.

Em seguida, navegue até o download da pasta de origem do Xdebug em seu sistema e descompacte o arquivo TGZ. Em uma janela do Terminal, navegue até esse diretório e execute o seguinte:

 phpize pecl install xdebug

Observe que você pode precisar usar sudo aqui também. A partir daqui, você pode editar o arquivo php.ini do XAMPP. Para a maioria das instalações do macOS, você o encontrará em /Applications/XAMPP/xamppfiles/etc/php.ini . Dentro desse diretório, você também encontrará o caminho para o arquivo xdebug.so — anote isso e use-o no lugar do espaço reservado do caminho do arquivo para este trecho:

 [xdebug] zend_extension=/path/to/xdebug.so xdebug.mode=develop,degug xdebug.start_with_request=yes

Para testar se isso funciona, crie um novo arquivo xdebug_info.php dentro do diretório principal do htdocs XAMPP. Dentro, adicione o seguinte:

 <?php xdebug_info();

…depois atualize o Apache e teste o Xdebug no navegador.

Usando PhpStorm com Xdebug

Depois de instalar o Xdebug pelo sistema operacional e seu ambiente de desenvolvimento, você também precisará visualizar o próprio depurador. Você fará isso por meio do editor de código escolhido ou do ambiente de desenvolvimento integrado (IDE). Assim como no seu ambiente, há muitos para escolher, e cada um pode ter uma abordagem diferente.

Dito isso, muitos desenvolvedores optam por usar o PhpStorm da JetBrains. Na verdade, o PhpStorm oferece “assistência para WordPress” – e é uma escolha popular por muitos outros motivos também.

O site da JetBrains inclui instruções completas sobre como conectar o Xdebug e o PhpStorm, mas vamos analisá-los aqui.

Primeiro, navegue até a página Idiomas e Estruturas > PHP no painel Preferências . Aqui, abra o menu kebab More Items ao lado do campo suspenso CLI Interpreter :

Isso mostrará alguns detalhes adicionais sobre sua versão e interpretador do PHP. Se você clicar nas reticências Mais itens ao lado da opção Arquivo de configuração, verá caminhos completos para o arquivo php.ini :

Você estará trabalhando com este arquivo PHP ao lado para continuar o processo de configuração.

Trabalhando no arquivo php.ini

A primeira tarefa aqui é editar quaisquer linhas que afetem como o Xdebug funcionará com o PhpStorm.

Dentro do arquivo php.ini , procure as seguintes linhas e remova-as ou comente-as:

 zend_extension=<path_to_zend_debugger> zend_extension=<path_to_zend_optimizer>

Essas linhas não estarão presentes em todos os casos, então não se assuste se você não as estiver vendo.

Em seguida, adicione o seguinte ao arquivo:

 [xdebug] zend_extension="xdebug.so" xdebug.mode=debug xdebug.client_host=127.0.0.1 xdebug.client_port="<the port (9003 by default) to which Xdebug connects>"

Há algumas coisas a serem observadas sobre esse conjunto de códigos:

• Você já pode ter uma seção [xdebug] , nesse caso você pode omitir a primeira designação.
• A entrada zend_extension pode precisar que você adicione o caminho completo de xdebug.so para conectar.
• Embora possa parecer um espaço reservado, o parâmetro xdebug.client_port é como você o definirá em seu código.

Depois de adicioná-los, salve e feche o arquivo e teste a versão do PHP na linha de comando (usando php --version ):

Se você tiver uma versão funcional do Xdebug, ela será exibida como uma das extensões do PHP. Você também pode adicionar phpinfo(); para um novo arquivo e teste isso no navegador.

Isso é tudo o que você precisa fazer para que o Xdebug funcione como seu depurador padrão com o PhpStorm. A etapa final antes de usá-lo é instalar uma extensão auxiliar do navegador.

Instalando uma extensão auxiliar do navegador

A conexão de chave final que você precisará fazer é entre seu navegador e o PhpStorm, realizada ativando a depuração de etapas no servidor. Embora você possa fazer isso na linha de comando usando valores GET ou POST especiais, é mais simples usar uma extensão.

Recomendamos utilizar a extensão Xdebug Helper dedicada. Você pode instalá-lo no navegador de sua escolha:

• Xdebug Helper para Chrome/Chromium/Brave
• Xdebug Helper para Firefox
• Xdebug Helper para Safari

Se você quiser explorar outras extensões, o site da JetBrains oferece algumas opções adicionais para os navegadores mais populares.

Depois de instalar a extensão de navegador escolhida, você não precisará ajustar mais nenhuma configuração. A partir daqui, você pode começar a usar o Xdebug com PhpStorm.

Usando o Xdebug

Embora usemos o PhpStorm aqui, você verá um layout e interface semelhantes entre diferentes IDEs - embora também haja algumas diferenças óbvias.

Existem alguns conceitos que se combinam para formar toda a experiência de depuração:

• Pontos de interrupção: Esses são os pontos em que o Xdebug irá parar para permitir que você inspecione a saída. Você pode definir quantos deles desejar.
• Ouvindo conexões: você pode ativar e desativar isso, embora a maioria dos desenvolvedores sempre o deixe ativado.
• A tela de depuração: A maior parte do seu tempo será gasto na interface de depuração — é onde você trabalhará com as várias linhas de código, variáveis ​​e parâmetros.

O primeiro passo é ativar a escuta — você não poderá depurar nada sem ela. Para fazer isso, clique na opção Run > Start Listening for PHP Debug Connections na barra de ferramentas:

Como alternativa, você pode clicar no ícone “telefone” na barra de ferramentas do PhpStorm:

Qualquer uma dessas opções iniciará a escuta de conexões.

A partir daqui, você pode começar a definir pontos de interrupção nas calhas do editor de código. Um ponto vermelho indica um ponto de interrupção, no qual você pode clicar para ativar:

Quando você deseja depurar seu código, a maneira mais direta é começar a ouvir, definir pontos de interrupção e ir para a página específica em seu navegador. Localize o ícone da sua extensão no navegador, clique nele e selecione a opção “Depurar”:

Isso abrirá o depurador no PhpStorm e fornecerá as boas ou más notícias:

Se você clicar com o botão direito do mouse nos vários valores, atributos, parâmetros e variáveis, poderá acessar um menu de contexto adicional. Isso lhe dá muito escopo extra para testar e depurar seu código:

Por exemplo, você pode definir valores diferentes para variáveis ​​ao longo do caminho. Isso pode ser uma tentativa deliberada de quebrar seu código e ver o que acontece, ou pode ser uma maneira de testar o código que já precisa de uma correção. De qualquer forma, isso oferece um método fantástico para depurar seu código sem precisar alterá-lo primeiro.

Como Kinsta ajuda você a depurar seu site WordPress

O WordPress vem com seu próprio conjunto de opções de depuração por meio do WP_DEBUG e outras ferramentas, como o Query Monitor. Eles permitem um modo no qual você começará a ver mensagens de erro anteriormente ocultas em todo o seu site e painel. A partir daí, você pode começar a descobrir qual é o problema.

Você também pode salvar essas mensagens de erro usando WP_DEBUG_LOG , que oferece uma maneira de documentar os problemas com seu site. Cobrimos como configurar isso em outro artigo no blog. É muito fácil configurar através do seu painel MyKinsta (e da tela Sites > Ferramentas ):

Se você emparelhar isso com a ferramenta gratuita de ambiente local DevKinsta, também terá uma maneira de um clique para ativar e desativar WP_DEBUG para cada site que você criar:

Isso significa que você pode detectar erros em seu site durante o desenvolvimento e garantir que eles não cheguem ao seu site ativo. Esses modos também são fáceis de desativar — vitais para a segurança do site e do usuário.

Todos os planos Kinsta também vêm com a ferramenta Kinsta APM integrada, que é nossa ferramenta de monitoramento de desempenho personalizada para sites WordPress.

Folha de dicas de comando

Antes de encerrarmos este post, devemos mencionar os atalhos.

Como muitas outras peças de software, existem várias maneiras de navegar pelo Xdebug (e PhpStorm) usando apenas o teclado. Na verdade, você pode até usar a linha de comando para depurar scripts PHP.

Depois que o Xdebug estiver funcionando, você pode usar os seguintes comandos para contornar:

Embora seu editor de código específico tenha seus próprios atalhos dedicados, o foco aqui está no PhpStorm. Dê uma olhada nesta tabela de atalhos de teclado para usar o Xdebug com PhpStorm:

Felizmente, não há muito o que memorizar aqui. Você deve abrir o depurador, definir pontos de interrupção por linha, ouvir conexões e executar seus scripts.

No entanto, se você precisar de um atalho para uma tarefa específica, poderá usar o comando PhpStorm Find Action :

Assim que começar a digitar neste espaço, você verá uma lista dinâmica de comandos e atalhos relacionados. Você também pode encontrar uma versão em PDF de todos os atalhos de teclado no menu Ajuda > Atalhos de teclado PDF .

Se você quiser uma visão mais em tempo real dos atalhos enquanto trabalha com o mouse, a JetBrains fornece o plugin Key Promoter X:

Esta ferramenta útil exibirá notificações de sua última ação executada, juntamente com seu atalho de teclado relacionado. Depois de aprender e usar os atalhos, você pode eliminar gradualmente esse plug-in e restaurar esse valioso espaço na tela.

Resumo

A prática de depuração percorreu um longo caminho desde seu humilde começo; agora abrange um escopo muito mais amplo do que seus progenitores poderiam ter imaginado. Para realizar um trabalho completo na hora de consertar seu código PHP, você precisará usar uma ferramenta competente. Existem muitas extensões e ferramentas excelentes para escolher, mas o Xdebug é um líder discutível.

Como vimos, o Xdebug pode se adaptar até mesmo aos gostos mais ecléticos em editores de código, e é especialmente ótimo quando combinado com o PhpStorm. No entanto, independentemente da sua configuração, geralmente haverá uma versão do Xdebug para atender às suas necessidades. No geral, é uma ferramenta poderosa, flexível e intuitiva de usar.

Você acha que o Xdebug merece seus elogios ou existe outra ferramenta de depuração de sua preferência? Deixe-nos saber na seção de comentários abaixo!