Depurador de código do Visual Studio: uma cartilha e um screencast

Em posts anteriores, falei um pouco sobre por que usar um depurador adequado versus algumas das instruções internas do PHP são importantes. No último post, inclusive, abordo como configurar o Xdebug com Visual Studio Code (e MAMP Pro, caso esteja usando).

Mas se você nunca usou uma ferramenta como essa antes, nunca viu como ela funciona ou nunca viu por que ela é tão poderosa, quero abordar isso um pouco neste post.

Então, vou fazer um pouco de como fazer isso no contexto de algumas definições 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ção.

O depurador de código do Visual Studio

Supondo que você tenha o depurador instalado; existem alguns termos que valem a pena aprender. Claro, existem mais, mas estes são os que considero fundamentais:

• Pontos de interrupção são onde você está dizendo ao programa para interromper sua execução. Uma vez que o código tenha parado neste ponto, você pode examinar as variáveis, ver quais valores estão armazenados na memória e assim por diante.
• Os relógios são variáveis ​​no código que você quer literalmente observar à medida que mudam ao longo da execução das variáveis.
• Iniciar coloca o depurador em movimento. Mesmo se você tiver pontos de interrupção e relógios definidos, o depurador não fará nada até que você o inicie.
• Step Into é uma ação que, quando você atinge uma chamada de função, o levará para a função que está sendo invocada. Às vezes isso é útil, como se você quiser ver o que a função está fazendo; outras vezes, é desnecessário se você se preocupa apenas com a execução da função ou apenas com o que ela retorna.
• Step Over permitirá que você passe por cima da execução de uma função de forma que a execução do programa pare imediatamente após a conclusão da função que você passou.
• Step Out é usado quando você entra em uma função, atinge um ponto em que terminou de avaliar o código e, em seguida, está pronto para voltar para onde definiu um ponto de interrupção.
• Stop encerrará a execução do depurador.

Parece relativamente claro, não é? Na minha opinião, é mais fácil ver isso em ação.

Além disso, para ver quais ícones fazem o que, geralmente a melhor coisa a fazer é passar o mouse sobre eles e ler as dicas de ferramentas; no entanto, depois de um tempo ou dois de usá-los, você estará familiarizado com o que cada um faz.

Afinal, os ícones são bastante descritivos.

Um exemplo

Com isso dito, supondo que você tenha seguido as etapas do artigo anterior, aqui está um pequeno exemplo de como você pode definir um ponto de interrupção e seguir sua execução por meio de um plug-in.

1 ponto de interrupção

Observe na imagem abaixo que coloquei um ponto de interrupção ao lado de uma linha de código (conforme indicado pelo ponto vermelho).

É aqui que a execução vai parar quando eu iniciar o depurador e começar a executar o programa.

2 Defina um relógio

Em seguida, observar uma variável significa que queremos ver o valor de uma variável ao longo do ciclo de vida do programa. Abaixo, estou adicionando um relógio à variável $description.

Na próxima seção, você verá o valor do watch após a execução do programa passar por essa linha de código.

3 Avalie o relógio

Depois que o código tiver passado por essa linha, você poderá ver o valor da variável na  seção Watch do painel de depuração.

Observe na função, há uma chamada para woocommerce_wp_text_input. Usaremos essa função como exemplo para entrar em uma função, pois é uma função que faz parte do núcleo do WooCommerce.

4 Prepare-se para entrar

Antes de entrar em uma função, é importante certificar-se de que o nome da função esteja destacado.

Uma vez feito, você poderá clicar no botão Step In para ver o que está acontecendo na função.

5 Passo em

Depois de entrar, você verá o código que não escreveu. Em vez disso, é o código que faz parte do WooCommerce (pelo menos neste exemplo).

Com base em sua experiência, você verá o código que talvez você escreveu ou que outra pessoa escreveu.

6 Sair

Depois de sair do código, você retornará à linha de código imediatamente depois de entrar no código.

Faz sentido?

Um screencast

E, finalmente, aqui está um breve screencast que mostra tudo o que foi dito acima em ação:

Como mencionado no vídeo, isso não é abrangente, mas deve ser suficiente para mostrar o quão poderosa a depuração pode ser.

Leva tempo e prática

A depuração leva um pouco mais de tempo do que despejar variáveis ​​na tela.

E não estou dizendo que fazer isso não tem seu lugar; no entanto, se você deseja obter uma compreensão mais profunda do que está acontecendo sempre que está executando seu programa, ou deseja explorar, digamos, o núcleo do WordPress, usar um depurador é uma maneira muito boa de fazer isso.

Além disso, eu diria que usar um depurador pode ajudar a entender melhor o que está errado (ou certo) no contexto do seu código para que você possa criar a melhor solução possível para ele.