Outils de débogage

Les navigateurs modernes possèdent des outils avancés (les Outils de développement) permettant de faire la chasse aux erreurs d’un programme (les bugs ou bogues).

On utilisera le navigateur Mozilla Firefox et son Débogueur accessible dans le menu Développment (ou avec le raccourcis clavier Control-Maj-S). Voici à quoi il ressemble (cliquer pour agrandir):

Conseils :

• afficher la console miniature (console scindée).
• régler la console de manière à n’afficher que javascript et journal (ce sont les seuls qui doivent avoir un fond coloré).
• cliquer sur le fichier p5.js et le mettre dans une boîte noire.

Premier exercice avec les outils de débogage

Ouvrir le fichier exercice-debogage.html et l’outil de débogage de Firefox (si besoin on peut relancer le programme en actualisant la page – touche F5).

Mettre le programme en pause (avec l’outil de débogage de Firefox), puis écrire dans la console les commandes suivantes (aide : on peut reprendre une commande précédente en utilisant la touche flèche haute) :

fill(200);
ellipse(200,300,50);
ellipse(300,400,100,30);
ellipse(400,200,40,200);

En déduire à quoi correspondent chacun des nombres passés entre parenthèse à la fonction ellipse(). Consulter la documentation de la fonction ellipse() pour vérifier votre réponse.

Deuxième exercice avec les outils de débogage

Recharger la page exercice-debogage.html et, avec l’outil de débogage de Firefox, chercher dans le fichier exercice-debogage.js la ligne :

ellipse(400,300,diametre);

Insérer un point d’arrêt sur cette ligne et créer une nouvelle expression espionne sur la variable diametre. Mettre enfin le fichier p5.js dans une boîte noire.

Recharger la page et exécuter pas à pas le programme avec les outils de débogage. Suivre au fur et à mesure de l’exécution du programme l’évolution de la valeur de la variable diametre.

Quelle est la ligne de code qui permet de faire évoluer la taille du disque ?