Comment utiliser lélément dinspection

Liens de périphérique

La plupart des gens ne savent pas qu'il existe un trésor d'outils de développement à leur disposition et qu'il est caché dans leur navigateur préféré.

Comment utiliser l'élément d'inspection

Chaque navigateur Web offre des outils de développement pour vérifier le codage d'un site Web. Cependant, c'est une entité étrangère à l'internaute moyen. Après tout, qui veut regarder le codage d'un site Web, n'est-ce pas ?

Il s'avère qu'il y a beaucoup de choses que vous pouvez apprendre en regardant le codage d'un site Web. Lisez la suite pour découvrir ce que la fonction d'élément d'inspection a à offrir et comment l'utiliser.

La plupart des navigateurs disposent d'outils pour inspecter les éléments d'un site Web, mais ils fonctionnent tous généralement de la même manière.

Utilisation d'Inspect Element dans Google Chrome

  1. Ouvrez le site Web que vous souhaitez inspecter.
    Comment utiliser l'élément d'inspection
  2. Cliquez avec le bouton droit n'importe où sur la page et sélectionnez Inspecter .
    Comment utiliser l'élément d'inspection
    OU
  3. Cliquez sur les trois points verticaux dans le coin droit de votre barre d'outils.
    Comment utiliser l'élément d'inspection
  4. Accédez à Plus d'outils .
    Comment utiliser l'élément d'inspection
  5. Sélectionnez Outils de développement .
    Comment utiliser l'élément d'inspection
    OU
  6. Appuyez sur la touche de raccourci clavier F12 sur un PC (ou CMD + Options + I sur un Mac.)
    Comment utiliser l'élément d'inspection

Utilisation d'Inspect Element dans Microsoft Edge

  1. Ouvrez un site Web.
    Comment utiliser l'élément d'inspection
  2. Cliquez sur les trois points verticaux dans le coin supérieur droit de la barre d'outils du navigateur.
    Comment utiliser l'élément d'inspection
  3. Faites défiler vers le bas et cliquez sur Plus d'outils .
    Comment utiliser l'élément d'inspection
  4. Cliquez sur Outils de développement .
    Comment utiliser l'élément d'inspection
    OU
  5. Faites un clic droit n'importe où sur le site Web et cliquez sur Inspecter .
    Comment utiliser l'élément d'inspection
    OU
  6. Appuyez sur Ctrl + Maj + I .
    Comment utiliser l'élément d'inspection Comment utiliser l'élément d'inspectionComment utiliser l'élément d'inspection

Chacune de ces trois méthodes vous donnera le même résultat.

Si vous l'avez fait correctement, un nouveau volet s'ouvre en bas de votre navigateur. Ce sont les outils de développement et incluent l'onglet Éléments. C'est l'outil dont vous avez besoin pour inspecter l'élément.

Le panneau s'ouvrira par défaut en bas de votre écran, mais vous pouvez toujours modifier son apparence. Suivez ces étapes simples pour repositionner le panneau Outils de développement :

  1. Cliquez sur les trois points horizontaux dans le coin supérieur du panneau Outils de développement.
    Comment utiliser l'élément d'inspection
  2. Sélectionnez un côté d'ancrage (gauche, bas ou droite) ou désancrez dans une fenêtre distincte.
    Comment utiliser l'élément d'inspection

Placez le curseur à côté du bord du cadre du panneau Outils de développement et faites-le glisser pour réduire ou élargir l'espace de travail. Par exemple, si vous choisissez d'ancrer le panneau sur le côté droit de la fenêtre du navigateur, essayez de survoler la bordure gauche. Vous pouvez faire glisser le panneau pour le redimensionner lorsque vous voyez le curseur fléché.

Utilisation de l'élément d'inspection (spécifique au système d'exploitation)

Bien que de nombreuses étapes impliquées aient pu être couvertes en vous montrant simplement comment utiliser Inspect Element dans le navigateur, nous vous montrerons comment sur la plupart des systèmes d'exploitation de toute façon.

Comment utiliser Inspect Element sur un Chromebook

Le navigateur par défaut sur un Chromebook est Google, alors suivez les instructions du navigateur Chrome pour accéder à Inspect Element . Voici un petit cours de remise à niveau pour vous :

  1. Ouvrez un site Web.
    Comment utiliser l'élément d'inspection
  2. Cliquez sur les trois points verticaux dans le coin supérieur droit de la barre d'outils.
    Comment utiliser l'élément d'inspection
  3. Sélectionnez Plus d'outils .
    Comment utiliser l'élément d'inspection
  4. Cliquez sur Outils de développement .
    Comment utiliser l'élément d'inspection

Vous pouvez également utiliser la méthode du clic droit ou la touche de fonction F12 pour accéder plus rapidement aux outils de développement.

Comment utiliser Inspect Element sur un appareil Android

L'exécution d'Inspect Element sur un appareil Android est légèrement différente. Découvrez comment accéder au panneau Inspect Element sur Android :

  1. Appuyez sur la touche de fonction F12 .
    Comment utiliser l'élément d'inspection
  2. Choisissez Basculer la barre de périphérique .
    Comment utiliser l'élément d'inspection
  3. Sélectionnez l'appareil Android dans le menu déroulant.
    Comment utiliser l'élément d'inspection

Lorsque vous sélectionnez un appareil Android spécifique, vous remarquerez qu'une version mobile du site Web se charge. À partir de là, vous êtes libre d'utiliser la fonction Inspect Element sur votre appareil Android dans le confort de votre bureau.

Cette méthode fonctionne à la fois pour les navigateurs Chrome et Firefox car ils ont une fonctionnalité dans leurs outils de développement appelée Device Simulation.

Cela fonctionne également de la même manière pour les appareils iPhone. Il vous suffit de sélectionner le bon dans le menu déroulant.

Comment utiliser Inspect Element dans Windows

L'outil Inspect Element n'est pas nécessairement spécifique au système d'exploitation, mais il est spécifique au navigateur. Cela signifie que les outils de développement sont une fonctionnalité du navigateur que vous utilisez et pas nécessairement de Windows. Cependant, vous pouvez accéder au panneau Inspecter l'élément quel que soit le navigateur que vous préférez.

Si vous utilisez le système d'exploitation Windows, vous utiliserez probablement également le navigateur Microsoft Edge. Découvrez comment accéder à Inspect Element sur MS Edge :

  1. Ouvrez le site Web que vous souhaitez inspecter.
    Comment utiliser l'élément d'inspection
  2. Appuyez sur les trois points verticaux dans le coin de la fenêtre du navigateur.
    Comment utiliser l'élément d'inspection
  3. Faites défiler vers le bas et sélectionnez Plus d'outils .
    Comment utiliser l'élément d'inspection
  4. Cliquez sur Outils de développement .
    Comment utiliser l'élément d'inspection

Vous pouvez également utiliser la touche de fonction F12 pour accéder plus rapidement à Inspect Element. En outre, un clic droit sur la page Web et la sélection de Inspecter fonctionnent également.

Comment utiliser Inspect Element sur un Mac

Si vous utilisez un Mac, votre navigateur de prédilection est probablement Safari. L'ouverture d'Inspect Elements sur Safari est légèrement différente de celle sur Chrome et Firefox. Mais c'est tout aussi simple avec ces étapes :

  1. Ouvrez le navigateur Safari.
    Comment utiliser l'élément d'inspection
  2. Cliquez sur Safari dans l'onglet d'en-tête et sélectionnez Préférences dans le menu déroulant.
    Comment utiliser l'élément d'inspection
  3. Cliquez sur l' icône d'engrenage avancé située en haut de l'écran.
    Comment utiliser l'élément d'inspection
  4. Cochez la case indiquant Afficher le menu Développer dans la barre de menus .
    Comment utiliser l'élément d'inspection

Suivre ces étapes active la fonctionnalité Inspecter l'élément sur votre navigateur. Si vous n'activez pas d'abord Inspecter l'élément, vous ne verrez pas l'option lorsque vous ouvrirez un site Web.

Après avoir terminé cette étape, faites simplement un clic droit sur n'importe quelle page Web ouverte et sélectionnez Inspecter. Vous pouvez également utiliser la commande des touches rapides : CMD + Option + I (inspecter).

Comment utiliser Inspect Element sur iOS

Voulez-vous utiliser la fonction Inspecter les éléments pour voir comment une version mobile d'une page Web apparaît sur un iPhone ? Vous pouvez le faire et bien plus encore en quelques étapes simples. Mais avant de regarder un élément, vous devez activer Web Inspector pour votre appareil iOS :

  1. Allez dans Paramètres .
    Comment utiliser l'élément d'inspection
  2. Maintenant, sélectionnez Safari .
    Comment utiliser l'élément d'inspection
  3. Faites défiler vers le bas et appuyez sur le menu avancé .
    Comment utiliser l'élément d'inspection
  4. Maintenant, appuyez sur l'interrupteur à bascule pour activer Web Inspector .
    Comment utiliser l'élément d'inspection

Assurez-vous également que le menu Développer est activé sur votre Mac en suivant les étapes de la section ci-dessus.

Après avoir activé les appareils mobiles iOS et les Mac, vous verrez le menu Développer dans la barre supérieure de votre Mac. Cliquez dessus pour voir l'iPhone connecté et la page Web active sur l'appareil. La sélection de la page Web ouvre également une fenêtre Web Inspector pour la même page sur l'écran de votre Mac.

Gardez à l'esprit, cependant, que ces instructions ne fonctionnent que pour Safari exécutant un Mac, pas Safari sur Windows.

Comment utiliser Inspect Element lorsqu'il est bloqué

Parfois, vous constaterez que vous ne pouvez pas inspecter une page Web et que la sélection Inspecter est grisée si vous essayez de cliquer dessus avec le bouton droit de la souris. Vous pensez peut-être qu'il est bloqué, mais il existe de nombreuses façons de contourner cela :

Méthode 1 - Désactiver Javascript

  1. Allez dans Paramètres .
    Comment utiliser l'élément d'inspection
  2. Rechercher Javascript .
    Comment utiliser l'élément d'inspection
  3. Désactivez JavaScript .
    Comment utiliser l'élément d'inspection

Méthode 2 - Accéder aux outils de développement sur le long chemin

Au lieu de cliquer avec le bouton droit de la souris pour inspecter, procédez comme suit :

  1. Accédez aux paramètres de votre navigateur.
    Comment utiliser l'élément d'inspection
  2. Sélectionnez Plus d'outils .
    Comment utiliser l'élément d'inspection
  3. Faites défiler vers le bas et cliquez sur Outils de développement .
    Comment utiliser l'élément d'inspection

Méthode 3 - Utilisation de la touche de fonction

Vous pouvez également essayer d'utiliser la touche de fonction F12 sur les pages Web qui bloquent le clic droit pour Inspecter.

Comment utiliser l'élément d'inspection

Vous devrez peut-être essayer toutes ces méthodes avant d'en trouver une qui fonctionne pour vous. En dernier recours, vous pouvez également essayer de visualiser le code source en tapant view-source: [enter full url] .

Comment utiliser l'élément d'inspection

Comment utiliser Inspect Element sur un Chromebook scolaire

Si votre Chromebook a été délivré par un établissement scolaire, l'utilisation de la fonctionnalité Inspect Element implique quelques étapes simples :

  1. Faites un clic droit ou appuyez deux doigts sur la page Web et sélectionnez Inspecter .
    Comment utiliser l'élément d'inspection
  2. Appuyez sur Ctrl + Maj + I .
    Comment utiliser l'élément d'inspectionComment utiliser l'élément d'inspectionComment utiliser l'élément d'inspection
  3. Essayez d'utiliser la méthode view-source:[url], telle que view-source:https://www.wikipedia.com .

    Comment utiliser l'élément d'inspection

Cependant, certaines écoles et organisations bloquent cette fonctionnalité, donc si cela ne fonctionne pas pour vous, vous devrez peut-être contacter votre organisation ou l'administrateur de votre école.

Comment utiliser Inspect Element pour trouver des réponses

Vous pouvez utiliser Inspect Element pour trouver des réponses à une variété de choses comme :

  • Aperçu de la conception du site sur les appareils mobiles.
  • Découvrez les mots-clés que les concurrents utilisent.
  • Essais de vitesse.
  • Modifier le texte d'une page Web.
  • Trouvez des exemples rapides pour montrer aux développeurs ce dont vous avez besoin.

Lorsque vous lancez le panneau Inspect Element, vous verrez tout le codage du site Web. Cela inclut tout le codage JavaScript, CSS et HTML intégré. C'est comme voir le codage source d'une page Web, sauf que vous pouvez apporter des modifications au code. De plus, vous pouvez voir tous les changements mis en œuvre en temps réel.

Cet outil permet aux spécialistes du marketing, aux concepteurs et aux développeurs de visualiser toutes les modifications de conception avant de les finaliser. Cependant, apporter des modifications au codage avec Inspect Element ne dure pas éternellement. Lorsque vous rechargez la page, elle reviendra à son état par défaut.

FAQ supplémentaire

Si vous n'êtes pas un expert sur Inspect Element après avoir lu ci-dessus, il y a plus de réponses ici.

Comment utiliser la commande Inspect Element pour trouver des réponses ?

La seule façon de trouver des réponses à l'aide de la fonction Inspecter l'élément est que le site Web le révèle instantanément après la soumission. Dans ce cas, les réponses sont présentes dans le codage.

Sinon, vous visualisez simplement le codage du quiz ou du test lorsque vous utilisez la fonction Inspecter l'élément, ainsi que toutes les réponses que vous soumettez.

Inspecter l'élément est-il illégal ?

Non, l'outil Inspect Element n'est pas illégal ; il est conçu pour les développeurs Web. L'affichage du code source d'un site Web n'est pas illégal ; cela ne devient un problème que si vous utilisez les informations recueillies à des fins néfastes, telles que des tentatives d'exploitation, etc.

Est-il possible de désactiver Inspect Element dans le navigateur ?

La réponse courte est non.

Vous ne pouvez pas désactiver l'élément d'inspection dans un navigateur, mais vous pouvez définir des paramètres qui empêchent les utilisateurs d'effectuer certaines actions comme un clic droit sur une page Web. Il existe de nombreux tutoriels en ligne pour définir les scripts appropriés pour désactiver certains événements. Cependant, vous ne pouvez pas réellement désactiver la fonctionnalité Inspecter l'élément dans son intégralité.

Apprenez à connaître les entrailles d'une page Web

Vérifier la fonctionnalité Inspecter l'élément d'une page Web est probablement un outil de développement dont vous ne saviez pas que vous aviez besoin, même si vous n'êtes pas vous-même développeur. Il a des tonnes d'applications de conception et de marketing qui peuvent rendre votre site Web plus fluide. Et peut-être vous donner un avantage sur un concurrent.

Pourquoi utilisez-vous Inspect Element ? Parlez-nous à ce sujet dans la section des commentaires ci-dessous.

Sign up and earn $1000 a day ⋙

Top 10 des meilleurs jeux Gacha sur PC et mobile, les plus intéressants en 2023

Top 10 des meilleurs jeux Gacha sur PC et mobile, les plus intéressants en 2023

Vous cherchez un jeu gacha pour vous divertir mais vous ne devez pas choisir quel jeu rejoindre ? Les 10 meilleurs jeux de gacha suivants seront la suggestion parfaite pour vous.

10 configurations informatiques pour jouer à Fifa Online 4 Super Smooth 2023

10 configurations informatiques pour jouer à Fifa Online 4 Super Smooth 2023

Fifa Online 4 grand jeu de divertissement pour ceux qui sont passionnés par le football. Rejoignez WebTech360 pour découvrir la configuration de jeu Fifa Online 4 la plus fluide.

Configurer les paramètres du jeu Mortal Kombat 11 pour les ordinateurs

Configurer les paramètres du jeu Mortal Kombat 11 pour les ordinateurs

Mortal Kombat 11 est une version de jeu de combat qui attire un grand nombre de joueurs. Pour pouvoir jouer au jeu, vous devrez vous renseigner sur ses paramètres.

Top 10 des jeux en ligne pour jouer avec vos amis préférés 2023

Top 10 des jeux en ligne pour jouer avec vos amis préférés 2023

Quels sont les jeux en ligne intéressants auxquels vous pouvez jouer avec vos amis ? Reportez-vous aux 10 meilleurs jeux en ligne pour jouer avec des amis qui sont très bien notés aujourd'hui.

Les 10 meilleurs jeux pour les lecteurs Android peuvent se référer

Les 10 meilleurs jeux pour les lecteurs Android peuvent se référer

Un nouveau jeu passionnant et dramatique vous aidera à soulager le stress lorsque vous êtes fatigué. Veuillez lire avec WebTech360 pour vous référer rapidement aux 10 meilleurs jeux pour Android ici.

Top 10 des jeux de tir de chars classiques avec de superbes graphismes, un excellent jeu

Top 10 des jeux de tir de chars classiques avec de superbes graphismes, un excellent jeu

Vous aimez la bataille des chars classiques dans le monde du jeu. Les meilleurs jeux de tir de chars classiques révélés dans l'article ne doivent pas être manqués.

Top 10 des jeux mobiles Naruto les plus récents et les plus attrayants aujourdhui

Top 10 des jeux mobiles Naruto les plus récents et les plus attrayants aujourdhui

Si vous êtes un fan de Naruto, vous ne pouvez sûrement pas ignorer les 9 jeux mobiles Naruto les plus récents et les plus attrayants que nous présentons dans l'article suivant.

Top 10 des meilleurs jeux PC 2 joueurs 2023

Top 10 des meilleurs jeux PC 2 joueurs 2023

Le jeu PC 2 joueurs vous aide à vivre une expérience plus amusante et agréable avec vos amis. Jetons un coup d'œil aux jeux les plus populaires et les plus récents mis à jour ci-dessous !

Top 10+ des jeux à jouer avec votre amoureux que vous devez savoir

Top 10+ des jeux à jouer avec votre amoureux que vous devez savoir

Jouer à des jeux avec votre amant aide non seulement à divertir, mais renforce également le lien émotionnel entre les couples. Alors quels sont les jeux à jouer avec votre amoureux que vous devez connaître ?

Top 10 des meilleurs jeux dhorreur sur PC, téléphone que vous ne devriez pas ignorer

Top 10 des meilleurs jeux dhorreur sur PC, téléphone que vous ne devriez pas ignorer

Les jeux d'horreur apportent toujours un sentiment de suspense. Ainsi, l'article suivant présentera plus de meilleurs jeux d'horreur sur PC, téléphone !

Top 10 des meilleurs jeux PC MOBA 2023 que vous devriez essayer

Top 10 des meilleurs jeux PC MOBA 2023 que vous devriez essayer

Explorons le meilleur jeu Moba sur PC avec WebTech360 pour essayer de choisir celui qui convient à vos propres préférences tout au long de cet article.

Top 10 des jeux PC anciens mais bons les plus populaires 2023

Top 10 des jeux PC anciens mais bons les plus populaires 2023

Jetons un coup d'œil aux 10 meilleurs jeux anciens mais bons, et étaient autrefois considérés comme les jeunes des générations 8x, 9x à travers les informations d'article ci-dessous.

Nouvelle configuration de jeu Red Dead Redemption 2 pour PC

Nouvelle configuration de jeu Red Dead Redemption 2 pour PC

La configuration de jeu Red Dead Redemption 2 est extrêmement adaptée à un PC moderne et moderne. Il s'agit d'un jeu de qualité stable que vous devez connaître et essayer d'expérimenter.

Top 10 des consoles de jeux portables les plus chaudes pour les jeunes vietnamiens

Top 10 des consoles de jeux portables les plus chaudes pour les jeunes vietnamiens

Les consoles de jeux portables sont l'un des appareils de divertissement les plus populaires depuis des décennies. Vous allez adorer ce produit si vous l'essayez une fois.

Top 9 des meilleurs jeux Spider-Man de tous les temps

Top 9 des meilleurs jeux Spider-Man de tous les temps

Explorons les 9 meilleurs jeux spiderman de tous les temps pour vivre la meilleure expérience avec ce célèbre personnage de super-héros.

Top 8 des jeux en ligne mobiles MU les plus populaires actuellement 2023

Top 8 des jeux en ligne mobiles MU les plus populaires actuellement 2023

Game MU a de nombreuses versions et domine bientôt la communauté des joueurs. Le meilleur jeu MU avec le plus de joueurs aujourd'hui ci-dessous ne décevra pas les joueurs.

Résumé des 7 meilleurs jeux de tir sur PC (en ligne et hors ligne) 2023

Résumé des 7 meilleurs jeux de tir sur PC (en ligne et hors ligne) 2023

Vous aimez la compétition, testez votre adresse au tir et prouvez que vous êtes un tireur d'élite professionnel. Rejoignez WebTech360 pour découvrir les meilleurs jeux de tir sur PC !

Top 10 des jeux MMORPG PC les plus jouables actuellement appréciés des jeunes 2023

Top 10 des jeux MMORPG PC les plus jouables actuellement appréciés des jeunes 2023

Le jeu PC MMORPG n'a jamais été chaud et particulièrement aimé. L'article suivant vous présentera quelques jeux exceptionnels aujourd'hui.

Top 10 des jeux Google super attrayants à ne pas manquer

Top 10 des jeux Google super attrayants à ne pas manquer

Les jeux en ligne deviennent de plus en plus populaires. Pocket top 10 des jeux sur Google super attractifs, intéressants à découvrir progressivement.

Chargez rapidement le jeu Genshin Impact avec seulement 3 façons simples

Chargez rapidement le jeu Genshin Impact avec seulement 3 façons simples

Instructions sur 3 façons de charger le jeu Genshin Impact via Visa, Mastercard, Zing, Gate, portefeuille Momo... simple et rapide. Les détails sur la façon de recharger les cartes se trouvent juste en dessous de l'article suivant.