Comment utiliser l’outil d’inspection des éléments dans Chrome

L’outil Inspecter les éléments de Google Chrome est une fonctionnalité puissante qui permet aux utilisateurs de visualiser et de modifier le code HTML, CSS et JavaScript d’un site web directement à partir du navigateur. Il est couramment utilisé par les développeurs et les concepteurs de sites web pour déboguer, modifier les styles, tester le code et même examiner de plus près la manière dont certains éléments du site web sont construits. Ce guide vous montrera comment accéder à l’outil Inspecter l’élément dans Chrome et l’utiliser efficacement.

Qu’est-ce que l’outil Inspecter l’élément ?

L’outil Inspecter l’élément fait partie de la suite d’outils de développement (DevTools) de Chrome. Il vous permet de :

D’inspecter et de modifier le code HTML et CSS en temps réel
Déboguer le code JavaScript.
Simuler différentes tailles d’écran pour tester le responsive design.
Inspecter les requêtes réseau et voir comment un site web charge les ressources.
Tester les modifications sans affecter le site en direct.

Comment ouvrir l’outil d’inspection des éléments dans Chrome ?

Il existe plusieurs façons d’accéder à l’outil Inspecter l’élément dans Chrome :

Méthode 1 : clic droit sur une page web

Accédez au site web que vous souhaitez inspecter.
Cliquez avec le bouton droit de la souris sur n’importe quel élément de la page (par exemple, une image, un texte ou un bouton).
Sélectionnez Inspecter dans le menu contextuel qui s’affiche.

L’onglet Éléments des DevTools s’ouvre alors, mettant en évidence le code HTML de l’élément sélectionné.

Méthode 2 : Utilisation de raccourcis clavier

Vous pouvez ouvrir rapidement l’outil Inspecter l’élément à l’aide de raccourcis clavier :

Windows/Linux : Ctrl Shift I
Mac : Commande Option I

Méthode 3 : Depuis le menu Chrome

Cliquez sur le menu à trois points (⋮) dans le coin supérieur droit de Chrome.
Allez dans Plus d’outils > Outils pour les développeurs.

Le panneau DevTools s’ouvre en bas ou sur le côté de la fenêtre du navigateur.

Aperçu de l’interface DevTools

Une fois l’outil Inspecter l’élément ouvert, plusieurs onglets s’affichent en haut du panneau DevTools :

Éléments : Affiche la structure HTML et les styles CSS de la page.
Console : Utile pour exécuter des commandes JavaScript et afficher les messages d’erreur.
Sources : Permet d’afficher et de déboguer les fichiers JavaScript.
Réseau : Affiche toutes les requêtes réseau, ce qui est utile pour analyser les temps de chargement des pages et les ressources.
Performance : Permet d’analyser les performances d’une page web.
Application : Affiche des détails tels que les cookies, le stockage local et le cache.
Lighthouse : Fournit des rapports d’audit et de performance du site web.

L’onglet le plus couramment utilisé : Éléments

L’onglet Éléments est au cœur de l’outil Inspecter les éléments, qui permet de visualiser et de modifier le code HTML et CSS d’une page web.

Comment utiliser l’outil d’inspection des éléments pour le HTML et le CSS

1. Inspection des éléments HTML

Ouvrez l’onglet Éléments (en cliquant avec le bouton droit de la souris et en sélectionnant Inspecter ou en utilisant les raccourcis clavier).
Survolez les différents éléments de l’arborescence HTML pour les voir en surbrillance sur la page web.
Cliquez sur n’importe quel élément HTML dans le panneau Éléments pour afficher les styles CSS correspondants dans le panneau Styles à droite.

2. Modifier le code HTML en temps réel

Double-cliquez sur une balise HTML, un attribut ou du texte dans l’onglet Éléments pour le modifier.
Appuyez sur Entrée pour appliquer les modifications.
Les modifications s’affichent immédiatement sur la page, mais elles sont temporaires et seront réinitialisées lorsque vous actualiserez la page.

Exemple : Changez le texte d’un titre de <h1>Welcome to My Site</h1> to <h1>Hello World!</h1> en double-cliquant sur le texte et en le modifiant.

3. Modifier les feuilles de style CSS en temps réel

Sélectionnez un élément à styliser dans l’onglet Éléments.
Dans le volet Styles situé à droite, vous pouvez modifier les propriétés CSS existantes ou en ajouter de nouvelles.
Pour ajouter un nouveau style, cliquez sur un espace vide dans le volet Styles et saisissez la propriété CSS et sa valeur.

Exemple : Modifier la couleur d’arrière-plan d’un élément :

couleur d’arrière-plan : #ff0000 ;

Les modifications s’appliquent immédiatement, mais elles ne sont pas enregistrées de manière permanente sur le site web.

4. Activation et désactivation des styles CSS

Chaque propriété CSS du volet Styles est accompagnée d’une case à cocher.
Décochez une propriété pour la désactiver temporairement, ou cochez-la à nouveau pour la réactiver.

Cette fonction est utile pour tester la manière dont les modifications apportées à la feuille de style CSS peuvent affecter la conception sans modifier le code de manière permanente.

5. Copier et modifier le code HTML

Cliquez avec le bouton droit de la souris sur un élément HTML dans l’onglet Éléments.
Choisissez Copier > Copier l’élément pour copier le code HTML sélectionné.
Vous pouvez ensuite le coller dans votre éditeur de texte ou l’utiliser pour le développement.

Utilisation de l’onglet Console

L’onglet Console est un autre outil puissant de DevTools, qui vous permet d’exécuter des commandes JavaScript directement sur la page :

Allez dans l’onglet Console.
Tapez des commandes ou des expressions JavaScript et appuyez sur Entrée pour les exécuter.

Exemple : Modifier la couleur d’arrière-plan de la page :

document.body.style.backgroundColor = ‘#00ff00’ ;

La couleur d’arrière-plan de la page devient verte.

Simulation d’appareils mobiles

L’outil Inspecter l’élément vous permet également de tester l’aspect d’un site web sur différentes tailles d’écran et différents appareils :

Cliquez sur l’icône de la barre d’outils “Toggle device” (une petite icône de téléphone et de tablette) dans le coin supérieur gauche du panneau DevTools.
Sélectionnez un appareil dans le menu déroulant (par exemple, iPhone, iPad, Galaxy).
Ajustez la résolution et l’orientation de l’écran pour voir comment le site web répond aux différentes tailles d’écran.

Cette fonction est extrêmement utile pour tester la conception réactive.

Débogage de JavaScript

L’onglet Sources est utilisé pour le débogage de JavaScript :

Ouvrez l’onglet Sources dans DevTools.
Vous pouvez définir des points d’arrêt en cliquant sur les numéros de ligne du code JavaScript.
Cela vous permet d’interrompre l’exécution du code et d’inspecter les variables, les fonctions et la pile d’appels.

Analyse du réseau avec l’onglet Réseau

L’onglet Réseau affiche toutes les requêtes réseau qui se produisent lors du chargement d’une page, y compris les images, les scripts et les feuilles de style :

Ouvrez l’onglet Réseau avant d’actualiser la page.
Actualisez la page pour afficher toutes les requêtes réseau.
Vous pouvez filtrer les requêtes par type (par exemple, XHR, JS, CSS) et voir le temps de chargement de chaque ressource.

Ceci est utile pour optimiser la vitesse de chargement des pages.

Résumé

L’outil Inspecter l’élément de Google Chrome est une fonctionnalité polyvalente et essentielle pour les développeurs web, les concepteurs et même les utilisateurs curieux qui souhaitent comprendre comment les sites web sont construits. En apprenant à inspecter et à modifier le HTML, le CSS et le JavaScript, vous pouvez déboguer les problèmes, tester de nouveaux styles et vous assurer que votre site Web est attrayant sur différents appareils. Grâce aux différents outils et onglets disponibles dans Chrome DevTools, vous pouvez mieux comprendre le fonctionnement des sites web et les optimiser pour obtenir de meilleures performances.