Comment inspecter des éléments Web avec votre navigateur

click fraud protection

Ce qu'il faut savoir

  • Dans Chrome, Firefox ou Safari: faites un clic droit sur un élément et sélectionnez Inspecter.
  • Dans Internet Explorer ou Edge, activez les inspections, cliquez avec le bouton droit sur un élément et sélectionnez Inspecter l'élément.

Cet article explique comment inspecter des éléments dans Chrome, Firefox, Safari, Internet Explorer et Microsoft Edge, y compris comment activer les inspections dans IE et Edge.

Comment inspecter des éléments Web avec votre navigateur

Les sites Web sont construits à partir de lignes de code, mais les résultats sont des pages contenant des images, des vidéos, des polices et d'autres fonctionnalités. Pour modifier l'un de ces éléments ou voir en quoi il consiste, recherchez la ligne de code qui le contrôle. Pour ce faire, utilisez un outil d'inspection d'élément. Vous n'avez pas besoin de télécharger un outil d'inspection ou d'installer un module complémentaire pour votre navigateur Web préféré. Au lieu de cela, cliquez avec le bouton droit sur l'élément de page, puis sélectionnez

instagram viewer
Inspecter ou alors Inspecter l'élément. Cependant, la façon dont vous accédez à cet outil varie selon le navigateur.

Cet article utilise droite-Cliquez sur pour faire référence à l'action de la souris sur un PC Windows et au Contrôler+Cliquez sur action sur un Mac.

Inspecter les éléments dans Google Chrome

Dans Google Chrome, il existe deux manières d'inspecter une page Web à l'aide de la fonction intégrée du navigateur Outils de développement Chrome:

  • Cliquez avec le bouton droit sur un élément de la page ou dans une zone vide, puis sélectionnez Inspecter.
  • Allez au Chrome menu, puis sélectionnez Plus d'outils > Outils de développement.
Inspection des éléments Web dans Chrome

Utilisez Chrome DevTools pour copier ou modifier le Langage Signalétique Hyper Text (HTML) et masquer ou supprimer des éléments jusqu'au rechargement de la page.

Lorsque Chrome DevTools s'ouvre sur le côté de la page, modifiez sa position, sortez-le de la page, recherchez fichiers de page, sélectionnez des éléments de la page pour les examiner de plus près, copiez les fichiers et les URL et personnalisez le Les paramètres.

Inspecter les éléments dans Mozilla Firefox

Mozilla Firefox a deux façons d'ouvrir son outil d'inspection, appelé Inspector:

  • Cliquez avec le bouton droit sur un élément de la page Web, puis sélectionnez Inspecter l'élément.
  • Dans la barre de menus de Firefox, sélectionnez Outils > Développeur web > Inspecteur​.
Inspecter les éléments Web dans Firefox

Lorsque vous déplacez le pointeur sur des éléments dans Firefox, Inspector trouve automatiquement les informations de code source de l'élément. Lorsque vous sélectionnez un élément, la recherche à la volée s'arrête et vous pouvez examiner l'élément à partir de la fenêtre Inspecteur.

Cliquez avec le bouton droit sur un élément pour rechercher les contrôles pris en charge. Utilisez les commandes pour modifier la page en tant que balisage HTML, copiez ou collez le balisage HTML interne ou externe, affichez Documentez les propriétés du modèle objet (DOM), prenez une capture d'écran ou supprimez le nœud, appliquez de nouveaux attributs, voir le Feuilles de style en cascade (CSS), et plus encore.

Inspecter les éléments dans Safari

Il existe plusieurs façons d'examiner les éléments Web dans Safari:

  • Cliquez avec le bouton droit sur n'importe quel élément ou espace d'une page Web, puis sélectionnez Inspecter l'élément.
  • Allez au Développer menu, puis sélectionnez Afficher l'inspecteur Web.
Inspecter les éléments Web dans Safari

Si vous ne voyez pas le menu Développer, accédez à la Safari menu et sélectionnez Préférences. Sur le Avancée onglet, sélectionnez le Afficher le menu Développer dans la barre de menus case à cocher.

Sélectionnez des éléments individuels sur la page Web pour voir le balisage consacré à cette section.

Inspecter les éléments dans Internet Explorer

Un outil d'inspection d'élément similaire, accessible en activant les outils de développement, est disponible dans Internet Explorer. Pour activer les outils de développement, appuyez sur F12. Ou, allez au Outils menu et sélectionnez Outils de développement.

Pour afficher le menu Outils, appuyez sur Alt+X.

Pour inspecter des éléments sur une page Web, cliquez avec le bouton droit sur la page, puis sélectionnez Inspecter l'élément. À partir de l'outil de sélection d'élément d'Internet Explorer, sélectionnez n'importe quel élément de page pour afficher le balisage HTML ou CSS. Vous pouvez également désactiver ou activer la mise en évidence des éléments lors de la navigation dans l'explorateur DOM.

Inspecter les éléments Web dans Internet Explorer

Comme les autres outils d'inspection d'éléments, utilisez Internet Explorer pour couper, copier et coller des éléments et modifier le balisage HTML, ajouter des attributs, copier des éléments avec des styles attachés, etc.

Inspecter les éléments dans Microsoft Edge

Avant de pouvoir inspecter des éléments dans Microsoft Edge, vous devez activer l'inspection. Il existe deux manières d'activer l'inspection:

  • Allez dans la barre d'adresse et entrez à propos de: drapeaux. Dans la boîte de dialogue, sélectionnez le Afficher la source et inspecter l'élément dans le menu contextuel case à cocher.
  • presse F12, puis sélectionnez Explorateur DOM.

Pour inspecter un élément, cliquez avec le bouton droit sur un élément sur une page Web, puis sélectionnez Inspecter l'élément.

Inspecter les éléments Web dans Microsoft Edge
instagram story viewer