CSS

Firebug et le débogage d’une page web

Article par (Développeur Web, Bordeaux)
Créé le , mis à jour le (67795 lectures)
Tags : css, html, integration, firebug, debogage

Firebug

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 :

calque bleu transparent

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 :

Menu alsacreations

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 !

Changement des valeurs

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 :

Disparition du 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.

Ajout d'une nouvelle propriété

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.

Choix d'un élément

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.

Console Firebug

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.

Firebug onglet Réseau

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

    Firequery

  • 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.

    yslow

  • 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.

    Pixel perfect

  • 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.

    Firepicker

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)

Commentaires

JeanBambi a dit le

Il existe également un plug de débuggage pour Flash AS3 : http://www.o-minds.com/products/flashfirebug

Nico3333fr a dit le

On notera que Yslow permet aussi via le panneau tools, il y a des utilitaires très pratiques, exemple : un lien direct vers all smush.it qui va réduire le poids des images de votre graphisme.

Toujours dans l'onglet Webperfs, il y a aussi PageSpeed à ajouter à Firebug.

Il y aussi une extension qui checke l'accessibilité sous Firebug, mais je n'ai plus le nom...

Comment, Firebug ne vous est pas encore indispensable ?

hchtot a dit le

Pour l'accessibilité sous Firefox nous avons Accessibility Evaluation Toolbar :
https://addons.mozilla.org/fr/firefox/addon/accessibility-evaluation-toolb/

Felipe a dit le

@Nico3333fr : AInspector je suppose, qui est une extension pour Firebug (elle a pour base une partie du code de YSlow mais avec ses propres règles adaptées à l'accessibilité).
J'avais testé la version 0.8 et le choix des règles m'avait laissé perplexe on va dire ... Ils en sont à la version 0.93 il faudrait peut-être que je reteste !

bgondy a dit le

Par défaut, je trouve le débugger de Chrome plus puissant et plus rapide à utiliser.
Il manque aussi celui pour IE9, galère à utiliser car peu ergonomique à mon goût.

Nico3333fr a dit le

@Felipe : oui c'est ça, je ne l'avais pas installée sur le PC du boulot, mais je l'avais mise sur mon laptop. ;)

A choisir, je préfère Firefox Accessibility Extension, toutefois, comme le sujet de la news était Firebug, autant rester dans le sujet. ;)

7am a dit le

Quelques astuces pour faire gagner du temps aux débutant en firebug :

- "Inspecter un élément" peut se faire directement par clic droit sur l'élément sans avoir besoin d'ouvrir firebug au préalable.
- quand on clique sur la valeur d'une propriété, les flèches haut et bas du clavier permettent d'incrémenter/décrémenter. Les touches page suivante/précédente multiplie l'incrémentation par 10.
- l'ajout d'une nouvelle propriété peut se faire en cliquant sur la dernière valeur et en appuyant sur entrée
- les touches haut et bas du clavier permettent de faire défiler les proposition de la saisie intuitive des propriété ou de leur valeur
- pour simuler l'ajout d'un nouveau style, on peut faire un clic droit dans la zone "style" > Éditer le style de l'élément. Ça ajoute ajoute un attribut style à la base html. C'est satisfaisante le temps d'un test. Par contre, ça ne permet pas de tester le poid du style dans la cascade. Pour ça, il vaut mieux créer son style en allant dans l'onglet CSS > Source Edit. Mais c'est plus fastidieu.
- les styles sont listé dans un ordre décroissant de poid dans la cascade. Les propriétés inactives à cause du poid sont barrées.
- les urls (dans une propriété de style pour les images ou en commentaire du panneau style pour les fichiers css) peuvent s'ouvrir dans un nouvel onglet par clic droit
- l'instruction javascript pour envoyer un message dans l'onglet console et console.log('Le message à afficher');

gok6tm a dit le

Salut à noter aussi la présence du plugin illumination pour firefox
http://www.illuminations-for-developers.com/

qui permet d'avoir une meilleure vision des objets javascript pour certains framework (jQuery, extJs, YUI, dojo, sproutcore, ...)

Le plugin est payant mais la version trial est suffisamment opérationnel pour rendre un substantiel gain de temps dans le deboguage.

SamWeb a dit le

Personnellement, j'utilise celui de chrome qui est plus rapide. (Accessible avec F12 également) ;)

bugpics a dit le

idem, l'outil de développement de Chrome est aussi très performant et déjà intégré. Je lui trouve plus de fonctionnalités surtout pour voir les pages php en ajax (get, post, réponses).

ZeB_panam a dit le

@bugpics : Dans Firebug, toutes les infos pour les requêtes sont accessibles en cliquant sur le petit + à côté du nom du fichier (ou en cliquant sur le nom du fichier) dans la partie "réseau". Donc je ne pense pas qu'il y ait moins de fonctionnalités…

Au niveau de la console, Firebug va vraiment plus loin qu'un simple console.log : http://getfirebug.com/logging
(avec des propriétés de type debug, info, time, trace, group, dir, etc…)

Sinon, merci pour PixelPerfect et FirePicker, je ne connaissais pas :)

tby a dit le

Je suis le site depuis un moment sans avoir jugé nécessaire de m'y inscrire. Voilà qui est fait.
À noter que Firebug est aussi disponible sur Safari. À noter également que Firefox accuse Firebug d’être le principal responsable de ses pertes de performances.
Sinon merci pour toutes les informations déjà collectées et utilisées sur votre site.
Thierry

Felipe a dit le

Avec Firebug 1.8, les touches page précédente/page suivante ne permettent plus de décrémenter ou incrémenter de 10 les valeurs numériques, il faut utiliser Shift + flèche bas et haut. Et AWESOME! Avec Ctrl et flèches on peut fignoler par pas de 0.1 comme sur Safari qui le fait depuis des années.

De quoi enfin faciliter les font-size en em !