Informatique


Inspecter le fichier HTML dans Chrome

Aller à

L'inspecteur

Pour lancer l'inspecteur il suffit de faire clic droit et de choisir "Inspecter" dans le menu contextuel.
Sur Chrome le raccourci ctrl-Maj+j permet de lancer l'inspecteur de document.

Il permet de déterminer l'état de chaque balise et d'ainsi moieux comprendre les éventuelles défauts d'affichage.


Exemple

Soit le fichier de style mfs.css:

mfs.css
	header {
		color:white;
		background:red;	
	} 

Soit le fichier html suivant auquelle on lie la FS mfs.css:

Démo
<html>
	<head>
		<link rel=stylesheet href=mfs.css>
	</head>
<body>
<header>My website</header>
<nav>Home - Ma femme - Mon chien - Mes vacances</nav>
<section>
	<h1>Ma vie</h1>
		<p class=vie>Et va la vie...</p>
		<p class=vie>Et va le vent...</p>
	<h1>Mes passions</h1>
		<p class=passion>Elles sont passionnantes...</p>
		<p class=passion>Elles sont prenantes...</p>
</section>
<footer>©Moi</footer>
</body>
</html>

Elements Styles

L'onglet Styles permet d'inspecter tous les styles associés à la balise.

Après avoir ouvert l'inspecteur on clique sur l'onglet Elements afin de visualiser le code HTML.

A droite de la fenêtre, l'onglet Styles propose d'inspecter le style de la balise survolée dans la partie gauche.

Il y a cinq partie superposées, de haut en bas:

  1. element.style {} vous permet d'ajouter un style à la balise survolée
  2. il s'agit du style qu'on a décrit dans la FS, dans notre cas mfs.css (le 1 signifie ligne 1 de la FS)
  3. le premier user agent styleSheet est la partie CSS injectée par défaut par le navigateur.
    En effet, pour pouvoir afficher l'élément (balise et contenu), le navigateur doit utiliser des valeurs par défauts, elles sont précisée dans ce cadre.
  4. le deuxième user agent styleSheet décrit le style de la balise dont la balise survolée hérite.
  5. le dernier cadre décrit les dimensions de la balise survolées et de son environnement immédiat.
  6. le ==$0 correspond à l'élément sur lequel on a cliqué.
    Chrome réalise un querySelector() sur l'élément cliqué et l'affecte à la variable $0.
    Pour s'en convaincre on peut aller dans la console et taper $0, la console renvoie l'élément sur lequel on a cliqué.


Elements Computed

L'onglet Computed permet d'inspecter tous les styles associés à la balise.