Logo FireBugSi vous êtes webmaster, vous connaissez sans aucun doute cette formidable extension pour Mozilla Firefox mais aussi Google Chrome : FireBug. Même, si vous débutez dans la création de site web, il vous faut cette extension car elle va grandement vous faciliter la vie.

 

Icone FireBug Inspecter le code du site sans être webmaster

Lorsque Firebug est installé, faites un clic droit sur la partie du site que vous souhaitez inspecter (ou n'importe où si votre objectif ne concerne pas une zone précise). Puis cliquez sur "Examiner l'élément" pour afficher l'onglet "Inspecteur" de Firebug (cf images ci-après).

firebug examiner element site

Grâce à FireBug, vous allez pouvoir analyser et scruter la moindre parcelle de code d'une page web. Ainsi, vous pourrez détecter le moindre problème de codage que se soit de l'HTML, du PHP ou encore du CSS. Ainsi, par exemple, si l'aspect graphique de l'un de vos modules Joomla ne vous plaît pas, vous pouvez inspecter le CSS de ce dernier, le modifier. en local sous Firebug, puis lorsque vous avez définitivement déterminé le css, insérer ce dernier dans votre fichier custom.css (ou custom.scss).

Cet outil vous permet de parcourir le HTML de façon structurée et de déterminer par exemple dans quelle section (ou position) se trouve un module. En survolant chaque élément du HTML sous Firebug, la zone en front-end sur votre site est colorée en bleu (cf. image ci-dessous où l'on constate que le module "appenez les rouages d'un marketing digital efficace" est en position "showcase").

firebug position module

Icone FireBug Analyser le css

La partie droite de l'onglet "Inspecteur" de Firebug vous permet de visualiser le css se rapportant à la zone HTML que vous avez sélectionné (ou survolé).
Dans l'image ci-dessous :

1= sélection ou survol de l'élément HTML
2= nom de l'élément HTML (utile pour lui affecter des propriétés css s'il n'en existe pas), les dimensions de l'élément sont également affichées
3= marges en jaune
4= css de l'élément sur la partie droite (grossi sur l'image)

firebug visualisation css

Icone FireBug Contrôler vos images

On ne le dira jamais assez, les images constituent une ressource dont il faut maitriser au maximum le poids afin de ne pas nuire aux performances du site. Là aussi Firebug peut vous aider en vous permettant de visualiser si chaque image est bien dimensionnée par rapport à son conteneur. Il s'agit de ne pas afficher d'image plus grande que son conteneur, sauf contrainte responsive.

Dans l'exemple ci-dessous, une image est surlignée, elle est physiquement de taille 640x426 alors qu'elle ne peut occuper que 349x232. Pour gagner en performance il faudra donc modifier les dimensions de cette image pour l'adapter à ses dimensions effectives sur la page, à savoir 349x232 pixels.

firebug controle dimensions images

Icone FireBug Un excellent tutoriel en françaisFireBug

FireBug n'étant pas d'origine française, il est parfois difficile de trouver de l'aide en cas de problème. Je vous ai donc dénicher un tutoriel très complet et entièrement en français pour vous apprendre à maîtriser FireBug. Ce dernier a été réalisé par le site http://www.developpez.com et publié dans l'un de leur magazine mensuel.

 

Vous pouvez consulter ce tutoriel au format PDF en cliquant ICI (page 8 à 13) ou le télécharger directement ICI également au format PDF.
 
L'auteur : un expert à votre service
Geoffrey LEOST
Nom : Geoffrey LEOST

Articles qui devraient vous intéresser

Arrondir les bords d'une image avec Photoshop CS4 Arrondir les bords d'une image avec Photoshop CS4
Le principe est d'arrondir les bords d'une image qui à l'origine se présente donc sous la forme d'un rectangle....
L'outil 3D de Photoshop CS4 L'outil 3D de Photoshop CS4
Pour ce troisième tutoriel, j'ai décidé de vous parler d'une des nouveautés de la version CS4 de Photoshop : L'...

Commentaires (1)

This comment was minimized by the moderator on the site

... ... ou sinon chez Grafikart c'est encore mieux ;o) http://www.grafikart.fr/tutoriels/html-css/firebug-extension-firefox-76

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

Dernier article sur la même thématique
Gérer et compresser les fichiers PDF sur son site internetGérer et compresser les fichiers PDF sur son site internet
Nos conseils pour apprendre à gérer vos fichiers PDF sur votre site internet Les fichiers PDF doivent être chargés sur votre serveur de façon structurée dans un dossier "PDF" avec éventuellement...