Comment inspecter des éléments sur Mac, Windows, iPhone et iPad

Les développeurs et les concepteurs d'interface utilisateur utilisent la fonctionnalité Inspect Element pour modifier les sites Web en ligne sans modifier le code source. Mais comment inspecter des éléments sans suivre de cours de développement web ?

Inspect Element est un outil de développement pratique prêt à l'emploi avec les navigateurs Web populaires. Vous avez juste besoin de savoir comment déployer l'outil en quelques clics lors de la navigation sur les sites Web.

Vous pouvez faire de nombreux tours de magie comme changer la mise en page du site Web, prendre des captures d'écran sans texte, changer les polices, modifier les chiffres, etc.

Vous trouverez ci-dessous un guide concis étape par étape pour apprendre à inspecter les éléments sans effort.

Qu'est-ce qu'Inspect Element ?

Inspect Element est un outil de développement Web disponible dans la plupart des navigateurs Web. Vous pouvez l'utiliser pour modifier le code source frontal de n'importe quel site Web que vous visitez.

Les modifications que vous apportez se produisent dans un bac à sable à l'intérieur de votre navigateur Web. Ainsi, vous n'apportez aucune modification au site Web actuel. De plus, les modifications superficielles que vous apportez disparaissent lorsque vous actualisez la page.

Voici quelques façons créatives de l'utiliser :

• Vous devez prendre une capture d'écran à partir d'un site Web et les textes sur l'image vous dérangent. Utilisez l'outil Inspecter l'élément pour supprimer ces textes.
• Vous voulez piéger vos amis en leur montrant votre nom dans le New York Times ou le Washington Post. Inspect Element est le meilleur moyen de le faire.
• Testez les codes de débogage sur les sites Web en les appliquant en temps réel à l'aide de l'outil Inspect Element. Si cela fonctionne, vous pouvez modifier le code source du backend.
• En tant que spécialiste du marketing numérique, vous pouvez révéler les mots-clés, les titres SEO, les balises méta, etc. de vos concurrents à l'aide de ce puissant outil de développement Web.

Comment inspecter des éléments sous Windows

L'utilisation de l'outil Inspect Element sous Windows est ridiculement facile. Vous trouverez ci-dessous un guide étape par étape pour inspecter les éléments à l'aide de divers navigateurs Web sous Windows :

Outil d'inspection de Google Chrome

Comment inspecter des éléments sur le navigateur Windows Chrome

• Lorsque vous utilisez Google Chrome , faites un clic droit n'importe où sur un site Web.
• Le menu contextuel du clic droit apparaîtra.
• En bas, vous verrez Inspect .
• Cliquez sur Inspecter pour afficher les codes HTML et CSS sur un panneau de droite .

Comment ouvrir Inspect Element dans Chrome sans cliquer avec le bouton droit ?

Il existe des raccourcis pratiques pour ouvrir l'outil Inspect Element sur Google Chrome pour Windows. Ces raccourcis clavier sont les suivants :

• Ctrl + Maj + C
• La touche de fonction F12

Les raccourcis clavier ci-dessus fonctionnent également sur le navigateur Mozilla pour Windows.

Outil Inspecteur Mozilla

Comment inspecter des éléments sur le navigateur Windows Mozilla

Sur le navigateur Mozilla, le processus est le même que sur Google Chrome. Cependant, la fenêtre de l'inspecteur s'affichera en bas du navigateur au lieu du côté droit, comme dans Google Chrome.

Outil d'inspection Microsoft Edge

Comment inspecter des éléments sur le navigateur Windows Edge

Étonnamment, Inspect Element de Microsoft Edge fonctionne de la même manière que le navigateur Google Chrome. L'outil Inspecter est disponible en cliquant avec le bouton droit de la souris. De plus, les codes HTML et CSS s'affichent sur le côté droit, comme dans Google Chrome.

Comment inspecter des éléments sur Mac

Utilisez-vous Google Chrome, Mozilla Firefox ou Microsoft Edge sur les ordinateurs Mac d'Apple ? Si oui, vous pouvez déployer l'outil Inspect Element en suivant les étapes mentionnées ci-dessus dans la section Windows.

Mais, si vous utilisez le navigateur Web macOS par défaut, Safari, l'utilisation de l'outil Inspect Element est un jeu délicat. Par défaut, Safari n'affiche pas Inspect Element sur un Mac. Voici ce que vous devez faire :

Comment ouvrir Inspect Element sur Mac

Tout d'abord, vous devez activer les outils de développement sur Safari sur un Mac. Voici comment:

• Lancez le navigateur Safari .
• Visitez un site Web dans lequel vous souhaitez inspecter des éléments Web.
• Sélectionnez Safari dans la barre de menus supérieure du navigateur Safari.
• Cliquez sur Préférences dans le menu contextuel qui s'ouvre.
• Sur l' écran Préférences , sélectionnez Avancé .
• Cochez le menu Afficher le développement en bas de l' écran Préférences avancées .

Vous avez activé avec succès les outils de développement sur Safari pour Mac. Maintenant, suivez ces étapes pour utiliser Inspect Element :

• Sur n'importe quel élément d'un site Web, comme un texte ou une image, faites un clic droit .
• Un menu contextuel apparaîtra. En bas, vous verrez Inspect Element .
• Cliquez dessus pour ouvrir une section de débogage sous le site Web affichant les codes HTML et CSS .

What Are the Keys for Inspect Element?

Vous recherchez peut-être des raccourcis pour Inspect Element sur Mac. Vous pouvez utiliser les éléments suivants :

• Commande + Maj + C
• Appuyez sur la touche Contrôle , puis sélectionnez n'importe quel élément.
• Cliquez sur le trackpad avec deux doigts

Comment inspecter les éléments sur les Chromebooks

Chromebook utilise Google Chrome comme navigateur par défaut. Par conséquent, après avoir ouvert n'importe quel site Web, faites simplement un clic droit pour trouver l'option Inspecter l'élément dans le menu contextuel qui suit.

Si vous utilisez un Chromebook au travail ou à l'école, vous vous posez peut-être cette question :

Why Can’t I Inspect on My School Chromebook?

La plupart des administrateurs d'écoles et d'entreprises désactivent les fonctionnalités avancées sur le Chromebook qu'ils vous fournissent pour le travail ou les études. Étant donné que les outils de développement sont des fonctionnalités avancées, il est probable que votre Chromebook scolaire ou professionnel n'affiche pas l'outil Inspecter l'élément.

Comment inspecter des éléments sur iPad/iPhone

Malheureusement, vous ne pouvez pas utiliser l'outil Inspect Element sur un iPhone ou un iPad sans Mac.

iOS et iPadOS ont Web Inspector pour l'application Safari. Cependant, cela ne fonctionne que si vous connectez l'appareil mobile à un Mac sur lequel vous avez déjà activé les outils de développement pour Safari. Voici les étapes que vous pouvez essayer :

• Ouvrez l'application Paramètres iPad/iPhone .
• Cliquez sur Safari dans le volet de navigation de gauche.

Ouverture des paramètres Safari sur iPad ou iPhone

• Ensuite, faites défiler vers le bas sur le côté droit pour trouver et sélectionner Avancé .

Activation de Web Inspector sur iPad et iPhone

• Activez la bascule pour Web Inspector .
• Maintenant, connectez l'appareil mobile au Mac via USB .
• Autorisez l'iPhone/iPad sur Mac.
• Ouvrez n'importe quel site Web sur un appareil mobile sur Safari.
• Maintenant, lancez Safari sur Mac et sélectionnez Développer dans la barre de menus supérieure.
• Dans le menu contextuel qui s'ouvre, recherchez le nom de votre appareil mobile.
• Passez le curseur sur l'appareil mobile pour afficher tous les sites Web ouverts.
• Maintenant, sélectionnez n'importe quel site Web pour afficher le code source HTML et CSS sur le navigateur Safari de Mac.

Conclusion

Vous avez exploré toutes les manières possibles d'utiliser l'outil Inspecter l'élément pour l'édition temporaire de pages Web. Vous avez également appris à inspecter des éléments pour divers appareils tels que Mac, Windows, Chromebook, iPad et iPhone.

La prochaine fois que vous aurez besoin de modifier une page Web pour le plaisir ou pour des besoins professionnels, essayez ces méthodes. Vous adorerez certainement ces étapes sans effort par rapport aux autres méthodes compliquées expliquées ailleurs.

N'oubliez pas de laisser des commentaires ci-dessous si les étapes ci-dessus vous ont aidé, toute méthode que vous trouvez difficile ou tout conseil secret sur l'outil Inspect Element.

Besoin d'une page Web comme référence imprimée? Apprenez à enregistrer rapidement une page Web au format PDF dès maintenant !