Ce qu'il faut savoir
-
Dans Safari: faites un clic droit sur une page Web et sélectionnez Inspecter l'élément.
- Dans Chrome, vous pouvez faire un clic droit et cliquer sur Inspecter.
- Pour activer la fonctionnalité dans Safari: Safari > Preferences > Advanced > Afficher le menu Développer dans la barre de menus box.
Cet article vous apprend à inspecter les éléments d'un site Web sur Mac. Il examine comment procéder via Safari et Google Chrome.
Comment utiliser la fonctionnalité Inspect Element sur un Mac ?
Avant d'inspecter des éléments sur Mac lorsque vous utilisez Safari, vous devez activer le menu développeur dans le navigateur. Voici comment l'activer et ce qu'il faut faire pour inspecter un élément.
Si vous pouvez voir Développer entre les signets et la fenêtre, le menu Développeur a déjà été activé et vous pouvez passer à l'étape 4.
Utilisation de la fonctionnalité d'inspection d'élément dans Safari
Voici comment utiliser Inspect Element dans Safari, le navigateur par défaut sur les ordinateurs Mac.
-
Dans Safari, cliquez sur Safari > Préférences.
Image -
Cliquez Avancé.
Image -
Cliquez sur Afficher le menu Développer dans la barre de menu puis fermez la fenêtre.
Image - Lorsque vous naviguez sur un site Web, faites un clic droit sur l'élément que vous souhaitez inspecter.
-
Cliquez sur Inspecter l'élément.
Image -
Vous pouvez maintenant voir le code derrière le site Web que vous avez inspecté.
Image
Utilisation de la fonctionnalité d'inspection d'élément dans Chrome sur un Mac
Si vous utilisez Chrome au lieu de Safari sur votre Mac, il est encore plus facile d'afficher un élément car il n'est pas nécessaire d'activer la fonctionnalité. Voici ce qu'il faut faire.
- Dans Chrome, accédez à un site Web.
- Clic droit sur l'élément que vous souhaitez inspecter.
-
Cliquez Inspecter.
Image -
Vous pouvez maintenant afficher le code dans une fenêtre latérale sur Chrome.
Image
Pourquoi ne puis-je pas inspecter sur mon Mac ?
Vous ne pourrez peut-être pas inspecter un élément sur votre Mac si vous n'avez pas activé le menu Développeur dans Safari. Voici un rappel de la marche à suivre.
-
Dans Safari, cliquez sur Safari > Préférences.
Image -
Cliquez Avancé.
Image -
Cliquez sur Afficher le menu Développer dans la barre de menu puis fermez la fenêtre.
Image
Comment apporter des modifications au site Web en inspectant l'élément
En plus de vous permettre d'afficher le code sur un site Web, il est également possible de modifier temporairement n'importe quel élément du site Web via Inspect Element. Voici comment procéder via Safari.
Le processus est très similaire sur les autres navigateurs.
- Lorsque vous naviguez sur un site Web, faites un clic droit sur l'élément que vous souhaitez inspecter.
- Cliquez sur Inspecter l'élément.
- Double-cliquez sur le texte dans le code pour le rendre modifiable.
- Supprimez-le ou saisissez une nouvelle chaîne de texte.
- Appuyez sur Entrée.
- Le code a maintenant été temporairement modifié juste pour votre bénéfice.
Pourquoi voudriez-vous utiliser la fonctionnalité d'inspection d'élément ?
Être capable d'inspecter un élément est utile pour de nombreuses raisons.
- Pour changer le code à la volée. Les concepteurs de sites Web peuvent modifier temporairement les éléments d'un site Web pour voir comment les modifications affectent les choses.
- Pour vérifier le code. Les concepteurs et les responsables marketing peuvent vérifier le code pour confirmer que des éléments tels que les détails de Google Analytics s'y trouvent.
- Pour afficher les images séparément d'un site. Si un site ne vous permet pas d'ouvrir une image dans un nouvel onglet ou une nouvelle fenêtre, l'affichage de l'élément le permet.
-
Tinker. Voir le code d'une page Web peut vous aider à comprendre ce que vous voyez, supprimant le mystère de quoi et pourquoi de ce qui se passe avec le site sur lequel vous vous trouvez. C'est comme démonter un appareil pour voir comment il fonctionne, mais il n'y a pas de vis à perdre dans ce cas.
FAQ
Est-il légal d'inspecter un site Web ?
Oui. Cependant, si vous prévoyez d'utiliser un code ou des éléments d'un site Web, assurez-vous de vérifier auprès du propriétaire et d'ajouter une note de copyright.
Comment puis-je copier le code HTML d'un site Web avec un élément d'inspection ?
Dans Chrome, faites un clic droit sur la page et sélectionnez Inspecter, puis allez dans la section supérieure et faites un clic droit sur la balise (par exemple). Sélectionnez Copy > Copy outerHTML, puis collez le code dans un fichier texte ou HTML.
Puis-je copier le CSS d'un site Web avec un élément d'inspection ?
Oui. Faites un clic droit sur l'élément que vous souhaitez copier et choisissez Inspecter. Faites un clic droit sur le code en surbrillance et sélectionnez Copy > Copy styles.
Comment puis-je voir mes mots de passe enregistrés à l'aide de l'élément inspect ?
Pour révéler les mots de passe cachés, faites un clic droit sur la zone de texte du mot de passe et sélectionnez Inspecter. Dans la section en surbrillance, recherchez type="password" et remplacez password par text. Il existe des moyens plus simples d'afficher tous vos mots de passe dans Chrome.
