Utiliser les options d'inspections d’éléments

Google Chrome + Firefox: Inspections d’éléments HTML et CSS. 1


Comment corriger son code grâce à l’inspection d’élément?

Corriger son code source avec "Inspecter l'élément"

Inspecter le HTML et CSS et corriger son code source avec « Inspecter l’élément » – explication sur les différents navigateurs: Chrome et Firefox

Lorsque l’on réalise un site Internet, il est tout simplement impossible d’avoir le résultat voulu du premier coup. Et c’est ainsi que commence une série plus ou moins longue d’édition, de correction et de test. Mais c’est souvent assez laborieux de faire des allers – retours entre votre fichier source et votre logiciel de FTP (type Filezilla).

 

Heureusement, les navigateurs nous facilitent le travail grâce à leur fameux « inspecteur d’élément« . Cette fonction, présente sur les principaux navigateurs permet de pouvoir voir et éditer du code directement depuis la page ! Pratique non ? Le contenu dynamique ne peut pas être modifié (comme les fonctions PHP). Mais pour le HTMl et surtout le CSS, cette fonctionnalité est un gain de temps très appréciable !

Comment ça marche ?

1. Lorsque vous êtes sur la page sur laquelle vous souhaitez effectuer des modifications, faites un clic droit là ou il est nécessaire d’intervenir.

2. Cliquez ensuite sur « Inspecter l’élément » (pour ceux qui sont sur Google Chrome) ou sur « Examiner l’élément » (pour ceux qui sont sur Firefox). Pour les autres navigateurs, l’option est quasiment similaire.

3. Vous verrez alors apparaître le code source de la page, et il sera affiché pour vous montrez le code correspondant à l’endroit ou vous avez effectué le clic droit.

En général, on retrouve le HTML d’un côté et le CSS de l’autre. Vous pouvez alors éditer votre code source et les modifications apparaîtront instantanément sur la page. A noter que lorsque vous sélectionnez une ligne dans le code source, la zone concernée est mise en évidence dans la page. Visuellement, c’est plus simple de se repérer.

Une fois les modifications effectuées, il suffit simplement de reportée la modification sur le fichier source réel (HTML, CSS ou JS) afin de les valider.

Au final, vous inspectez un élément, vous faites autant de modifications que vous voulez et vous les valider dans le fichier réel à l’aide votre logiciel de FTP. Simple, rapide, efficace.

Tags : Création de sites internet. Corriger son code HTML ou CSS. FIREFOX. Inspecter son code sur son navigateur. Google Chrome. Modifier facilement son code source. 


Laissez un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Commentaire sur “Google Chrome + Firefox: Inspections d’éléments HTML et CSS.