firebug
DESCRIPTION
Firebug. Dévermineur Debugger. Installation de Firebug. chercher « firebug download » sur Google cliquer sur Add to Firefox recharger Firefox. 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. La page HTML. - PowerPoint PPT PresentationTRANSCRIPT
Firebug
Dévermineur
Debugger
Installation de Firebug
• chercher « firebug download » sur Google
• cliquer sur Add to Firefox
• recharger Firefox
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
Cliquer pour ouvrir la fenêtre Firebug
Cliquer pour voir un fichier (Activer si nécessaire)
Sélection d’un fichier.js
Variable globale, peut être affichée sans exécution
La page HTMLRecherche de texte dans les fenêtres de Firebug
console.log(uneVariable + " " + locale)
activer pour la première exécution
Cliquer pour que le programme s’arrête à l’exécution
Variable locale(ligne pas encore exécutée)
argument de la fonction variables globales
Imbrication des variables à l’arrêt Liste des arrêts
Continuation du programme
Un pas, entrer dans la fonction
Un pas par dessus la fonction
Terminer la fonction
Inspection des éléments HTML
Sélectionné
Aussi en cliquant l’élément avecle bouton droit de la souris
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
Le contenu de la fenêtre Espions change quandon sélectionne des fonctions dans la fenêtre Pile
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.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