Modifiez l'apparence de votre site internet

Publié le

L’inspecteur d’élément de Google Chrome, ou Chrome DevTools, est un outil puissant qui permet aux développeurs et aux concepteurs web de déboguer, tester et optimiser leurs sites web. Il vous permet de visualiser et de modifier le code HTML et CSS directement dans le navigateur. Vous pouvez également visualiser la structure du DOM, effectuer des tests d’intégrité et d’accessibilité, et bien plus encore.

inspecteur-element-chrome

Comment modifier du CSS avec l'inspecteur d'élément ?

Modifiez votre CSS facilement avec l'inspecteur d'élément de Google Chrome en suivant ces étapes :

  1. Ouvrez l'inspecteur d'élément
  2. Localisez la balise HTML à modifier
  3. Apportez vos modifications en CSS
  4. Testez vos modifications en direct
  5. Copiez vos codes et coller-les dans votre fichier CSS
Google chrome

Ouvrir et activer l'inspecteur d'élément

Pour ouvrir l'inspecteur d'élément de Chrome, appuyez sur les touches Commande + Option + i (Mac) ou Ctrl + Shift + i (Windows). Une fenêtre contextuelle apparaîtra alors sur le côté droit de votre navigateur.

Si vous ne voyez pas cette fenêtre, vous pouvez également ouvrir l'inspecteur d'élément en cliquant sur l'icône « Plus » dans le coin supérieur droit de votre navigateur, puis en sélectionnant « Outils de développement ».

Localiser l'élément à modifier

Lorsque l'inspecteur d'élément est ouvert, vous pouvez cliquer sur n'importe quel élément sur votre page web pour afficher le code source qui le compose. Vous pouvez également afficher la structure DOM en cliquant sur l'onglet « Éléments ».

Apporter les modifications de style

Une fois que vous avez localisé l'élément que vous souhaitez modifier, vous pouvez modifier directement le code HTML et CSS en utilisant l'outil « Modifier l'élément » de l'inspecteur d'élément. Vous pouvez également ajouter des règles CSS personnalisées dans l'onglet « Feuille de style ».

Tester les modifications

Une fois que vous avez apporté des modifications à votre code HTML et CSS, vous pouvez cliquer sur le bouton « Actualiser » dans l'outil « Modifier l'élément » pour afficher les modifications apportées à votre page. Vous pouvez également utiliser l'outil « Aperçu » pour afficher un aperçu de votre page Web avec les modifications apportées.

Bonus : Testez l'accessibilité avec LightHouse

Voir optimisation chrome lighthouse

LightHouse est un outil intégré dans Chrome DevTools qui permet aux développeurs et aux concepteurs web de tester l'accessibilité de leur site web. Il analyse le code HTML et les règles CSS et fournit des informations détaillées sur l'accessibilité et la qualité du code, ainsi que des conseils pour améliorer le site web.

Comment tester l'accessibilité avec LightHouse ?

Pour tester l'accessibilité de votre site web avec LightHouse, ouvrez l'inspecteur d'élément et cliquez sur l'onglet « Audits ». Sélectionnez ensuite « Accessibilité » et cliquez sur le bouton « Exécuter l'audit ». LightHouse analysera alors votre page et fournira un rapport détaillé avec des informations sur l'accessibilité et des conseils pour améliorer votre site.