Bien utiliser Firebug

Firebug est un plugin bien connu pour Firefox. Il permet d’inspecter facilement les pages web, les ressources appelées, d‘éditer le code en live, de débugger du code javascript…
Voyons comment faire tout ça pour pouvoir tirer le meilleur de Firebug !

Pour le télécharger c’est ici : Lien officiel

Pour le lancer, faire F12 ou bien cliquer sur l’icône dans la barre d’état.

(cliquer pour agrandir l'image)
html.jpg
Il y a plusieurs onglets. Il est possible d’installer des extensions qui créent d’autres onglets (c’est le cas sur cette capture).

Editer et suivre les styles CSS des éléments

L’un des plus utiles est l’onglet HTML. Nous voyons le code HTML de la page. En cliquant sur une balise, l’élément correspondant se met en surbrillance sur la page (voir image plus haut). En bleu clair est le contenu de l’élément, en violet les marges internes, en jaune les marges externes.
Son code CSS s’affiche en partie droite dans l’onglet Style.

C’est très utile pour trouver quelle partie du code pose problème ou doit évoluer.
Nous pouvons alors cliquer sur les valeurs des propriétés CSS et les changer. Le nouveau rendu s’affiche tout de suite dans la page.

En mettant la souris à droite d’une propriété et en double cliquant, nous pouvons ajouter de nouvelles propriétés. Il suffit de taper les propriétés et valeurs voulues, et nous voyons immédiatement le rendu dans la page.

(cliquer pour agrandir l'image)
edit_css_rule.jpg

En tapant « yellow » par exemple dans la propriété, la couleur existante se change en jaune et le changement se voit de suite.

disable_css_rule.jpg

En passant la souris juste avant la propriété, un symbole rouge apparaît. En cliquant dessus cela désactive la règle CSS correspondante. Ce CSS n’est plus appliqué et le changement se voit de suite (ici le texte devient noir, sa couleur par défaut).

(cliquer pour agrandir l'image)
css_apparence.jpg

En choisissant l’onglet Apparence après avoir choisi un élément côté HTML, nous avons un visuel des dimensions et marges internes, externes et des bordures de l’élément. C’est plus simple à comprendre que du CSS, et nous pouvons utiliser cet onglet pour éditer en live le code CSS : à nouveau il suffit de cliquer sur une valeur et de la changer pour voir l’élément immédiatement changer. Les zones de couleur pour les marges et bordures s’actualisent en temps réel.

Le CSS marche par héritage, ce qui signifie qu’un élément hérite des styles de chacun de ses parents.
Si plusieurs styles différents sont donnés au même élément à plusieurs endroits du fichier, ceux qui apparaissent en dernier prennent le dessus.
Il est possible de surcharger les styles d’un élément pour changer son apparence.

css_heritage.jpg

Ici, à la ligne 1 du fichier CSS, une marge est donnée aux titres <h2>.
Plus loin sur cette ligne 1, une marge différente est donnée aux <h2>, elle annule donc la première.
A la ligne 4, des marges différentes sont données aux <h2> contenus dans une certaine div. Pour ces <h2> précisément, les marges de la ligne 1 seront annulées.

Une couleur est donnée aux <h2> à la ligne 1, et est remplacée pour certains <h2> à la ligne 4.
Tous les styles qui sont remplacés plus loin dans le code et qui sont donc obsolètes apparaissent barrés. Cela veut dire qu’ils sont là mais qu’ils n’ont pas d’effet sur l’élément.
Il est donc facile de voir quels styles sont appliqués aux éléments et leur héritage.

Si malgré cet affichage vous ne comprenez pas quels styles sont appliqués à l’élément ou si ce n’est pas cohérent selon vous, vous pouvez voir les styles qui sont réellement appliqués à l’élément dans l’onglet Calculé.

css_calcule.jpg

Editer le code HTML

Pour simuler un contenu différent dans la page, ce qui est souvent nécessaire pour tester plusieurs cas de figure, Firebug permet d’éditer « en live » le code HTML et de voir immédiatement les modifications, comme pour le CSS.

edit_html.jpg

On clique sur l’élément à éditer puis on clique sur le bouton « Editer ». Le code HTML de l’élément apparaît, et nous pouvons écrire ce que nous voulons, ajouter ou supprimer des balises…. Et voir tout de suite le résultat. Ici j’ajoute un mot et un lien dans mon <h2>.

C’est vraiment pratique, cela évite de devoir changer le code dans la page elle-même, de repasser éventuellement par des étapes de déploiement parfois longues…
Nous combinons les modifications en HTML et en CSS jusqu'à avoir le bon rendu, puis nous répercutons ensuite les modifications dans nos fichiers.

Inspecter les ressources de la page

Firebug permet d’inspecter toutes les ressources appelées par la page (images, CSS, javascript, html, média…).
C’est dans l’onglet Réseau que ça se passe :

(cliquer pour agrandir l'image)
reseau.jpg

Pour chaque ressource nous voyons l'url appelée, son poids, son statut (qui permet de voir si le fichier vient du cache ou non), le temps qu’elle met pour être téléchargée…
En cliquant sur le type de fichier voulu, l’affichage est filtré.

Pour chaque fichier, en cliquant dessus on accède à des détails, comme les en-têtes de requête et de réponse du serveur pour ce fichier. Cela permet de voir l’encodage, si le fichier est compressé ou non, le type de compression, le type-MIME reçu du serveur…. Des infos utiles pour débugger en cas de problème.

entetes.jpg

Nous pouvons voir les paramètres envoyés à d’autres pages quand c’est le cas, avec leur nom et valeur (comme dans la soumission de formulaires).

parametres.jpg

Javascript et debugging

Firebug intègre un outil très pratique pour voir et débugger le javascript de la page.
C’est dans l’onglet Script qu’il faut se rendre.
Un nom de script apparaît en partie haute. En cliquant dessus, nous voyons tous les scripts appelés par la page et nous choisissons celui à visualiser.
En regardant le code qui s'affiche nous pouvons contrôler si un script est bien à jour ou si le cache navigateur nous joue des tours.

Mais le plus intéressant sur cet onglet est la possibilité de mettre des points d’arrêt dans nos scripts pour les débugger. Nous pouvons alors contrôler pas à pas les valeurs des variables, les résultats et arguments des fonctions.

(cliquer pour agrandir l'image)
debug.jpg

Pour mettre un point d’arrêt il faut cliquer sur le numéro de ligne voulu (dans un gestionnaire d’événement par exemple). Puis il faut exécuter les actions qui vont déclencher ce gestionnaire (clic sur un bouton, texte tapé dans un champ…).

Si le point d'arrêt n’est pas dans un gestionnaire d’événement, il suffit de rafraîchir la page.
Le code va commencer à s’exécuter et se mettre en attente à la ligne en question.
Alors, en partie droite (onglet Espions) nous voyons les variables définies jusqu’à présent dans la page et leur valeur à ce moment précis du code.

Dans l'exemple plus haut, le point d’arrêt est dans un gestionnaire d’événement appelé par un texte tapé dans un champ.
A ce moment-là, nous voyons que la variable caracteresTapes vaut « h » et nbTapes vaut 1. La fonction dans laquelle on est n’a pas d’arguments. La valeur du mot clé This est Window (la fenêtre du navigateur).

Nous pouvons suivre l’évolution des variables et leur valeur au fur et à mesure de l’exécution du code avec les 3 flèches orange :

  • A chaque clic sur la 1ère , le code avance d’une ligne. A chaque fonction rencontrée, le debugger entre dans le code de la fonction et nous contrôlons l’état des variables et des arguments. C’est très pratique pour détecter si une variable est bien accessible ou bien définie. Cela peut causer des problèmes à d’autres endroits du code, et la source peut être très difficile à trouver sans outil de debug.
  • Au clic sur la 2ème , le code avance d’une ligne, mais le debugger ne rentre pas dans les fonctions rencontrées (leur code est tout de même exécuté). Nous ne voyons pas l’évolution des variables dans les autres fonctions appelées. Cela sert en général à inspecter une méthode en particulier et l’évolution du code dans cette méthode uniquement.
  • Au clic sur la 3ème, le code termine la fonction puis la suite s’exécute. Si un autre point est présent dans la fonction en cours ou les fonctions appelées depuis cette fonction, le script s'y arrêtera.

La 1ère flèche bleue sert à relancer le script, qui s'arrêtera à nouveau au point d'arrêt défini.
La seconde permet au code de terminer la fonction puis la suite s’exécute. Si un autre point est présent dans la fonction en cours ou les fonctions appelées depuis cette fonction, le script s'y arrêtera.

En passant la souris sur les variables et objets javascript dans le code, leur valeur apparaît en surbrillance (voir image plus haut). Cela permet de contrôler les différentes valeurs à chaque moment, ce qui est fort pratique pour trouver la source de bugs.

Voilà pour cette présentation de quelques fonctionnalités très intéressantes de Firebug. Il y en a d’autres, il y a des extensions, mais j’espère que cet article vous aura éclairé dans votre utilisation quotidienne ou occasionnelle de cet outil.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.