Depuração no local (por Flywheel): um guia para iniciantes

Ter problemas em um site ou mesmo na instalação local de um site pode ser estressante. Afinal, problemas ou bugs de desempenho do site podem resultar em tempo de inatividade do site. E o tempo de inatividade do site pode significar perda de tráfego, oportunidades perdidas e até perda de receita.

Felizmente, existem várias soluções de depuração para identificar e reparar problemas do site. Mas como você pode saber o que funcionará melhor para sua situação?

Em Local, há uma abordagem multifacetada disponível para depuração. Aqui, discutiremos as opções de depuração padrão incluídas no Local, bem como formas de identificar erros e complementos adicionais que você pode usar para identificar e corrigir problemas de maneira mais rápida e eficiente.

O que é o Xdebug em Local?

Antes de podermos discutir como depurar no Local, precisamos primeiro falar sobre o Xdebug, a ferramenta de depuração presente no Local e alguns de seus recursos mais notáveis.

Xdebug é na verdade uma extensão PHP que simplifica o processo de depuração. Principalmente, torna a formatação da função var_dump () mais limpa e adiciona mais avisos e avisos sobre erros específicos. Dessa forma, torna a experiência do usuário mais intuitiva.

Caso você não saiba, var_dump() é uma parte útil do PHP que revela rapidamente o que há de errado com seu código. Mas a diferença aqui é que se você não tiver o Xdebug em mãos, o código produzido quando você chama var_dump() seria muito mais difícil de ler. Além disso, você teria que formatar seu PHP de uma maneira muito particular ao chamar var_dump() em primeiro lugar.

O Xdebug está disponível em Local porque oferece uma maior profundidade de informações sobre erros quando eles surgem. Ele também vem com um depurador de etapas que agiliza o processo de depuração, especialmente para problemas maiores. O depurador de etapas funciona permitindo que você avalie seu código passo a passo em pontos de interrupção específicos. Isso permite que você avalie o código em seções menores e localize problemas com mais facilidade.

E a melhor parte é que o Xdebug está habilitado no Local por padrão, então você nem precisa mexer em nenhuma configuração para começar. Basta abrir o Local e ir.

Como depurar um site no local

Você pode depurar um site no Local de algumas maneiras importantes. Aqui estão as principais etapas que discutiremos:

1. Identificando erros do console do navegador
2. Usando o Monitor de Consulta
3. Via Xdebug e VS Code
4. Com Xdebug e PhpStorm
5. Usando o Xdebug para depuração em etapas

Vamos mergulhar.

1. Identifique os erros do console do navegador

A primeira etapa na depuração é usar o console do navegador, que faz parte de todas as ferramentas de desenvolvedor do navegador. Isso permite que você detecte erros em páginas da web sem ferramentas especiais. Basta iniciar o Local, acessar a página em questão com o navegador de sua preferência e usar o console para detectar erros. O que se segue é um detalhamento de como acessar o console do navegador em vários navegadores.

Se você estiver usando o Chrome…

1. Abra o DevTools acessando Mais Ferramentas > Ferramentas do Desenvolvedor enquanto estiver no menu do navegador Chrome. Como alternativa, pressione Ctrl/Cmd+Shift+I .
2. Clique na guia Console .
3. Se houver algum erro presente, ele deve estar visível agora. Caso contrário, recarregue a página da Web para gerá-los.
4. Anote o tipo de erro, onde está localizado e o número da linha no console do navegador.

Se você estiver usando o Firefox…

1. Abra as ferramentas do desenvolvedor do navegador acessando Mais Ferramentas > Ferramentas do Desenvolvedor Web no menu Firefox. Ctrl/Cmd+Shift+I também funciona aqui.
2. Clique no console aba. Como alternativa, você também pode acessar o console diretamente por meio de Mais ferramentas > Console do navegador .
3. Quaisquer erros agora devem estar visíveis. Caso contrário, recarregue a página.

Se você estiver usando o Safari…

1. Ative as Ferramentas do desenvolvedor acessando Preferências> Avançado no menu Safari. Option+Cmd+I é seu amigo aqui.
2. Marque a caixa ao lado do menu Mostrar desenvolvimento na barra de menus . Em seguida, feche a caixa de diálogo.
3. Clique em Desenvolver > Mostrar console de erros . Mesmo negócio acima.

Armado com essas informações, você pode voltar ao sistema de arquivos configurado em Local e encontrar o código específico que está causando os problemas e, em seguida, implementar uma correção. Use o botão Ir para a pasta do site para acessar a localização de seus sites locais.

2. Use o Query Monitor para corrigir problemas de desempenho do site

Você também pode identificar e reparar problemas do site diretamente no WordPress. Na verdade, o plugin Query Monitor é uma escolha fantástica para depuração e para identificar problemas de desempenho, especificamente. Isso cria um par útil com ferramentas de depuração locais integradas e é especialmente útil para detectar problemas de plugins e temas de terceiros.

Você pode instalar o plugin como qualquer outro. Basta ir em Plugins > Adicionar Novo e procurá-lo pelo nome. Encontre-o na lista e clique em Instalar agora e em Ativar depois de baixado.

O que o Query Monitor pode lhe dizer

Depois de instalar o plugin, você deverá ver uma nova opção de menu na parte superior do painel do WordPress.

Passar o mouse sobre ele revelará uma lista suspensa de ferramentas e opções do Query Monitor. Escolher qualquer um deles abrirá um menu na parte inferior, onde você poderá aprender mais detalhes sobre a página atual.

Entre outras coisas, o Query Monitor lhe dará uma visão geral do desempenho da sua página, incluindo:

• Pico de uso de memória. Esta ferramenta mostra quanta memória é usada para gerar uma página em um determinado momento.
• Tempo de geração da página. Mostra a quantidade de tempo que leva para uma página ser gerada.
• Tempo de consulta do banco de dados. Por fim, esta ferramenta mostra quanto tempo o banco de dados levou para responder a solicitações de temas ou plugins.

Além dos problemas de desempenho, este plugin também pode identificar erros e avisos do PHP – assim como o Xdebug faz. No entanto, seus esforços se concentram em temas e plugins de terceiros. O que é conveniente aqui é que, se houver erros, uma nova guia aparecerá dentro da ferramenta apropriadamente chamada de Erros PHP que listará cada erro com sua ameaça à segurança. Ele também informará a linha de código onde o erro aparece e o código de erro específico ou aviso também.

Agora, isso é realmente útil para sites que já estão ativos ou em testes em estágio final. No entanto, se você ainda estiver no estágio de desenvolvimento local, usar o Xdebug in Local será sua melhor aposta.

3. Configurando o Xdebug e o VS Code para depuração

De volta ao Local, você pode usar o Xdebug de várias maneiras para realizar a depuração do site local. Para obter mais retorno pelo seu investimento, por assim dizer, você pode adicionar o poder do VS Code à equação.

O VS Code é um editor de código de código aberto com ferramentas expandidas e uma interface de usuário mais intuitiva. Isso torna o processo de depuração linha por linha muito mais intuitivo e fácil para os olhos.

Você pode realmente conectar o VS Code ao Xdebug Step Debugger com grande efeito. Veja como configurá-lo para uso dentro do Local:

1. Baixe o VS Code e instale-o de acordo com as instruções do desenvolvedor.
2. Baixe e instale uma extensão de depurador PHP. A documentação do Local recomenda a extensão PHP Debug para esta tarefa.
3. Em Local, clique em Add-ons > Xdebug + VS Code .
4. Clique em Instalar complemento .
5. Uma vez feito, clique em Ativar e Reiniciar .
6. Abra um site em Local e clique na guia Utilitários .
7. Clique em Adicionar configuração de execução ao código VS.
8. O VS Code será iniciado e você poderá iniciar o processo de depuração.

Se você não preferir o VS Code, poderá usar outra ferramenta de edição para a tarefa.

4. Configurando o Xdebug e o PhpStorm para depuração

Outra opção é usar o PhpStorm com o Xdebug. Você pode adicioná-lo ao Local via add-on e ele funcionará em conjunto com o Xdebug Step Debugger. A instalação e configuração são muito semelhantes ao processo descrito para o VS Code acima. Para usá-lo, execute os seguintes passos:

1. Baixe e instale o PhpStorm.
2. Em Local, clique em Complementos > Xdebug + PhpStorm .
3. Clique em Instalar complemento .
4. Novamente, habilite e reinicie depois de concluído.
5. Abra qualquer site em Local e clique em Utilitários aba.
6. Clique em Adicionar configuração de execução ao PhpStorm .
7. Com o PhpStorm ativo, defina pontos de interrupção clicando na medianiz na linha de código específica onde você deseja que o ponto de interrupção ocorra.
8. Clique em Reproduzir para iniciar o processo de depuração.

Se você quiser mais orientações sobre o processo de depuração, a Depuração por etapas é sempre uma opção.

5. Usando o Xdebug para depuração em etapas

Step Debugging é uma ferramenta super útil e parte do Xdebug que essencialmente segura sua mão durante o processo de depuração. Ele funciona com VS Code e PhpStorm (assim como muitos outros IDEs e editores de texto) para fornecer ferramentas, etapas e protocolos de depuração detalhados e fáceis de seguir.

No Local, você não precisa fazer nada para configurar o Xdebug – ele é ativado por padrão automaticamente. Embora existam instruções de configuração mais complexas se você tiver um ambiente de teste complicado (com vários sistemas contribuindo ao mesmo tempo), vamos supor que é apenas você precisando executar a depuração, em um sistema, em uma instalação do Local por enquanto.

Para usar a depuração por etapas, tudo o que você realmente precisa fazer é seguir as etapas descritas nas duas seções anteriores. O recurso funciona com VS Code ou PhpStorm. Depois que tudo estiver configurado, ele definirá automaticamente os pontos de interrupção e reproduzirá o código um por um. Isso oferece uma maneira intuitiva de executar seu código, ver os erros e corrigi-los à medida que surgem.

Depuração no Local Made Easy

Como você pode ver, a depuração no Local é realmente um processo muito fácil que requer configuração mínima para começar. A ferramenta de depuração primária já está presente por padrão. Tudo o que você precisa fazer é configurar seu editor de texto ou IDE preferido, configurar um ou dois complementos e está tudo pronto. Obviamente, você precisará executar as correções de bugs reais para deixar seu site em ótima forma. Mas, pelo menos, o próprio processo de depuração pode ser executado com facilidade e com o mínimo de confusão.

Quais são suas ferramentas preferidas para depurar no Local? Adoraríamos ouvir seus comentários nos comentários abaixo.