Firebug

1
Firebug

• Dévermineur
• Debugger

2
Installation de Firebug
Sil ny 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

3
La page HTML
Recherche de texte dans les fenêtres de Firebug
Variable globale, peut être affichée sans
exécution
Sélection dun fichier.js
Cliquer pour ouvrir la fenêtre Firebug
Cliquer pour voir un fichier (Activer si
nécessaire)
4
console.log(uneVariable  " " locale)
activer pour la première exécution
5
Cliquer pour que le programme sarrête à
lexécution
Liste des arrêts
Imbrication des variables à larrêt
argument de la fonction
variables globales
Variable locale (ligne pas encore exécutée)
6
Un pas, entrer dans la fonction
Terminer la fonction
Continuation du programme
Un pas par dessus la fonction
7
Sélectionné
Inspection des éléments HTML
Aussi en cliquant lélément avec le bouton droit
de la souris
8
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
9
Exercice

• Chargez le code de la page suivante dans un
  fichier
• Exécutez-le et vérifiez quil 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

10
lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trans
itional//EN"gtlthtmlgt    ltheadgt        ltmeta http
-equiv"Content-Type" content"text/html
charsetutf-8"/gt        lttitlegtdebugginglt/titlegt
        ltscript type"text/javascript"gt          
   var uneVariable  88 function test
(maLocale) uneVariable
maLocale             function execut
e (arg)                 for (var locale  99
localelt102 locale)                 
console.log (uneVariable" "locale)              
                        lt/scriptgt     lt/headgt
    ltbodygt    ltbutton onclick'execute(222)'gtClic
lt/buttongt    lt/bodygtlt/htmlgt
11
Suite de lexercice

• 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