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

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

Inspecter les éléments, qu’est-ce que c’est ?

Inspect Elements est une fonctionnalité puissante disponible sur tous les navigateurs Web modernes qui vous permet d’en savoir plus sur une page Web, comme la structure, la mise en page et le style de celle-ci. Développeurs et concepteurs de contenu en ligne utilisent souvent ces outils pour déboguer, expérimenter et dépanner un projet Web. Vous pouvez facilement sélectionner un élément d’un site Web, et l’outil d’inspection 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 visualiser les modifications appliquées à la page Web en temps réel. Cependant, les modifications ne seront visibles que par 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.

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

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

Commençons par la façon d’inspecter les éléments dans Chrome, car c’est le navigateur le plus populaire. Les étapes sont assez simples, vous permettant de démarrer 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.

<img decoding="async" width="1140" height="661" alt="Icône Google Chrome sur Mac" class="wp-image-638908" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/google-chrome-icon-on-mac.jpg 1140w, https://www.maketecheasier.com/assets/uploads/2023/06/google-chrome-icon-on-mac-800x464.jpg 800w" sizes="(max-width: 1140px) 100vw, 1140px" />

2. Faites un clic droit sur n’importe quel espace vide et sélectionnez “Inspecter”.

<img decoding="async" width="476" height="649" alt="Bouton d'inspection en surbrillance sur Chrome" class="wp-image-638907" />

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

<img decoding="async" width="816" height="600" alt="Inspecter le panneau d'élément sur Chrome dans un Mac" class="wp-image-638906" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/inspect-element-panel-on-chrome-in-a-mac.jpg 816w, https://www.maketecheasier.com/assets/uploads/2023/06/inspect-element-panel-on-chrome-in-a-mac-800x588.jpg 800w" sizes="(max-width: 816px) 100vw, 816px" />

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

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

Maintenant que vous avez réussi à ouvrir le panneau d’inspection, apprenons à interagir avec un élément.

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

<img decoding="async" width="1102" height="552" alt="Sélectionner un élément pour l'inspecter Option sur Chrome" class="wp-image-639045" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/select-an-element-to-inspect-it-option-on-chrome.jpg 1102w, https://www.maketecheasier.com/assets/uploads/2023/06/select-an-element-to-inspect-it-option-on-chrome-800x401.jpg 800w" sizes="(max-width: 1102px) 100vw, 1102px" />

2. Sélectionnez n’importe quel élément. Pour cet exemple, nous inspectons une image sur la page Web. Vous pouvez le faire 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.

<img decoding="async" width="1200" height="485" alt="Inspecter un élément d'image sur Chrome" class="wp-image-639044" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/inspecting-an-image-element-on-chrome.jpg 1200w, https://www.maketecheasier.com/assets/uploads/2023/06/inspecting-an-image-element-on-chrome-800x323.jpg 800w" sizes="(max-width: 1200px) 100vw, 1200px" />

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

1. Sur le côté gauche du panneau d’inspection, cliquez sur l’option “Toggle Device Toolbar”.

<img decoding="async" width="1107" height="467" alt="Basculer l'option de la barre d'outils de l'appareil sur le panneau d'inspection de Chrome" class="wp-image-639050" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/toggle-device-toolbar-option-on-chrome-inspection-panel.jpg 1107w, https://www.maketecheasier.com/assets/uploads/2023/06/toggle-device-toolbar-option-on-chrome-inspection-panel-800x337.jpg 800w" sizes="(max-width: 1107px) 100vw, 1107px" />

2. 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.

<img decoding="async" width="632" height="600" alt="Outil d'inspection de la vue mobile sur Chrome" class="wp-image-639049" />

3. Si vous cliquez sur le menu déroulant “Réactif” ci-dessus, vous pouvez sélectionner un appareil de votre choix dans la liste. Ce faisant, vous verrez comment la page Web réagit à un modèle de smartphone particulier.

<img decoding="async" width="482" height="600" alt="Appareils mobiles pris en charge sur l'outil d'inspection Chrome" class="wp-image-639048" />

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

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

<img decoding="async" width="1095" height="429" alt="Personnaliser et contrôler le bouton Outils de développement sur Chrome dans un Mac" class="wp-image-639054" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/customize-and-control-dev-tools-button-on-chrome-in-a-mac.jpg 1095w, https://www.maketecheasier.com/assets/uploads/2023/06/customize-and-control-dev-tools-button-on-chrome-in-a-mac-800x313.jpg 800w" sizes="(max-width: 1095px) 100vw, 1095px" />

2. Sélectionnez l’emplacement du quai d’inspection : à gauche, en dessous ou dans une fenêtre contextuelle.

<img decoding="async" width="806" height="463" alt="Mettre en surbrillance les paramètres du côté du quai sur Chrome" class="wp-image-639053" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/highlighting-dock-side-settings-on-chrome.jpg 806w, https://www.maketecheasier.com/assets/uploads/2023/06/highlighting-dock-side-settings-on-chrome-800x460.jpg 800w" sizes="(max-width: 806px) 100vw, 806px" />

Comment inspecter des éléments dans Safari sur Mac

La fonction d’inspection des éléments est désactivée par défaut sur Safari, car elle fait partie de l’option développeur. Donc, d’abord, nous devons activer le “Menu Développer”.

Conseil: faire le passer de Chrome à Safari comme navigateur par défaut sur votre Mac ? Nous avons toutes les étapes pour vous aider à faire la transition sans perdre vos favoris, vos extensions, etc.

Comment ouvrir le panneau d’inspection dans Safari

1. Une fois que vous avez ouvert 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 supérieure et sélectionnez “Paramètres”.

<img decoding="async" width="755" height="600" alt="Bouton Paramètres Safari dans le menu supérieur" class="wp-image-639076" />

2. Cela vous amènera à l’onglet “Général”. Sélectionnez l’onglet “Avancé” à l’extrême droite.

<img decoding="async" width="1184" height="420" alt="Paramètres avancés de Safari à partir du panneau des paramètres" class="wp-image-639075" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/safari-advanced-settings-from-the-settings-panel.jpg 1184w, https://www.maketecheasier.com/assets/uploads/2023/06/safari-advanced-settings-from-the-settings-panel-800x284.jpg 800w" sizes="(max-width: 1184px) 100vw, 1184px" />

3. Cochez la case à côté de “Afficher le menu Développer dans la barre de menus” pour avoir accès à toutes les fonctionnalités avancées de Safari.

<img decoding="async" width="701" height="600" alt="Afficher le menu de développement dans l'option de la barre de menus dans les paramètres Safari" class="wp-image-639074" />

4. Faites un clic 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.

<img decoding="async" width="315" height="260" alt="Inspecter le bouton d'élément sur Safari" class="wp-image-639073" />

5. Pour des options plus avancées, cliquez sur l’onglet “Développer” dans la barre de menu.

<img decoding="async" width="1005" height="294" alt="Option de développement dans la barre de menus" class="wp-image-639078" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/develop-option-on-menu-bar.jpg 1005w, https://www.maketecheasier.com/assets/uploads/2023/06/develop-option-on-menu-bar-800x234.jpg 800w" sizes="(max-width: 1005px) 100vw, 1005px" />

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 volet d’inspection.

<img decoding="async" width="510" height="431" alt="Démarrer la sélection d'éléments sur Safari dans un Mac" class="wp-image-639080" />

2. 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.

<img decoding="async" width="782" height="600" alt="Inspecter une balise de titre sur Safari Inspect Tool" class="wp-image-639079" />

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

1. Dans la barre de menu supérieure, cliquez sur l’option “Développer” et sélectionnez “Entrer en mode de conception réactive”.

<img decoding="async" width="817" height="614" alt="Entrez en mode réactif sur l'outil d'inspection Safari" class="wp-image-639083" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/enter-responsive-mode-on-safari-inspection-tool.jpg 817w, https://www.maketecheasier.com/assets/uploads/2023/06/enter-responsive-mode-on-safari-inspection-tool-800x601.jpg 800w" sizes="(max-width: 817px) 100vw, 817px" />

2. Sélectionnez le modèle d’appareil que vous souhaitez utiliser pour inspecter la page Web.

<img decoding="async" width="1041" height="600" alt="Vue iPhone sur l'outil d'inspection de Safari" class="wp-image-639082" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/iphone-view-on-safari-inspection-tool.jpg 1041w, https://www.maketecheasier.com/assets/uploads/2023/06/iphone-view-on-safari-inspection-tool-800x461.jpg 800w" sizes="(max-width: 1041px) 100vw, 1041px" />

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

Sur le côté gauche du panneau d’inspection, sélectionnez l’emplacement souhaité et le volet d’inspection sera déplacé en conséquence.

<img decoding="async" width="751" height="181" alt="Modifier l'emplacement du quai d'inspection sur Safari" class="wp-image-639084" />

Comment inspecter des éléments dans Firefox sur Mac

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

Conseil: vous n’utilisez pas Firefox sur Mac ? Apprendre comment utiliser l’outil “Inspect Element” de Firefox pour examiner un site Web sur un ordinateur Windows.

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 Firebox, cliquez avec le bouton droit de la souris et sélectionnez « Inspecter ».

<img decoding="async" width="418" height="564" alt="Inspecter le bouton sur Firefox dans un Mac" class="wp-image-639088" />

2. Cela ouvrira le panneau d’inspection sur le navigateur Firefox.

<img decoding="async" width="1198" height="598" alt="Panneau d'inspection sur Firefox dans un Mac" class="wp-image-639087" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/inspection-panel-on-firefox-in-a-mac.jpg 1198w, https://www.maketecheasier.com/assets/uploads/2023/06/inspection-panel-on-firefox-in-a-mac-800x399.jpg 800w" sizes="(max-width: 1198px) 100vw, 1198px" />

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.

<img decoding="async" width="791" height="498" alt="Choisissez un élément de la page sur Firefox" class="wp-image-639090" />

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

<img decoding="async" width="1200" height="553" alt="Inspection d'une balise de titre sur l'outil d'inspection de Firefox" class="wp-image-639089" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/inpecting-a-title-tag-on-firefox-inspection-tool.jpg 1200w, https://www.maketecheasier.com/assets/uploads/2023/06/inpecting-a-title-tag-on-firefox-inspection-tool-800x369.jpg 800w" sizes="(max-width: 1200px) 100vw, 1200px" />

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

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

<img decoding="async" width="733" height="419" alt="Mode de conception réactif sur Firefox dans un Mac" class="wp-image-639092" />

2. Cela convertira et chargera le site Web dans une visionneuse en forme de smartphone. Vous pouvez cliquer sur le bouton “Réactif” pour sélectionner un appareil mobile de votre choix.

<img decoding="async" width="1043" height="690" alt="Bouton déroulant réactif sur Firefox dans un Mac" class="wp-image-639091" srcset="https://www.maketecheasier.com/assets/uploads/2023/06/resposive-drop-down-button-on-firefox-in-a-mac.jpg 1043w, https://www.maketecheasier.com/assets/uploads/2023/06/resposive-drop-down-button-on-firefox-in-a-mac-800x529.jpg 800w" sizes="(max-width: 1043px) 100vw, 1043px" />

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

1. Cliquez sur les points de suspension horizontaux à trois points dans le coin droit du quai d’inspection.

<img decoding="async" width="699" height="482" alt="Paramètres du Dock d'inspection sur Firefox dans un Mac" class="wp-image-639094" />

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

<img decoding="async" width="602" height="522" alt="Emplacement différent du dock d'inspection sur Firefox dans un Mac" class="wp-image-639093" />

Questions fréquemment posées

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

Inspecter les éléments est un outil de développement intégré aux navigateurs modernes pour interagir, modifier et dépanner une page Web pour son HTML, CSS et JavaScript. Lorsque vous vérifiez la source de la page d’une page Web, vous voyez simplement un code HTML statique qui a été fourni 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 affiche la page Web avec tous ses éléments, corrige les erreurs, etc.

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

Avec les éléments d’inspection, vous obtenez une vue complète de la construction d’un site Web. Vous accédez 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, vous permettant de déboguer le code et de l’analyser. La fonctionnalité “Requêtes réseau” vous permet de comprendre plus facilement les ressources chargées en externe, telles que les polices de sortie de la console, la manipulation DOM, etc.

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

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

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

Abbaz Uddin

Abbaz est un rédacteur technique indépendant expérimenté. Il a une forte passion pour rendre la technologie accessible aux non-techniciens en créant un contenu facile à comprendre qui les aide à répondre à leurs besoins technologiques.

Abonnez-vous à notre newsletter!

Nos derniers tutoriels livrés directement dans votre boîte de réception

to www.maketecheasier.com

---

Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931

---