Débogueur de code Visual Studio : introduction et capture d’écran

Dans les articles précédents, j’ai un peu expliqué pourquoi l’utilisation d’un débogueur approprié par rapport à certaines des instructions intégrées de PHP est importante. Dans le dernier article, même, j’ai expliqué comment configurer Xdebug avec Visual Studio Code (et MAMP Pro, si vous utilisez).

Mais si vous n’avez jamais utilisé un outil comme celui-ci auparavant, vous n’avez jamais vu comment cela fonctionne, ou vous n’avez jamais vu pourquoi il est si puissant, je veux en parler un peu dans cet article.

Je vais donc parcourir un peu cela dans le contexte de quelques définitions et captures d’écran ainsi qu’un court screencast à la fin afin que je puisse montrer le débogueur Visual Studio Code en action.

Le débogueur de code Visual Studio

En supposant que vous ayez installé le débogueur ; il y a quelques termes qui valent la peine d’être appris. Bien sûr, il y en a d’autres, mais ce sont ceux que je considère comme essentiels :

• Les points d’ arrêt sont l’endroit où vous dites au programme d’arrêter son exécution. Une fois que le code s’est arrêté à ce stade, vous pouvez examiner les variables, voir quelles valeurs sont stockées en mémoire, etc.
• Les montres sont des variables dans le code que vous voulez littéralement regarder car elles changent tout au long de l’exécution des variables.
• Start met le débogueur en mouvement. Même si vous avez défini des points d’arrêt et des surveillances, le débogueur ne fera rien tant que vous ne l’aurez pas démarré.
• Pas à pas dans est une action qui, lorsque vous appuyez sur un appel de fonction, vous emmènera dans la fonction qui est invoquée. Parfois, cela est utile, comme si vous voulez voir ce que fait la fonction ; d’autres fois, ce n’est pas nécessaire si vous ne vous souciez que de l’exécution de la fonction ou si vous ne vous souciez que de ce qu’elle renvoie.
• Pas à pas vous permettra de parcourir l’exécution d’une fonction de sorte que l’exécution du programme s’arrête immédiatement après la fin de la fonction que vous avez franchie.
• Step Out est utilisé lorsque vous êtes entré dans une fonction, que vous avez atteint un point où vous avez fini d’évaluer le code, puis que vous êtes prêt à revenir à l’endroit où vous aviez défini un point d’arrêt.
• Stop mettra fin à l’exécution du débogueur.

Cela semble relativement clair, n’est-ce pas? À mon avis, il est plus facile de voir cela en action.

De plus, pour voir quelles icônes font quoi, la meilleure chose à faire est généralement de les survoler, puis de lire les info-bulles ; cependant, après un moment ou deux d’utilisation, vous serez familiarisé avec ce que chacun fait.

Après tout, les icônes sont assez descriptives.

Un exemple

Cela dit, en supposant que vous avez suivi les étapes de l’article précédent, voici un court exemple de la façon dont vous pouvez définir un point d’arrêt et suivre son exécution via un plugin.

1 point d’arrêt

Remarquez dans l’image ci-dessous, j’ai placé un point d’arrêt à côté d’une ligne de code (comme indiqué par le point rouge).

C’est là que l’exécution va s’arrêter une fois que j’ai démarré le débogueur et que j’ai commencé à exécuter le programme.

2 Définir une montre

Ensuite, regarder une variable signifie que nous voulons voir la valeur d’une variable tout au long du cycle de vie du programme. Ci-dessous, j’ajoute une montre à la variable $description.

Dans la section suivante, vous verrez la valeur de la montre après que l’exécution du programme a passé cette ligne de code.

3 Évaluez la montre

Une fois que le code a passé cette ligne, vous pouvez voir la valeur de la variable dans la  section Watch du volet de débogage.

Remarquez dans la fonction, il y a un appel à woocommerce_wp_text_input. Nous utiliserons cette fonction comme exemple pour entrer dans une fonction puisqu’il s’agit d’une fonction qui fait partie du cœur de WooCommerce.

4 Préparez-vous à intervenir

Avant d’entrer dans une fonction, il est important de s’assurer que le nom de la fonction est en surbrillance.

Une fois cela fait, vous pourrez cliquer sur le bouton Step In pour voir ce qui se passe dans la fonction.

5 Entrez

Après être intervenu, vous verrez du code que vous n’avez pas écrit. Au lieu de cela, c’est du code qui fait partie de WooCommerce (au moins dans cet exemple).

En fonction de votre expérience, vous verrez du code que vous avez peut-être écrit ou que quelqu’un d’autre a écrit.

6 Sortez

Une fois que vous êtes sorti du code, vous allez revenir à la ligne de code immédiatement après l’endroit où vous êtes entré dans le code.

Avoir du sens ?

Une capture d’écran

Et enfin, voici un très bref screencast décrivant à quoi ressemble tout ce qui précède en action :

Comme mentionné dans la vidéo, ce n’est en aucun cas exhaustif, mais cela devrait suffire à montrer à quel point le débogage peut être puissant.

Cela prend du temps et de la pratique

Le débogage prend un peu plus de temps que le vidage des variables à l’écran.

Et je ne dis pas que faire cela n’a pas sa place ; Cependant, si vous souhaitez mieux comprendre ce qui se passe chaque fois que vous exécutez votre programme, ou si vous souhaitez explorer, par exemple, le cœur de WordPress, l’utilisation d’un débogueur est un très bon moyen de le faire.

De plus, je dirais que l’utilisation d’un débogueur peut aider à mieux comprendre ce qui ne va pas (ou bien) dans le contexte de votre code afin que vous puissiez créer la meilleure solution possible.