Déboguer Avec Firebug
Qu’est-ce que Firebug ?
Firebug est un extension de Firefox qui permet de déboguer le javascript, le css, la structure HTML et les requêtes AJAX d’une page.
Comment l’installer ?
Télécharger l’extension à l’adresse suivante : https://addons.mozilla.org/fr/firefox/addon/1843
Présentation du débogueur
L’ouvrir
Pour ceux qui sont comme moi et qui ont un tas d’extension, voici où se trouve le bouton pour ouvrir le débogueur.
La console
Javascript
1 – Ligne où il y a l’erreur.
2 – Fichier et numéro de ligne où il y a l’erreur.
3 – Détail de l’erreur.
4 – Stack Trace (Chemin qu’il y a eu avant de se rendre jusqu’à l’erreur).
AJAX
5 – Nom du fichier dans la requête.
6 – Fichier javascript qui a fait la requête.
7 – Réponse reçue.
8 – Paramètre POST envoyé.
Console
9 – Quand la fenêtre de Firebug est fermé ce message nous identique qu’il y a eu une erreur.
10 – Console javascript standard. Il suffit de taper le code que l’on veut faire exécuter et de cliquer sur « Run ».
Comment changer l’affichage de la console
En bas à droite, il y a une flèche qui est soit vers le haut, soit vers le bas. Cette flèche permet de changer la disposition de la console.
Explorateur HTML
Explorateur DOM
1 – Indique où dans le DOM l’élément sélectionné se trouve.
CSS
2 – Indique le code CSS qui affecte l’élément.
3 – Quand un attribut est rayé, cela signifie qu’il n’a plus d’effet.
4 – Indique de quel fichier css le code provient.
5 – Indique (si tel est le cas) les attributs qui sont hérités et de où ils sont hérités.
Comment modifier une propriété d’une balise HTML rapidement
Double-cliquer sur le nom de l’attribut ou sur sa valeur pour modifier soi le nom de l’attribut ou sa valeur
Comment enlever un attribut CSS
Quand vous passer la souris au-dessus du nom de l’attribut CSS, vous voyez un cercle avec une barre qui apparaît à côté de celle-ci. Cliquer dessus et l’attribut n’aura plus d’effet sur la page.
Comment se rendre rapidement jusqu’à un élément dans la page
En haut à gauche, il y a le bouton « Inspect ». Cliquez dessus et promenez votre curseur dans la page jusqu’à ce que vous soyez sur votre élément.
Les onglets Layout et DOM
L’onglet layout permet de voir les différentes marges, bordures, etc. Il permet aussi des les modifier.
L’onglet DOM permet de voir tout les attributs DOM que cet objet a.
Explorateur des fichiers CSS
L’explorateur des fichiers CSS permet d’explorer tous les fichiers CSS utiliser par la page. On peut comme dans l’explorateur HTML temporairement enlever des attributs CSS.
Débogueur Javascript
Javascript
1 – Les points rouges représentent les points d’arrêt dans le code
2 – Un point rouge avec une flèche représente la ligne où les débogueur est rendu.
3 – Cette fenêtre permet de voir les variables utilisés par la fonction et permet de facilement suivre leur changement.
4 – Les boutons servent à Continuer, Avancer pas à pas, Avancer vers l’avant, Retourner en arrière
5 – Montre les fonctions qui ont été appelé avant de se rendre jusque là.
Comment rajouter des points d’arrêt
Il suffit de cliquer sur le numéro de la ligne de code et un point rouge apparaît.
Comment voir tous les points d’arrêt dans le code
Il suffit d’aller dans l’onglet « Breakpoints » qui est tout juste à côté du numéro 3.
Explorateur des propriétés DOM
La seule chose qui est intéressante à mentionner pour cette section est que l’on peut modifier les propriétés en double-cliquant sur la valeur.
Chargement des fichiers
Dans le dernier onglet (Net), on peut voir la liste des fichiers chargés ainsi que le temps nécessaire pour les télécharger.
On peut utiliser les filtres pour ne voir que les fichiers HTML, CSS, JS, Images , XHR ou Flash.
Liens
FAQ de Firebug (anglais) : http://getfirebug.com/faq.html
Site officiel (anglais) : http://www.getfirebug.com/