Firebug et le débogage d’une page web

Mais pourquoi ce bloc ne se place-t-il pas comme je lui demande ? Pourquoi ce texte est bleu alors que je lui demande d’être vert ? Vous en avez assez de faire d’innombrables allers-retours entre votre navigateur et votre éditeur de code pour trouver ce qui cloche ? N’attendez plus, utilisez un outil de débogage !

Chaque développeur a son navigateur fétiche et chaque navigateur possède son outil de débogage. La performance de certains outils peut cependant amener certains développeurs à choisir leur navigateur de développement en fonction de l’outil de débogage associé. Pour cet article, nous nous concentrerons essentiellement sur Firebug pour Firefox qui est certainement le plus connu et le plus utilisé à ce jour.

Firebug est un des nombreux plugins disponibles pour Firefox. Il n’est donc pas installé par défaut sur le navigateur mais il est téléchargeable à sur www.getfirebug.com

Une fois installé, une petite icône apparait en bas à droite de votre fenêtre pour les anciennes versions de Firefox ou bien en haut à droite pour les récentes :

Pour lancer Firebug, il suffit de cliquer dessus, ou d'utiliser le raccourci F12.

L'affichage par défaut de l'outil nous est proposé dans un volet occupant le bas de la page. Ce volet est divisé en deux, la partie de gauche représente la structure HTML de la page active et propose différents onglets (Console, HTML, CSS, Script, etc.), la partie de droite présente le code CSS associé à un élément sélectionné dans le DOM et propose lui aussi différents onglets (Calculé, Apparence, etc.)

Cet affichage en volet peut parfois gêner la lecture du document, Firebug propose un mode de visualisation par fenêtre, il vous est donc possible de détacher ce volet pour le rendre flottant en cliquant sur le petit bouton du milieu, en haut à droite du volet.

Firebug, pour quoi faire ?

L’inspection du code HTML :

Puisque rien ne vaut un bon exemple, je vous propose de découvrir l’outil au travers l’étude du « cas Alsacréations » (alsacreations.com) :

Dans un premier temps, Firebug permet d’inspecter le code source d’une page en surlignant la partie de la page concernant par le bout de code sur lequel on place la souris :

On voit donc ici qu’un calque bleu translucide permet de repérer sur la page l'élément div ayant pour identifiant « sous-menu ». Le repérage dans l’architecture d’un site devient chose aisée.

Le débogage CSS :

Dans le même temps, on s’aperçoit que la fenêtre de droite nous permet de voir le code CSS associé à l’élément que l’on est en train d’inspecter. Et là où Firebug devient un outil fabuleux, c’est qu’il est possible de modifier, ajouter ou supprimer une propriété CSS à la volée et d’en voir la répercussion immédiate sur le site ! Plus besoin de retourner x fois dans votre éditeur de code pour ajuster un élément au pixel près !

Étudions, par exemple le sous-menu d’Alsacréations :

Nous voyons qu’il s’agit, fort logiquement, d’une liste d’ul li. Maintenant, en cliquant sur un des éléments li de class « item », nous pouvons modifier ses propriétés CSS en cliquant sur la valeur de celles-ci et en utilisant les flèches directionnelles du clavier. Modifions par exemple, la valeur initiale de 9px du margin-left. Miracle ! Le menu s’adapte automatiquement à sa nouvelle valeur !

Attention, Firebug n’enregistre pas les modifications dans votre feuille de style. Il vous faut quand même aller reporter la nouvelle valeur dans votre éditeur de code pour qu’elle soit prise en compte.

Il est également possible de désactiver une propriété, comme ici le background :

Ou d’ajouter une propriété en faisant un clic-droit puis « nouvelle propriété », ou en double-cliquant dans l'espace blanc à droite de n'importe quelle déclaration.

Il est, par exemple, aussi envisageable de cacher le menu en ajoutant un display: none.

Cette icône (située en haut à gauche dans la fenêtre de Firebug) peut être très pratique pour inspecter un élément perdu au milieu de la page.

Il suffit de cliquer dessus puis de cliquer ensuite sur l’élément voulu dans la page.

Le débogage Javascript :

Nous ne nous étendrons pas sur le débogage Javascript qui pourrait faire l’objet à lui tout seul d’un tutoriel complet, mais sachez que Firebug possède toutes les fonctionnalités nécessaires pour déboguer vos scripts. L'onglet Console comporte non seulement un relevé des erreurs et avertissements, un outil Profiler et surtout une zone d'entrée permettant la saisie de code exécutable en direct.

L’audit de performance :

Autre fonctionnalité intéressante dans Firebug : l’onglet « Réseau » qui permet de voir l’ensemble des requêtes envoyées au serveur et de cerner rapidement les éléments qui sont susceptible de ralentir votre page (chemin d’image erroné, script trop lourd, etc…). Cette fonctionnalité peut notamment s’avérer indispensable dans le cas de développement en AJAX.

Les plugins du plugin :

Autre force de Firebug : la possibilité de lui ajouter d’autres plugins complémentaires dont voici une liste non exhaustive :

• FireQuery : un plugin très pratique pour analyser le code jQuery

  

• YSlow : un plugin qui permet d’aller un peu plus loin que l’onglet « réseau » de Firebug et qui permet de comprendre pourquoi votre page est lente.

  

• Pixel Perfect : l’ami des intégrateurs. Pour ajuster les éléments de votre site au pixel près par rapport à votre charte graphique, ce plugin permet d’afficher une image en calque par-dessus votre site.

  

• Fire Picker : un petit plugin très pratique qui permet d’afficher la palette de couleur lorsque l’on souhaite modifier un couleur dans le code CSS.

  

Et les autres navigateurs alors ?

Vous n’êtes pas un inconditionnel de Firefox ? Pas de panique, voici une liste non exhaustive des différents outils disponibles sur la toile :

Dragonfly pour Opera :

Raphaël a apporté pas mal d'informations sur ce très bel outil : voir l’article sur Opera Dragonfly.

Outils de développement pour Chrome :

Équivalent de Firebug, cet outil est déjà intégré au navigateur et accessible par le menu « Outils » ou le raccourci clavier Ctrl Maj i.

Inspecteur Web pour Safari :

Très proche de l’outil proposé par Chrome, cet outil n'est pas activé par défaut dans Safari. Pour l'activer, allez dans Réglages (Icône engrenage)