Firebug: le plugin indispensable pour analyser un site internet

Article mise à jour le: 23 février 2012

Lorsque l’on souhaite étudier un site internet et comprendre le code derrière le site, il existe 2 options.

Analyser directement le code source

La première option est manuelle, il s’agit d’aller sur une page du site en question et de faire un simple CTRL+U. En faisant cela, vous allez voir le code source de la page apparaître. Le rendu est très moyen et plutôt rebutant de prime abord. Cette option est donc à déconseiller à moins d’avoir envie d’un mal de crâne.

L’autre problème que vous aller avoir avec cette première méthode d’analyse d’une page web est qu’il vous faudra faire systématiquement des allers retours entre le fichier HTML et le fichier de code CSS pour que vous puissiez comprendre le fonctionnement html et css de la page (un simple ctrl +h et taper « css » permet d’identifier le code source du css).

Il existe une solution bien meilleure appelée Firebug.

… ou utiliser Firebug

La deuxième solution est nettement plus sympathique. Il vous suffit d’installer comme navigateur, Firefox dans un premier temps.

Firefox présente la particularité d’avoir un environnement plutôt souple et donc de proposer toute une foule de plugin permettant de modifier l’expérience utilisateur (un autre plugin très utile est GreaseMonkey).

Parmi ces plugins, Firebug est un excellent moyen pour celui qui souhaite personnaliser son site, analyser des performances de temps de chargement ou encore modifier un rendu en CSS.

Firebug se présente sous la forme d’un petit plugin que vous pouvez télécharger ici.


La première prise en main de Firebug

La prise en main de firebug est assez rapide. Pour lancer l’outil, il suffit de vous connecter à Internet, de choisir une page et de taper en raccourci clavier F12.

Vous allez voir apparaître dans le bas de votre écran une fenêtre qui se décompose; comme le montre le screenshot ci dessus; en 2 sous-fenêtres.

La partie de gauche regroupe de nombreuses options qui vous permettront d’afficher pour l’élément choisi le code html et le volet de droite le code CSS.

La modification du code css se base sur un fonctionnement classique de javascript qui permet d’effectuer toutes les modifications possibles et inimaginables d’une page choisie en modifiant le code. Pour revenir à la normale, il suffit simplement d’actualiser la page (F5 au clavier) pour provoquer un appel serveur/cache et ainsi effacer vos modifications.

La mesure du temps de chargement des éléments possible grâce à firebug

Vous allez pouvoir grâce à firebug, si vous naviguez dans les différentes options proposées de ce plugin firefox, mesurer le temps de chargement des éléments de chaque page internet.

Quand on sait l’importance que Google accorde dans le temps de chargement des pages internet dans le ranking des sites, alléger les pages internet des éléments non indispensables devient critique pour prétendre pouvoir accéder à la page 1 de Google.

Il vous suffit d’ouvrir l’onglet réseau, d’actualiser la page et de voir le temps que prennent les différents éléments à charger.

Vous allez ainsi pouvoir grâce à Firebug effectuer un tri dans vos plugins ou éliminer les éléments grourmands en terme de ressources.

Firebug permet d’éditer directement le code

Comme présenté précédemment, Firebug permet de modifier directement aussi bien le code html que le css. Pour éditer le mode html il suffit d’aller dans l’onglet HTML et de cliquer sur Edit une fois que vous aurez sélectionné la portion de code à modifier.

Vous allez pouvoir rentrer dans firebug le code html souhaité.

En ce qui concerne le css, vous pouvez aller dans le panneau de droite et taper le code dans firebug. L’avantage est que vous allez avoir grâce à firebug le numéro de la ligne à modifier dans le fichier source qui se trouve sur votre serveur: plus besoin d’aller chercher péniblement quelle est la bonne ligne à modifier.

Comprendre les trackers mis en place

en analysant certaines portions du code html, vous serez à même de comprendre quels sont les évenements au sens Google analytic qui ont été mis en place et donc potentiellement ce que chaque action déclanche en terme de log.

Firebug est donc un outil très simple et indispensable pour tout webmaster ou toute personne souhaitant travailler sur un site internet.

Le coin des achats professionnels