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 tout 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
- Lors de l'utilisation Google Chrome, clic-droit n'importe où sur un site Web.
- Le menu contextuel du clic droit apparaîtra.
- En bas, vous verrez Inspecter.
- 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 + Changement + C
- La touche de fonction F12
Les raccourcis clavier ci-dessus fonctionnent également sur le navigateur Mozilla pour Windows.
Outil Inspecteur Mozilla
Sur le navigateur Mozilla, le processus est le même que sur Google Chrome. Cependant, le Inspecteur fenêtre apparaîtra en bas du navigateur au lieu du côté droit, comme dans Google Chrome.
Outil d'inspection Microsoft 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:
- Courir le Navigateur Safari.
- Visitez un site Web dans lequel vous souhaitez inspecter des éléments Web.
- Sélectionner Safari dans la barre de menu supérieure du navigateur Safari.
- Cliquez sur Préférences dans le menu contextuel qui s'ouvre.
- Sur le Écran des préférences, sélectionner Avancé.
- Cochez la Afficher Développer menu en bas de Préférences avancées filtrer.
Vous avez activé avec succès les outils de développement sur Safari pour Mac. Maintenant, suivez ces étapes pour utiliser Inspect Element :
- Sur tout élément d'un site web comme un texte, ou une image, clic-droit.
- Un menu contextuel apparaîtra. En bas, vous verrez Inspecter l'élément.
- Cliquez dessus pour ouvrir une section de débogage sous le site Web affichant HTML et CSS codes.
Quelles sont les clés pour inspecter l'élément ?
Vous recherchez peut-être des raccourcis pour Inspect Element sur Mac. Vous pouvez utiliser les éléments suivants :
- Commande + Changement + C
- appuie sur le Contrôle touche 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 :
Pourquoi ne puis-je pas inspecter le Chromebook de mon école ?
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 école ou votre travail Chromebook n'affichera pas l'outil Inspect Element.
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'iPad/iPhone Paramètres application.
- Cliquez sur Safari dans le volet de navigation de gauche.
- Ensuite, faites défiler vers le bas sur le côté droit pour trouver et sélectionner Avancé.
- Activez la bascule pour Inspecteur Web.
- Maintenant, connectez l'appareil mobile au Mac en utilisant 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 menu 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 façons possibles d'utiliser l'outil Inspecter l'élément pour l'édition temporaire de pages Web. Vous avez également appris à inspecter les éléments de 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? Apprendre à enregistrer rapidement une page Web au format PDF maintenant!