Comment inspecter les éléments Web avec votre navigateur

Les sites Web sont construits à partir de lignes de code, mais les résultats sont des pages avec 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 Inspecter or Inspecter l'élément. La façon dont vous accédez à cet outil varie cependant selon le navigateur.

Cet article utilise cliquez-droit sur pour faire référence à l'action du périphérique de la souris sur un PC Windows ainsi qu'à l'action Ctrl + clic sur un Mac.

Inspecter les éléments dans Google Chrome

Dans Google Chrome, il existe deux façons d'inspecter une page Web à l'aide des Chrome DevTools intégrés du navigateur:

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

Utilisez les outils de développement Chrome pour copier ou modifier le balisage HTML (Hypertext Markup Language) et pour masquer ou supprimer des éléments jusqu'à ce que la page se recharge.

Lorsque Chrome DevTools s'ouvre sur le côté de la page, changez sa position, faites-la sortir de la page, recherchez des fichiers de page, sélectionnez des éléments de la page pour un examen plus approfondi, copiez des fichiers et des URL et personnalisez les paramètres.

Inspecter les éléments dans Mozilla Firefox

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

• 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 > Web Developer > inspecteur.

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 trouver les contrôles pris en charge. Utilisez les contrôles pour modifier la page en tant que balisage HTML, copier ou coller le balisage HTML interne ou externe, afficher les propriétés du modèle d'objet de document (DOM), prendre une capture d'écran ou supprimer le nœud, appliquer de nouveaux attributs, voir les feuilles de style en cascade (CSS) , et plus.

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 un élément ou un espace d'une page Web, puis sélectionnez Inspecter l'élément.
• Allez à Développer des méthodes à hautes performances menu, puis sélectionnez Afficher l'inspecteur Web.

Si vous ne voyez pas le menu Développer, accédez au "safari". menu et sélectionnez "Préférences". D' Passerelle IIoT onglet, sélectionnez la 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 les éléments d'une page Web, cliquez avec le bouton droit sur la page, puis sélectionnez Inspecter l'élément. Dans l'outil de sélection d'élément d'Internet Explorer, sélectionnez n'importe quel élément de page pour voir 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.

Comme les autres outils d'inspecteur d'éléments, utilisez Internet Explorer pour couper, copier et coller des éléments, ainsi que pour 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 façons d'activer l'inspection:

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

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