Comment inspecter des éléments dans Safari, Chrome et Firefox sur Mac

Inspecter des éléments est une compétence essentielle qui permet à quiconque de comprendre comment un site Web est construit et d’apporter les ajustements nécessaires. Vous n’avez pas besoin d’être un développeur Web pour bénéficier de l’inspection des éléments sur un Mac avec n’importe quel navigateur moderne en quelques clics simples. Heureusement, l’inspection des éléments est un outil intégré dans tous les navigateurs modernes, et vous n’avez besoin d’aucun logiciel spécial pour le faire. Ce tutoriel fournit des instructions étape par étape sur la façon d’inspecter des éléments dans Safari, Chrome et Firefox sur Mac.

Astuce : vous cherchez à passer de Chrome à Firefox comme navigateur par défaut ? Nous vous fournissons tout ce dont vous avez besoin pour garantir une transition en douceur.

Table des matières

• Qu’est-ce que l’inspection des éléments ?
• Comment inspecter des éléments dans Google Chrome sur Mac
• Comment inspecter des éléments dans Safari sur Mac
• Comment inspecter des éléments dans Firefox sur Mac
• Questions fréquentes

Qu’est-ce que l’inspection des éléments ?

L’inspection des éléments est une fonctionnalité puissante disponible sur tous les navigateurs Web modernes qui vous permet d’en apprendre davantage sur une page Web, comme sa structure, sa mise en page et son style. Les développeurs et les concepteurs de contenu en ligne utilisent souvent ces outils pour déboguer, expérimenter et résoudre des problèmes d’un projet Web. Vous pouvez facilement sélectionner un élément d’un site Web, et l’outil d’inspection vous donnera toutes les informations sous un élément particulier, comme la couleur, la police, la taille et d’autres éléments.

L’outil d’inspection vous permet également de modifier temporairement le code et de voir les changements appliqués à la page Web en temps réel. Cependant, les changements ne seront visibles que pour vous. C’est un outil puissant pour vous, que vous soyez un développeur expérimenté ou simplement curieux d’apprendre comment un site Web particulier est construit.

Avez-vous rencontré le pop-up Firefox Relay ? Nous vous montrons comment supprimer le menu déroulant Firefox Relay des champs de courriel.

Comment inspecter des éléments dans Google Chrome sur Mac

Commençons par la façon d’inspecter des éléments dans Chrome, car c’est le navigateur le plus populaire. Les étapes sont assez simples, vous permettant de commencer en un rien de temps.

Comment ouvrir le panneau d’inspection dans Google Chrome

1. Ouvrez le navigateur Chrome et visitez n’importe quel site Web que vous souhaitez inspecter.

1. Cliquez avec le bouton droit sur un espace vide et sélectionnez “Inspecter”.

1. Vous verrez le panneau d’inspection sur votre écran.

Bon à savoir : vous n’utilisez pas Chrome pour Mac ? Découvrez comment utiliser l’outil “Inspecter” de Google Chrome pour le diagnostic de site Web sur un PC Windows.

Comment inspecter un élément particulier d’une page Web dans Google Chrome

Maintenant que vous avez ouvert avec succès le panneau d’inspection, apprenons à interagir avec un élément.

1. Dans le coin gauche du panneau d’inspection, cliquez sur “Sélectionner un élément à inspecter”.

1. Sélectionnez n’importe quel élément. Pour cet exemple, nous inspectons une image sur la page Web. Vous pouvez faire cela avec n’importe quel élément que vous souhaitez. Vous verrez une boîte blanche avec quelques informations de base, comme le type d’élément, le nom du fichier, etc. Sur le côté droit, vous verrez le code associé à l’élément particulier.

Comment voir la version mobile d’un site Web dans Google Chrome

1. Dans le coin gauche du panneau d’inspection, cliquez sur l’option “Basculer la barre d’outils des appareils”.

1. Vous verrez le site Web réagir sur un appareil mobile. Vous pouvez toujours effectuer votre inspection en cliquant sur l’élément, et les informations seront basées sur les smartphones.

1. Si vous cliquez sur le menu déroulant “Responsive” au-dessus, vous pouvez sélectionner un appareil de votre choix dans la liste. Lorsque vous le faites, vous verrez comment la page Web réagit à un modèle de smartphone particulier.

Comment changer l’emplacement du panneau d’inspection dans Google Chrome

1. Cliquez sur les trois points verticaux dans le coin droit du panneau d’inspection.

1. Sélectionnez l’emplacement pour le dock d’inspection : à gauche, en bas ou dans une fenêtre contextuelle.

Comment inspecter des éléments dans Safari sur Mac

La fonctionnalité d’inspection des éléments est désactivée par défaut sur Safari, car elle fait partie des options de développement. Nous devons donc d’abord activer le “Menu Développement”.

Astuce : vous passez de Chrome à Safari comme navigateur par défaut sur votre Mac ? Nous avons toutes les étapes pour vous aider à passer sans perdre vos favoris, extensions, et plus encore.

Comment ouvrir le panneau d’inspection dans Safari

1. Une fois que vous ouvrez Safari et que vous êtes déjà sur le site Web que vous souhaitez inspecter, cliquez sur l’icône “Safari” dans la barre de menu en haut et sélectionnez “Réglages”.

1. Cela vous amènera à l’onglet “Général”. Sélectionnez l’onglet “Avancé” tout à droite.

1. Cliquez sur la case à cocher à côté de “Afficher le menu Développement dans la barre de menu” pour avoir accès à toutes les fonctionnalités avancées de Safari.

1. Cliquez avec le bouton droit n’importe où sur le site Web et sélectionnez “Inspecter l’élément”. Cela ouvrira le panneau d’inspection des éléments dans Safari.

1. Pour plus d’options avancées, cliquez sur l’onglet “Développement” dans la barre de menu.

Comment inspecter un élément particulier d’une page Web dans Safari

1. Cliquez sur l’icône “inspecter” qui ressemble à une cible dans le coin gauche du panneau d’inspection.

1. Utilisez votre curseur et sélectionnez l’élément que vous souhaitez inspecter. Nous inspectons la balise de titre pour cet exemple, mais vous pouvez inspecter n’importe quel élément que vous souhaitez.

Comment voir la version mobile d’un site Web dans Safari

1. Dans la barre de menu en haut, cliquez sur l’option “Développement” et sélectionnez “Entrer en mode design réactif”.

1. Sélectionnez n’importe quel modèle d’appareil que vous souhaitez utiliser pour inspecter la page Web.

Comment changer l’emplacement du panneau d’inspection dans Safari

Depuis le côté gauche du panneau d’inspection, sélectionnez l’emplacement que vous souhaitez, et le panneau d’inspection sera déplacé en conséquence.

Comment inspecter des éléments dans Firefox sur Mac

Firefox est un choix populaire parmi les développeurs et les concepteurs expérimentés lorsqu’ils travaillent sur des projets Web. Voyons comment nous pouvons inspecter des éléments dans Firefox sur Mac.

Comment ouvrir le panneau d’inspection dans Firefox

1. Une fois que vous êtes sur la page Web que vous souhaitez inspecter dans le navigateur Firefox, cliquez avec le bouton droit et sélectionnez “Inspecter”.

1. Cela ouvrira le panneau d’inspection dans le navigateur Firefox.

Comment inspecter un élément particulier d’une page Web dans Firefox

1. Cliquez sur l’icône “curseur” que vous voyez dans le coin gauche du panneau d’inspection.

1. Déplacez votre curseur vers l’élément que vous souhaitez inspecter. Pour cet exemple, nous inspectons une balise d’en-tête, mais vous pouvez faire cela avec n’importe quel élément que vous souhaitez.

Comment voir la version mobile d’un site Web dans Firefox

1. Dans le coin droit du panneau d’inspection, cliquez sur l’icône de smartphone.

1. Cela convertira et chargera le site Web dans un visualiseur en forme de smartphone. Vous pouvez cliquer sur le bouton “Responsive” pour sélectionner un appareil mobile de votre choix.

Comment changer l’emplacement du panneau d’inspection dans Firefox

1. Cliquez sur les trois points horizontaux dans le coin droit du dock d’inspection.

1. Sélectionnez l’emplacement que vous souhaitez activer, et le panneau d’inspection sera déplacé en conséquence.

Questions fréquentes

En quoi l’inspection des éléments diffère-t-elle de la visualisation du code source de la page ?

L’inspection des éléments est un outil de développement intégré dans les navigateurs modernes pour interagir, modifier et résoudre les problèmes d’une page Web pour son HTML, CSS et JavaScript. Lorsque vous vérifiez le code source d’une page Web, vous voyez simplement un code HTML statique qui a été livré par le serveur au navigateur. Vous pouvez analyser la structure globale, le contenu et les balises, comme les métadonnées, etc., mais l’outil d’inspection rend la page Web avec tous ses éléments, corrige les erreurs, et plus encore.

Quels autres types de données puis-je découvrir en utilisant l’outil d’inspection des éléments ?

Avec l’inspection des éléments, vous obtenez une vue complète de la façon dont un site Web est construit. Vous avez accès au code HTML réel avec hiérarchie et imbrication. Vous pouvez modifier le CSS et voir les changements en temps réel, y compris des éléments comme la couleur, la taille de la police, etc. Vous pouvez également voir le code JavaScript, ce qui vous permet de déboguer le code et de l’analyser. La fonctionnalité “Demandes réseau” facilite la compréhension des ressources qui sont chargées de manière externe, comme les polices de sortie de la console, la manipulation du DOM, et plus encore.

Les propriétaires de sites Web peuvent-ils voir l’activité d’inspection des éléments sur leurs sites ?

Techniquement, oui. Pour clarifier, tous les sites Web modernes ont des outils d’analyse et de suivi installés, qui suivent essentiellement tout ce que vous faites sur un site Web, depuis combien de temps vous restez sur le site jusqu’à où vous cliquez. Cependant, vous ne serez jamais identifié personnellement par le site Web, et vous êtes simplement un point de données dans un groupe d’utilisateurs qui correspond à votre démographie et comportement. Ces systèmes sont en place pour surveiller la performance du site Web et améliorer l’expérience utilisateur.

Crédit image : Unsplash. Toutes les captures d’écran par Abbaz Uddin.