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 :
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
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 :
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:
Vous avez activé avec succès les outils de développement sur Safari pour Mac. Maintenant, suivez ces étapes pour utiliser Inspect Element :
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 :
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 :
Ouverture des paramètres Safari sur iPad ou iPhone
Activation de Web Inspector sur iPad et iPhone
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 !
Chrome, par défaut, ne vous montre pas l'URL complète. Vous ne vous souciez peut-être pas trop de ce détail, mais si, pour une raison quelconque, vous avez besoin d'afficher l'URL complète, des instructions détaillées sur la façon de faire en sorte que Google Chrome affiche l'URL complète dans la barre d'adresse.
Reddit a encore modifié sa conception en janvier 2024. La refonte peut être vue par les utilisateurs de navigateurs de bureau et réduit le flux principal tout en fournissant des liens.
Taper votre citation préférée de votre livre sur Facebook prend du temps et est plein d'erreurs. Découvrez comment utiliser Google Lens pour copier du texte de livres sur vos appareils.
Parfois, lorsque vous travaillez sur Chrome, vous ne pouvez pas accéder à certains sites Web et obtenez une erreur « L'adresse DNS du serveur fixe est introuvable dans Chrome ». Voici comment résoudre le problème.
Les rappels ont toujours été le point fort de Google Home. Ils nous facilitent sûrement la vie. Faisons un tour rapide sur la façon de créer des rappels sur Google Home afin de ne jamais manquer de faire des courses importantes.
Nous avons tous des Snaps que nous souhaitons garder privés, qu'il s'agisse de photos personnelles ou simplement de quelque chose que vous ne voulez pas que quiconque utilise votre téléphone puisse voir. Vous pouvez déjà créer des histoires privées sur Snapchat, et désormais, pour ces Snaps privés supplémentaires, vous pouvez protéger votre confidentialité sur Snapchat avec la fonctionnalité My Eyes Only Snapchat.
Votre disque de stockage interne de 825 Go de votre PlayStation 5 semble beaucoup, mais les jeux vidéo modernes peuvent être volumineux. De nombreux titres exigent plus de 50 Go, certains dépassant même 100 Go.
Lorsque vous souhaitez envoyer le même e-mail à vos clients, employés, membres de club ou à un groupe similaire, vous pouvez saisir un e-mail une fois et envoyer un message à tout le monde à l'aide de l'outil de fusion et publipostage Gmail. Autrefois surnommée fonctionnalité « envoi multiple », le publipostage dans Gmail vous permet d'insérer des contacts Google ou une liste de diffusion à partir de Google Sheets.
Comment changer votre mot de passe sur le service de streaming vidéo Netflix à l'aide de votre navigateur préféré ou de votre application Android.
Parfois, les applications peuvent se charger lentement, planter ou occuper trop d'espace de stockage. Effacer les données mises en cache de votre téléphone peut aider à résoudre ces problèmes et à libérer de l'espace pour d'autres fichiers importants.
