Firebug

Voir au format PDF

Vous êtes ici : >> HTML-CSS / Firebug

Temps d'étude : 30 min.

Niveau : Facile.

Tags : Firebug

Ressource(s) utile(s) pour ce cours : FireBug

Comment télécharger FireBug ?

FireBug est indispensable pour tout Intégrateur / Développeur Front !

Pour télécharger FireBug, vous devez vous munir du navigateur firefox et télécharger l'extension firebug en cliquant sur le bouton vert "Ajouter à Firefox".

Firebug est à l'origine une extension pour Firefox afin d'aider à la création de page web.
Vous pourrez trouver son équivalence sur Google Chrome.
Les autres navigateurs possèdent généralement leur propre extension.

Comment utiliser FireBug ?

Pour ouvrir FireBug, il faut d'abord vous rendre dans votre navigateur FireFox et appuyer sur la touche F12 de votre clavier. Cela devrait ouvrir un paneau (en bas de page) comme ceci :

explications Html / Css

Si ce n'est pas le cas, vous pouvez effectuer un clic droit dans la zone du haut de firefox pour faire apparaitre la barre de menu, comme ceci :

Et ensuite vous rendre dans la partie Outils > Développement Web > Firebug > Ouvrir Firebug :

Exemple avec le logo de Google

Lorsque votre panneau apparait, nous allons cliquer sur le selecteur en bas à gauche :

explications Html / Css

Et nous allons cliquer une fois sur le logo Google pour se positionner dessus (sans recharger la page).

Ensuite, nous allons effectuer un clic droit dans la partie CSS :

explications Html / Css

Nous allons choisir "Nouvelle Propriété" et écrire :

		display: none;

Et voilà le travail, avec la propriété display: none; qui permet de masquer une partie de l'affichage, nous avons réussi à retirer le logo de Google !

Bien entendu, cela sera rétabli dès que l'on rechargera la page ! Les modifications ne sont pas enregistrées par FireBug (cela permet seulement d'avoir un aperçu des modifications que nous pouvons apporter).

De plus, ce n'est pas notre site web et Google ne serait pas très content si la modification était réellement effective :p !

explications Html / Css

Exemple avec la couleur des liens de Google

Nous allons effectuer une recherche sur Google et selectionner en cliquant l'un des liens qui apparait en bleu.

explications Html / Css

Ensuite, nous allons ajouter une nouvelle propriété :

explications Html / Css

Selectionner la partie <a> dans la partie Html et saisir dans la partie CSS color : red ;

explications Html / Css

Les liens apparaissent en rouge !

Exemple avec la taille d'une zone

Ecrivons ce code dans un fichier HTML nommé firebug.html :

firebug.html

		<!Doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>Entrainement sur l'utilisation de Firebug</title>
				<link rel="stylesheet" href="firebug.css">
			<head>
			<body>
				<div>Ma zone</div>
			</body>
		</html>

Ecrivons ce code dans un fichier CSS nommé firebug.css :

firebug.css

		div{ 
			background: orange;
			width: 500px;
			height: 500px;
		}

Suivez ces étapes :

Afficher votre page web dans le navigateur
Attraper votre zone orange à l'aide de firebug
Dans la partie de droite cliquer sur "500px"
Augmenter la taille ou réduire la taille en pixels et voir le changement en direct à l'écran

Avec ces différents exemples nous savons que Firebug est un outil indispensable pouvant nous aider dans la création d'un site web notamment pour ajuster les proportions, positionner et tailler les différentes zones.

Les modifications apportées par firebug ne sont pas enregistrées. Cela nous permet d'avoir un aperçu précis en direct.

Si l'aperçu vous convient, vous devrez copier/coller les lignes de code de firebug dans la feuille de style css.

Allez au chapitre suivant : 7. Styles Css