Comment utiliser Google Chrome pour déboguer CSS

L'outil Inspect Element est idéal pour déboguer vos pages Web en temps réel. Vous pouvez utiliser cet outil pour prévisualiser et modifier la conception d'un site Web. Cela vous permet également de le faire sans avoir à recharger la page, en affichant immédiatement vos modifications CSS.

Cet article explique comment afficher les classes CSS et leurs styles appliqués dans la fenêtre Inspecter l'élément. Il expliquera également comment vous pouvez l'utiliser pour prévisualiser les modifications que vous apportez à votre CSS en temps réel.

Ouverture de l'élément d'inspection dans Google Chrome

Vous pouvez visiter n'importe quel site Web et ouvrir la fenêtre Inspecter l'élément pour voir à quoi ressemble son code HTML ou CSS. Ce tutoriel utilisera un exemple de site Web démontrer.

Vous pouvez ouvrir la fenêtre Inspecter l'élément dans Google Chrome en appuyant sur le F12 clé. Vous pouvez également faire un clic droit n'importe où sur la page et cliquer sur Inspecter.

La fenêtre Inspecter l'élément s'ouvrira sur le code HTML de la partie du site Web sur laquelle vous avez cliqué avec le bouton droit de la souris. C'est ici que vous pouvez également

modifier le texte du site Web à l'aide de Google Chrome.

L'onglet Styles dans la fenêtre Inspecter l'élément

Dans la fenêtre Inspecter l'élément elle-même, sous le Éléments onglet, il y a un endroit pour afficher à la fois le code HTML et CSS. Vous pouvez voir le code HTML à gauche de la fenêtre Inspecter l'élément. Vous pouvez trouver le code CSS à droite, sous le modes languette.

Supposons que vous ayez un élément HTML avec une classe appelée "card-padding", avec un rembourrage droit et gauche appliqué :

.card-rembourrage {
 rembourrage à droite: 0vh ;
 padding-gauche: 0vh ;
}

Si vous avez prévisualisé ce site Web dans le navigateur, vous pourrez sélectionner le div élément avec la classe "card-padding". Tout style appliqué à la classe "card-padding" s'afficherait à droite, sous le modes languette.

Lorsque vous survolez un élément dans la vue du code HTML, cette partie de la page Web est mise en surbrillance dans le navigateur Web. Le type d'élément HTML, ainsi que tous les noms de classe, s'afficheront également dans une boîte de dialogue à côté de l'élément.

Dans ce cas, vous verrez le conteneur div avec les noms de classe "row", "card-padding" et "pb-5" mis en surbrillance sur la page.

Comment apporter des modifications au CSS en temps réel

Vous pouvez modifier le CSS directement depuis l'onglet Styles :

1. En utilisant ce site, faites un clic droit sur le premier titre.
2. Sur cet en-tête h4 particulier, vous verrez une classe qui lui est appliquée appelée "text-grey" avec une couleur de #8a8a8a.
3. Changez la couleur en quelque chose d'autre à la place, comme l'orange. Vous ne voulez changer que la valeur elle-même, et non le nom de la propriété, "color".
4. Vous verrez le cap passer du gris foncé à l'orange.
5. Si vous souhaitez désactiver un style CSS particulier, décochez la case à gauche du style.
6. Vous pouvez également ajouter d'autres styles à l'ensemble d'origine. Cliquez juste en dessous ou à droite d'une propriété pour commencer à en ajouter une nouvelle. Vous devez utiliser la même syntaxe que dans un fichier CSS normal lors de l'ajout de nouveaux styles.
7. Si vous prévisualisez un site Web local, vous pouvez continuer à apporter des modifications CSS jusqu'à ce que vous vous rapprochiez de l'apparence requise pour votre interface utilisateur. Après cela, vous pouvez copier les modifications CSS que vous avez apportées dans votre code local.

Comment modifier CSS à partir de bibliothèques ou de frameworks tiers

Vous pouvez également apporter des modifications aux éléments HTML si vous utilisez des bibliothèques ou des frameworks tiers tels que Bootstrap.

1. En utilisant ce site, faites un clic droit sur l'un des boutons Bootstrap de la page.
2. Vous verrez deux classes appliquées au bouton, "btn" et "btn-primary". Bootstrap a déjà son propre style appliqué à ces deux classes. Les couleurs utilisées comme couleurs d'arrière-plan et de bordure sont #007bff. Changez ceci en quelque chose d'autre, comme Violet.
3. Si vous prévisualisez un site Web local, vous pouvez ensuite ajouter vos nouvelles modifications dans votre code local. Selon l'ordre de votre CSS, vous devrez peut-être utiliser un sélecteur CSS plus spécifique. Par exemple, préfixez le sélecteur avec ".btn". Cela remplacera le style Bootstrap d'origine.

   .btn.btn-primaire {
    couleur de fond: violet ;
    bordure-couleur: violet ;
   }

Que signifie element.style dans l'onglet Styles ?

Chaque élément HTML que vous mettez en surbrillance dans la fenêtre Inspecter l'élément possède un bloc element.styles. Cela équivaut à ajouter un style en ligne à l'élément HTML, au lieu de le cibler à l'aide d'un sélecteur.

1. Faites un clic droit sur un élément HTML. Ajoutez n'importe quel style à la section element.style, tel que :

   couleur: blanc fumé ;

2. Vous verrez que le code de l'élément HTML a également changé. Le code dans l'élément HTML a maintenant la nouvelle ligne :

   style="couleur: blanc fumé ;"

Comment les éléments HTML enfants héritent du style

Si vous avez deux valeurs de style différentes appliquées à un élément parent et à un élément enfant, la valeur de l'élément enfant prévaudra.

1. En utilisant ce site, faites un clic droit n'importe où sur les bords extérieurs du site Web.
2. Dans la section HTML de la fenêtre Inspecter l'élément, concentrez-vous sur deux éléments HTML particuliers. Il y a un élément div parent avec une classe "content" qui lui est appliquée. Cet élément HTML a un élément enfant h4, auquel est appliquée une classe "text-grey".
3. Sélectionnez l'élément HTML h4 enfant et désactivez le style de couleur dans la classe "text-grey".
4. Sélectionnez l'élément HTML parent avec la classe "content". Ajoutez le style CSS suivant à la classe :

   La couleur rouge;

   Tout le texte dans la div parent deviendra rouge. Ce changement se répercutera également sur les éléments enfants, ce qui signifie que le h4 aura également une couleur rouge.
5. Sélectionnez l'élément HTML enfant h4 et ajoutez un nouveau style à la classe "text-grey":

   la couleur verte;

   Cela remplacera le style de toutes les classes parentes. L'élément HTML h4 passera du rouge au vert.
6. Vous verrez également un barré si vous affichez le style de la classe "contenu". Cela confirme que l'élément enfant h4 remplace la couleur du parent.

Les avantages du débogage de votre CSS dans le navigateur

Le débogage du CSS dans votre navigateur peut vous faire gagner beaucoup de temps et accélérer votre flux de travail de codage. Cela est particulièrement vrai si vous avez besoin de voir comment vos nouvelles modifications CSS affectent l'interface utilisateur de votre site Web en temps réel.

Vous pouvez utiliser cette technique au lieu de modifier votre code local et de recharger votre application. Cela vous évitera de deviner quelles valeurs CSS fonctionneraient, car vous pouvez désormais voir vos modifications d'interface utilisateur au fur et à mesure que vous les apportez.

Vous pouvez apporter des modifications à la fenêtre Inspecter l'élément jusqu'à ce que vous vous rapprochiez de la conception souhaitée. Une fois que vous l'avez fait, vous pouvez ensuite copier le code de la fenêtre Inspecter l'élément dans votre code local. Vous pouvez toujours réexécuter votre application pour tester que vos nouvelles modifications CSS fonctionnent toujours.

Ce didacticiel a couvert les bases du débogage du CSS d'un site Web à l'aide de la fenêtre Inspecter l'élément, y compris où trouver le CSS dans l'onglet Styles.

Il a également expliqué comment apporter des modifications au CSS et afficher les modifications visuelles de l'interface utilisateur en temps réel. J'espère que vous comprenez également comment apporter des modifications lorsque le CSS utilise une bibliothèque tierce et comment fonctionne l'héritage de style.

Il y a beaucoup d'autres choses intéressantes que vous pouvez faire avec la fenêtre Inspect Element.

7 choses ludiques que vous pouvez faire avec Inspect Element

Lire la suite

A propos de l'auteur