5 façons d'utiliser l'outil CHROME INSPECT

Si vous avez regardé l'outil d'inspection Chrome sans aucune connaissance de son fonctionnement, tout ce que vous verriez est un tas de code et de panneaux déroutants. Vous penseriez probablement que cela est plus logique pour un programmeur, et vous êtes raisonnable dans une certaine mesure. Mais je suis ici pour vous dire comment cet outil peut vous être bénéfique, même si vous n'avez jamais écrit une ligne de code dans votre vie.

Vous souhaitez trouver des liens cachés, des images et des fichiers audio sur les sites Web? L'outil d'inspection de Chrome peut vous aider. Il est utile lorsque vous souhaitez télécharger des images ou des vidéos que vous ne pouvez pas cliquer avec le bouton droit ou trouver la source du contenu intégré. Les liens sont généralement placés dans des balises contenant des balises « A, » dans « IMG » et des vidéos dans des balises « vidéo », et vous pouvez les voir toutes dans le volet Elements.

Vous n'avez pas besoin d'être programmeur pour utiliser l'outil d'inspection de Chrome, mais la connaissance du HTML de base aide. HTML est un langage simple qui construit des pages Web à l'aide de balises. Apprendre les bases ne prend que quelques minutes.

Pour utiliser l'outil, cliquez avec le bouton droit sur n'importe quel élément de page Web, tels que du texte, des images ou des liens, et sélectionnez « Inspecter » dans le menu.

Vous pouvez également appuyer sur Ctrl + Shift + C (Windows) ou CMD + Shift + C (Mac) pour ouvrir l'outil. Appuyez ensuite sur Ctrl + F (Windows) ou CMD + F (Mac) pour rechercher des éléments spécifiques.

Personnaliser l'apparence d'un site Web

Vous pouvez également personnaliser temporairement l'apparence d'un site Web à l'aide de l'outil d'inspection Chrome. Les modifications que vous effectuez seront temporaires car l'inspecteur est un environnement isolé (communément appelé bac à sable). Ce que vous faites n'affectera pas le site principal, ce qui signifie que vous n'avez pas à vous soucier de briser quoi que ce soit.

Il existe de nombreux cas d'utilisation ici où de petits ajustements peuvent améliorer votre expérience utilisateur. Par exemple, si la police est trop petite, vous pouvez la changer. Vous pouvez même modifier la couleur d'arrière-plan en quelque chose de plus sombre dans des conditions de faible luminosité. Si une bannière vous distrait, vous pouvez le désactiver.

Pour cette section, vous devrez connaître CSS de base (feuilles de style en cascade), un autre langage simple qui décrit à quoi devrait ressembler les éléments d'une page Web. Encore une fois, vous n'avez pas besoin d'être programmeur. Cette introduction pratique à CSS par Mozilla peut vous familiariser avec ses concepts principaux en 15 minutes.

Regardons le problème de bannière distrayant. Si je le veux, vous pouvez inspecter l'élément sur la page Web et placer la ligne de code suivante dans son volet « Styles »:

        display: none;

    

Étant donné que l'outil d'inspection apparaît sur le côté droit de la fenêtre du navigateur par défaut, le volet « Styles » sera généralement en dessous.

Il est très intuitif, ne nécessite aucune expertise de codage et vous pouvez facilement utiliser une feuille de triche ou une IA CSS pour apporter les modifications dont vous avez besoin. En outre, il propose une mise en évidence de la syntaxe et de la complétion automatique pour vous assurer que vous écrivez du code de travail.

Découvrez le contenu caché

Tout comme vous pouvez masquer du contenu sur un site Web, vous pouvez également le révéler lorsqu'il est caché. Il peut s'agir de liens, de médias ou d'autres contenus. Cela est utile si, par exemple, vous souhaitez voir un extrait d'article caché derrière un mur payant ou activer des fonctionnalités cachées comme les boutons et les champs de formulaire pour voir ce qu'ils font.

Voici des exemples de code que vous pouvez rechercher et supprimer dans le panneau Styles pour voir le contenu caché:

        display: none;
visibility: hidden;
opacity: 0;

    

Une partie du contenu peut être cachée à l'aide de JavaScript, ce qui est un peu plus difficile à modifier si vous n'êtes pas programmeur. Mais c'est une discussion pour un autre jour.

Diagnostiquer les problèmes du site Web

Si un site Web est lent, il peut parfois être difficile de diagnostiquer le problème. Vous pouvez utiliser l'outil d'inspection Chrome pour savoir s'il s'agit du site ou de votre réseau.

Pour ce faire, ouvrez l'outil d'inspection Chrome et sélectionnez l'onglet « réseau ». Vous voudrez peut-être étendre le volet s'il n'est pas visible de voir les autres onglets. Ici, vous verrez tout ce que la page charge, y compris HTML, CSS, scripts et médias.

Recherchez tous les éléments mis en surbrillance en rouge et vérifiez leur colonne d'état pour un code d'erreur (par exemple, 404 ou 500). Vous pouvez ensuite contacter l'administrateur du site Web et signaler l'erreur et les éléments affectés.

Alternativement, vous pouvez extraire le journal réseau en cliquant sur l'icône de téléchargement dans le menu sous les onglets. Par la suite, vous pouvez l'envoyer à l'administrateur afin qu'ils puissent dépanner le problème et faire fonctionner correctement le site pour vous.

S'il s'avère que votre réseau est le problème, vous devez dépanner cela. Si c'est lent, vous pouvez prendre des mesures pour accélérer votre connexion Internet.

Apprendre le développement Web

Si vous êtes dans votre voyage pour devenir un développeur Web, l'outil d'inspection Chrome est un excellent outil d'apprentissage. Plus important encore, il peut vous apprendre comment les sites Web sont structurés.

Par exemple, l'onglet « Elements » révèle la structure HTML du site Web. Il peut montrer à quel point des étiquettes comme « Div », « P » ou « A », ainsi que CSS, sont utilisées pour construire des mises en page incroyables.

En outre, comme mentionné précédemment, l'outil d'inspection vous permet d'apporter des modifications temporaires à HTML, CSS et mise en page d'un site Web. Cela fournit un environnement de bonne pratique, en particulier sur les grands sites Web avec du code complexe. Expérimenter dans cet environnement est un bon moyen de voir comment vos modifications fonctionnent en temps réel et de renforcer ce que vous avez appris.

---

L'outil d'inspection Chrome peut être intimidant, en particulier pour ceux qui ne peuvent pas coder. Mais vous n'avez pas besoin d'être un programmeur expert pour l'utiliser. Et si vous êtes prêt à faire un petit effort pour comprendre le HTML et le CSS de base, cela peut devenir un outil inestimable pour améliorer votre expérience de navigation.