Firebug Dévermineur Debugger
Installation de Firebug S’il n’y a pas la petite bête au bas à droite de l’écran, ni le menu « Firebug » dans le menu « Outils », alors chercher « firebug download » sur Google cliquer sur Add to Firefox recharger Firefox
La page HTML Recherche de texte dans les fenêtres de Firebug Variable globale, peut être affichée sans exécution Sélection d’un fichier.js Cliquer pour ouvrir la fenêtre Firebug Cliquer pour voir un fichier (Activer si nécessaire)
console.log(uneVariable + " " + locale) activer pour la première exécution
Cliquer pour que le programme s’arrête à l’exécution Liste des arrêts Imbrication des variables à l’arrêt argument de la fonction variables globales Variable locale (ligne pas encore exécutée)
Un pas, entrer dans la fonction Terminer la fonction Continuation du programme Un pas par dessus la fonction
Sélectionné Inspection des éléments HTML Aussi en cliquant l’élément avec le bouton droit de la souris
Le contenu de la fenêtre Espions change quand on sélectionne des fonctions dans la fenêtre Pile Quand cette fenêtre est sélectionnée, on peut sélectionner une variable à gauche avec le bouton droit, puis « Ajouter un espion » avec le bouton gauche
Exercice Chargez le code de la page suivante dans un fichier Exécutez-le et vérifiez qu’il a écrit quelque chose dans la console Remplacez la ligne contenant console.log par test(locale) mettez un breakpoint et lisez les valeurs des variables quand vous cliquez un pas quelques fois de suite. Cliquez le bouton qui passe dans la fonction test et celui qui passe par dessus Terminez par
<. DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>debugging</title> <script type="text/javascript"> var uneVariable = 88 function test (maLocale) { uneVariable += maLocale } function execute (arg) { for (var locale = 99; locale<102; locale++) { console.log (uneVariable+" "+locale) } } </script> </head> <body> <button onclick='execute(222)'>Clic</button> </body> </html>
Suite de l’exercice Lorsque votre programme est arrêté dans test(), cliquez sur Pile Cliquez sur le nom des fonctions qui apparaissent et passez à la fenêtre espion après avoir sélectionné chacune des fonctions